diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md index a4c6a8f627..dfe0f412f6 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md @@ -1,20 +1,20 @@ --- layout: post -title: Load document after resources Loaded React PDF Viewer | Syncfusion +title: Load a Document After PDFium Resources Are Ready | Syncfusion description: Learn how to load a PDF only after assets are ready in the Syncfusion React PDF Viewer (Standalone) using the resourcesLoaded event. platform: document-processing -control: PDF Viewer +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Load a PDF only after PDFium resources are ready +# Ensure PDFium resources are ready before loading PDFs -When using the Standalone PDF Viewer, the component downloads the PDFium runtime assets (scripts/wasm) from the path specified in `resourceUrl`. Attempting to load a document before those assets are available can cause errors. Use the `resourcesLoaded` event to defer document loading until all required assets are ready. +When using the Standalone PDF Viewer, the component downloads the PDFium runtime assets (scripts/wasm) from the path specified in `resourceUrl`. Calling `load()` before those assets are ready can fail with a "PDFium not initialized" error or silently leave the viewer blank. Use the `resourcesLoaded` event to defer document loading until all required assets are ready. ## When does resourcesLoaded trigger? -The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64). +The `resourcesLoaded` event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the `load` method to open a document (by URL or Base64). The event fires for the viewer's asset-load life cycle, not for every document load, so you can call `load` again later (for example, in response to a user action) without waiting for the event. ## How to load a document after resourcesLoaded @@ -44,10 +44,11 @@ import { } from '@syncfusion/ej2-react-pdfviewer'; function App() { + // viewerRef is a stable ref; it does not need to be a useCallback dependency. const viewerRef = useRef(null); const onResourcesLoaded = useCallback(() => { - // Choose ONE of the following load options: + // PDFium assets are ready; it is safe to call load() now. // 1) Load by URL (recommended for your case) viewerRef.current?.load( @@ -55,10 +56,8 @@ function App() { '' ); - // 2) Load by Base64 (uncomment if needed) - // supply your Base64 string - // const base64 ='data:application/pdf;base64,JVBERi0xLjMNCiXi48...'; - + // 2) Load by Base64 (uncomment to use). + // const base64 = 'data:application/pdf;base64,JVBERi0xLjMNCiXi48...'; // if (base64) { // viewerRef.current?.load(base64, ''); // } @@ -93,7 +92,7 @@ function App() { ); } -// Mount (make sure you have
in index.html) +// Mount the app (make sure you have
in index.html). const container = document.getElementById('sample'); const root = createRoot(container); root.render(); @@ -103,13 +102,13 @@ root.render(); ## Notes and best practices -- Always set a valid resourceUrl when using the Standalone PDF Viewer. If the path is incorrect or blocked by the network, the event cannot fire. -- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks. -- The event fires for the viewer’s asset load life cycle, not for every document load. After it fires once, you can safely call load again later (for example, in response to user actions) without waiting for the event. +- Always set a valid `resourceUrl` when using the Standalone PDF Viewer. If the path is incorrect, the event will not fire and `load()` will fail. +- If the assets CDN is blocked by the network, the event will not fire. Allow list the asset host (and the document URL host, when applicable) in CORS and CSP settings. +- Load documents inside `resourcesLoaded` to guarantee that the PDFium runtime is ready and to prevent intermittent errors on slower networks. ## See also -- [Events in React PDF Viewer](../events#resourcesloaded) -- [Open PDF files](../open-pdf-files) -- [Save PDF files](../save-pdf-files) -- [Getting started](../getting-started) +- [Events in React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/events) +- [Open PDF files](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/open-pdf-files) +- [Save PDF files](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/save-pdf-files) +- [Getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document.md index 2fb413e95c..113114c500 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document.md @@ -9,7 +9,7 @@ documentation: ug # Load documents dynamically in React PDF Viewer -The PDF Viewer supports loading or switching PDF documents at runtime after the initial viewer initialization. Use the [load](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#load) method to open a document from a URL or a Base64 string. +The PDF Viewer supports loading or switching PDF documents at runtime after the initial viewer initialization. Use the [load] (https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#load) method to open a document from a URL or a Base64 string. The following steps show common approaches for loading documents dynamically. @@ -29,13 +29,13 @@ The following steps show common approaches for loading documents dynamically. ``` -**Step 3:** Use the following code snippet to load a PDF document from a URL (document name). +**Step 3:** Use the following code snippet to load a PDF document from a URL. ``` + ``` To close the Bookmark pane programmatically, use the following code: @@ -39,12 +39,12 @@ To close the Bookmark pane programmatically, use the following code: ```ts + function closeBookmark() { + var viewer = document.getElementById('container').ej2_instances[0]; + // close Bookmark pane + viewer.bookmarkViewModule.closeBookmarkPane(); + } + ``` [View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/Open%20and%20Close%20bookmark%20pane) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/open-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/open-thumbnail.md index a76a2b42f2..2b4293c1e9 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/open-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/open-thumbnail.md @@ -1,13 +1,13 @@ --- layout: post -title: Open the thumbnail pane programmatically | Syncfusion +title: Programmatically Display the Thumbnail Pane | Syncfusion description: Learn how to open the thumbnail pane programmatically in the Syncfusion React PDF Viewer using openThumbnailPane. control: PDF Viewer platform: document-processing documentation: ug --- -# Open the thumbnail pane programmatically +# Open the Thumbnail Pane Using Code The PDF Viewer exposes a `openThumbnailPane()` API to open the thumbnail pane from application code. Use this API when the UI needs to show the thumbnail pane in response to user actions or programmatic workflows. @@ -22,9 +22,9 @@ Follow these steps to open the thumbnail pane from application code. ``` diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/pagerenderstarted-pagerendercompleted-event.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/pagerenderstarted-pagerendercompleted-event.md index ea4e226402..0c271ed09e 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/pagerenderstarted-pagerendercompleted-event.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/pagerenderstarted-pagerendercompleted-event.md @@ -1,15 +1,15 @@ --- layout: post -title: Handle pageRenderInitiate and pageRenderComplete | Syncfusion +title: Handle PDF Page Rendering Events | Syncfusion description: Learn how to use the pageRenderInitiate and pageRenderComplete events in the Syncfusion React PDF Viewer during page rendering. control: PDF Viewer platform: document-processing documentation: ug --- -# Handle pageRenderInitiate and pageRenderComplete events +# Track Page Rendering Using PDF Viewer Events -In the PDF Viewer, the `pageRenderInitiate` and `pageRenderComplete` events fire during the page rendering lifecycle: +In the PDF Viewer, the `pageRenderInitiate` and `pageRenderComplete` events fire during the page rendering life cycle: - `pageRenderInitiate`: fired when the rendering of a page begins. Use this event to initialize resources, show loading indicators, or set up rendering parameters before the page content is drawn. - `pageRenderComplete`: fired when the rendering of a page finishes. Use this event to hide loading indicators, record render timing, or run post-render processing. @@ -28,12 +28,12 @@ let pdfviewer; function App() { function pageRenderInitiate(args){ - // This method is called when the page rendering starts + // This event handler is called when the page rendering starts console.log('Rendering of pages started'); console.log(args); }; function pageRenderComplete(args){ - // This method is called when the page rendering completes + // This event handler is called when the page rendering completes console.log('Rendering of pages completed'); console.log(args); }; @@ -73,12 +73,12 @@ let pdfviewer; function App() { function pageRenderInitiate(args){ - // This method is called when the page rendering starts + // This event handler is called when the page rendering starts console.log('Rendering of pages started'); console.log(args); }; function pageRenderComplete(args){ - // This method is called when the page rendering completes + // This event handler is called when the page rendering completes console.log('Rendering of pages completed'); console.log(args); }; diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/perform-form-field-double-click-event.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/perform-form-field-double-click-event.md index d261d8f4bb..0b869a52bc 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/perform-form-field-double-click-event.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/perform-form-field-double-click-event.md @@ -1,20 +1,23 @@ --- layout: post -title: Perform form field double click event in React Pdfviewer component | Syncfusion -description: Learn here all about Perform form field double click event in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. -control: Perform form field double click event +title: Handle form field double-click event in React PDF Viewer | Syncfusion +description: Learn how to handle the form field double-click event in the Syncfusion React PDF Viewer component to customize user interactions. +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## --- -## Perform form field double-click event in React PDF Viewer +# Form field double-click event in React PDF Viewer -This article demonstrates how to handle a double-click on a PDF form field by using the `formFieldDoubleClick` event. The event provides information about the clicked field and can be used to open custom editors, show dialogs, or trigger other application behaviors. +This article demonstrates how to handle a double-click on a PDF form field by using the [`formFieldDoubleClick`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#formfielddoubleclick) event. The event provides information about the clicked field and can be used to open custom editors, show dialogs, or trigger other application behaviors. -**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) to create simple PDF Viewer sample in React. -**Step 2:** Add the following code snippet in the `index.js` file to add the form field double click event in the PDF Viewer. +**Step 1:** Create a simple PDF Viewer sample in React by following the steps in the appropriate getting-started guide based on your deployment mode. + +* [Getting started with the React Standalone PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) + +**Step 2:** Subscribe to the `formFieldDoubleClick` event in the `index.js` file. The complete code for each deployment mode is shown below. {% tabs %} {% highlight js tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/resolve-unable-to-find-an-entry-point-error.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/resolve-unable-to-find-an-entry-point-error.md index 64e827a4b4..d206bcb6bf 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/resolve-unable-to-find-an-entry-point-error.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/resolve-unable-to-find-an-entry-point-error.md @@ -1,13 +1,13 @@ --- layout: post -title: Resolve “unable to find an entry point” error | Syncfusion -description: Learn how to resolve the “unable to find an entry point” error after upgrading the Pdfium package in the Syncfusion React PDF Viewer. +title: Resolve "Unable to Find an Entry Point" Error | Syncfusion +description: Learn how to resolve the "Unable to find an entry point" error after upgrading the Pdfium package in the Syncfusion React PDF Viewer. control: PDF Viewer platform: document-processing documentation: ug --- -# Resolve “unable to find an entry point” error +# Fix the "Unable to Find an Entry Point" PDF Viewer Error Starting with **21.1.0.35 (2023 Volume 1)**, the Pdfium package was upgraded to improve text search, selection, rendering, and performance. After upgrading, the PDF Viewer may display a **“Web-Service is not listening”** error. In most cases, the Network tab reveals that an outdated Pdfium assembly is referenced in the local web service project. Ensure the correct native assembly is deployed for the target OS: diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/restricting-zoom-in-mobile-mode.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/restricting-zoom-in-mobile-mode.md index e8d543cd5a..5cc1733464 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/restricting-zoom-in-mobile-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/restricting-zoom-in-mobile-mode.md @@ -1,13 +1,13 @@ --- layout: post -title: Restrict zoom percentage on mobile devices | Syncfusion +title: Restrict PDF Zoom on Mobile Devices | Syncfusion description: Learn how to restrict zoom percentage on mobile devices using minZoom and maxZoom in the Syncfusion React PDF Viewer. control: PDF Viewer platform: document-processing documentation: ug --- -# Restrict zoom percentage on mobile devices +# Limit PDF Viewer Zoom Levels on Mobile Devices Use `minZoom` and `maxZoom` to restrict zoom levels on mobile devices and improve scrolling performance and perceived load time. Restricting zoom prevents extreme zoom levels that can degrade rendering performance on constrained devices. @@ -20,7 +20,7 @@ import * as React from 'react'; import './index.css'; import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, - FormFields, FormDesigner, PageOrganizer Inject } from '@syncfusion/ej2-react-pdfviewer'; + FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer'; import {Browser} from '@syncfusion/ej2-base'; function App() { @@ -63,7 +63,7 @@ import * as React from 'react'; import './index.css'; import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, - FormFields, FormDesigner, PageOrganizer Inject } from '@syncfusion/ej2-react-pdfviewer'; + FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer'; import {Browser} from '@syncfusion/ej2-base'; function App() { diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/retrieve-id-of-the-document.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/retrieve-id-of-the-document.md index 56ee4354b5..4650178cca 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/retrieve-id-of-the-document.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/retrieve-id-of-the-document.md @@ -1,16 +1,16 @@ --- layout: post -title: Retrieve id of the document in React Pdfviewer component | Syncfusion -description: Learn here all about Retrieve id of the document in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. -control: Retrieve id of the document +title: Retrieve document ID in React PDF Viewer | Syncfusion +description: Learn how to retrieve the document ID in the Syncfusion React PDF Viewer to identify, track, and manage loaded PDF documents. +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## --- -## Retrieve document ID in React PDF Viewer +# Retrieve document ID in React PDF Viewer -This article shows how to retrieve the PDF document ID that the viewer stores in `sessionStorage` under the key `hashId`. +This article shows how to retrieve the document ID for a PDF loaded in the React PDF Viewer. The value is held in `sessionStorage` under the key `hashId` and is written after a document is loaded, so it is `null` until a PDF is opened in the viewer. Refer to the following minimal example that logs the stored document ID when a button is clicked: @@ -18,7 +18,7 @@ Refer to the following minimal example that logs the stored document ID when a b ``` -[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/Get%20hash%20id%20from%20storage). \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/Get%20hash%20id%20from%20storage). + +## See also +- [Getting started with React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) +- [Load documents dynamically in React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/how-to/load-document) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/retry-timeout.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/retry-timeout.md index 9a5a323f05..03c011379b 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/retry-timeout.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/retry-timeout.md @@ -1,6 +1,6 @@ --- layout: post -title: Retry Timeout | Syncfusion +title: Configure Retry Timeout Settings | Syncfusion description: Learn here all about Retry Timeout in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. control: Retry Timeout platform: document-processing @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Retry Timeout +# Configure Retry Timeout for PDF Viewer Requests -The `retryTimeout` property controls how long the PDF Viewer waits (in seconds) for an AJAX response before considering that request timed out. When a timeout occurs, the viewer will retry the request according to the `retryCount` setting. Properly configuring `retryTimeout` and `retryCount` makes the viewer more resilient to transient network errors while avoiding excessive load on the server. +The `retryTimeout` property controls how long the PDF Viewer waits (in seconds) for an AJAX response before considering that request timed out. When a timeout occurs, the PDF Viewer retries the request according to the `retryCount` setting. Properly configuring `retryTimeout` and `retryCount` makes the PDF Viewer more resilient to transient network errors while avoiding excessive load on the server. Defaults and units: diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/show-custom-stamp-item.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/show-custom-stamp-item.md index 4e6c94ed61..6087ff1efe 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/show-custom-stamp-item.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/show-custom-stamp-item.md @@ -1,14 +1,14 @@ --- layout: post -title: Show custom items in the Custom Stamp dropdown | Syncfusion -description: Learn how to display custom items in the Custom Stamp dropdown using customStampSettings in the Syncfusion React PDF Viewer. +title: Handle Signature Selection Events in PDF Viewer | Syncfusion +description: Learn how to display custom items in the custom stamp dropdown using customStampSettings in the Syncfusion React PDF Viewer. control: PDF Viewer platform: document-processing documentation: ug --- -# Display custom stamp items in the custom stamp dropdown +# Add Custom Stamp Items to the Stamp Dropdown ### Overview @@ -16,7 +16,7 @@ This guide shows how to add custom images to the custom stamp dropdown in the Re ### Steps to show custom items in the custom stamp dropdown -**Step 1:** Create a basic React PDF Viewer sample using the [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide: +**Step 1:** Create a basic React PDF Viewer sample using the [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide. **Step 2:** Configure custom stamp settings @@ -182,4 +182,11 @@ root.render(); Use `customStampSettings` to specify the custom stamps that should appear in the dropdown menu. -[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to) + +## Troubleshooting + +- **Stamps do not appear in the dropdown:** Ensure `isAddToMenu` and `enableCustomStamp` are both set to `true`, and that the `customStamps` array is not empty. +- **Image not loading (CORS errors):** When using an absolute URL, the image host must send the appropriate CORS headers. Host images on the same origin or a CORS-enabled CDN. +- **Broken image icon in the dropdown:** Verify that the `customStampImageSource` contains a valid Base64 data URI or a reachable absolute URL. Open the URL directly in a browser to confirm. +- **Stamps appear faded:** Check the `opacity` value; it must be between `0` and `1`. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/show-hide-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/show-hide-annotation.md index 138273001d..149b826488 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/show-hide-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/show-hide-annotation.md @@ -57,8 +57,11 @@ export class App extends React.Component { hideAnnotations = () => { if (this.pdfViewer.current) { + // exportAnnotationsAsObject() returns a Promise that resolves to a JSON string + // of the current annotations. Store it so it can be restored later. this.pdfViewer.current.exportAnnotationsAsObject().then((value) => { this.setState({ exportObject: value }); + // deleteAnnotations() removes all annotations from the viewer. this.pdfViewer.current.deleteAnnotations(); }); } @@ -66,6 +69,7 @@ export class App extends React.Component { showAnnotations = () => { if (this.pdfViewer.current && this.state.exportObject) { + // importAnnotation() expects the JSON string from exportAnnotationsAsObject(). this.pdfViewer.current.importAnnotation(JSON.parse(this.state.exportObject)); } } @@ -91,6 +95,7 @@ export class App extends React.Component { ); {% endhighlight %} {% endtabs %} -These events enable robust management of handwritten signature state, supporting interactive and dynamic user experiences. +These events enable robust management of handwritten signature selection state, allowing you to update the UI, toggle contextual controls, and record metadata when signatures are selected or unselected. [View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/unload-document.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/unload-document.md index 8d2444dc03..44527a59d0 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/unload-document.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/unload-document.md @@ -1,7 +1,7 @@ --- layout: post -title: Unload document in React Pdfviewer component | Syncfusion -description: Learn here all about Unload document in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Unload document in React PDF Viewer component | Syncfusion +description: Learn here all about Unload document in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more. control: PDF Viewer platform: document-processing documentation: ug @@ -10,24 +10,30 @@ domainurl: ##DomainURL## # Unload document in React Pdfviewer component -The PDF Viewer provides the [unload()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#unload) method to remove the currently loaded PDF from the viewer instance. Use this API to free memory or reset the viewer when navigating between documents or closing the viewer. +The PDF Viewer provides the [unload()] (https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#unload) method to remove the currently loaded PDF from the viewer instance. Use this API to free memory or reset the viewer when navigating between documents or closing the viewer. The following steps are used to unload the PDF document programmatically. -**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) to create a simple PDF Viewer sample. +**Step 1:** Follow the steps in the [Getting Started with React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide to create a simple PDF Viewer sample. **Step 2:** Add the following code snippet to perform the unload operation. ``` - - ``` +} + +``` -Find the sample [how to unload the PDF document programmatically](https://stackblitz.com/edit/react-ffbe8v?file=public%2Findex.html) \ No newline at end of file +Find the sample [how to unload the PDF document programmatically](https://stackblitz.com/edit/react-ffbe8v?file=public%2Findex.html). + +## See also + +* [Open PDF Files](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/open-pdf-files) +* [Save PDF Files](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/save-pdf-files) +* [Getting Started with Server-Backed React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started-with-server-backed) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/webservice-not-listening.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/webservice-not-listening.md index ef40b5bb42..13758c04a9 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/webservice-not-listening.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/webservice-not-listening.md @@ -1,8 +1,8 @@ --- layout: post -title: Resolve "Web-service is not listening" to error | Syncfusion -description: Learn here all about How to clear the "Web-service is not listening" to error in React Pdfviewer component of Syncfusion Essential JS 2 and more. -control: How to clear the "Web-service is not listening" to error +title: Resolve "Web-service is not listening" error | Syncfusion +description: Learn how to resolve the "Web-service is not listening" error in React PDF Viewer component of Syncfusion Essential JS 2 and more. +control: How to clear the "Web-service is not listening" error platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -10,13 +10,13 @@ domainurl: ##DomainURL## # How to resolve the "Web-service is not listening" error in React -![Alt text](../images/webservice.png) +![Web-service is not listening error in React PDF Viewer](../images/webservice.png) If the React PDF Viewer reports a "Web-service is not listening" error, use the browser's developer tools to diagnose the request and the server behavior. The steps below guide the most common troubleshooting paths and remediation actions. **Step 1:** Open the browser's developer tools by right-clicking on the page and selecting `Inspect` from the dropdown menu. Then Navigate to the `Network` tab. This will show you all of the requests that are being made by the page. -![Alt text](../images/networktab.png) +![Browser Network tab showing PDF Viewer requests](../images/networktab.png) **Step 2:** Try to request the web service. If the service is not listening, the request will fail, and you should see an error message in the Network tab. Click on the failing request to see the details of the error, such as the error message or stack trace. This can help you identify the root cause of the issue. Check the server logs for any errors or warnings that may indicate the cause of the issue and help you to troubleshoot the problem. @@ -26,15 +26,16 @@ By following these steps and using the Network tab in your browser's developer t N> Make sure you are connected to the internet and that your connection is stable. You can try accessing other websites or services to see if they are working, and make sure the URL you are using to access the web service is correct and properly formatted. -## Here are some common exceptions +## Common exceptions -* File not found. -* Document cache not found. -* Document pointer does not exist in the cache. +* [File not found](#file-not-found) +* [Document cache not found](#document-cache-not-found) +* [Document pointer does not exist in the cache](#the-document-pointer-does-not-exist-in-the-cache) +* [Internal server error](#internal-server-error) ## File not found -If you are encountering an error message stating that the web service is not listening due to a file not being found in the PDF viewer, you can try the following steps to resolve the issue: +If you are encountering an error message stating that the web service is not listening due to a file not being found in the PDF Viewer, you can try the following steps to resolve the issue: ### Check the file path @@ -54,7 +55,7 @@ We can use Redis cache and distributive cache for this issue. Ensure that your network connection is stable and strong enough to support the web service you are trying to use. Sometimes, simply restarting the web service can resolve the issue. Try stopping and starting the service again to see if it resolves the problem. -## The document pointer does not exist in the cache. +## The document pointer does not exist in the cache The `Document pointer does not exist in the cache` exception in the PDF Viewer usually occurs when there is an issue with loading or caching the PDF document. This error can be caused by a variety of reasons, including: