From a4912007cc65e0d0fc6b1be5941e2113d8d9027f Mon Sep 17 00:00:00 2001 From: Balaji Loganathan Date: Mon, 9 Mar 2026 14:44:28 +0530 Subject: [PATCH 1/6] 1014821: Revamped print module in react --- Document-Processing-toc.html | 9 +- .../PDF/PDF-Viewer/react/print.md | 510 ------------------ .../react/print/enable-print-rotation.md | 72 +++ .../PDF/PDF-Viewer/react/print/events.md | 92 ++++ .../PDF/PDF-Viewer/react/print/overview.md | 120 +++++ .../PDF/PDF-Viewer/react/print/print-modes.md | 82 +++ .../PDF-Viewer/react/print/print-quality.md | 85 +++ .../react/security/prevent-copy-and-print.md | 2 +- .../restricting-download-and-print.md | 2 +- 9 files changed, 461 insertions(+), 513 deletions(-) delete mode 100644 Document-Processing/PDF/PDF-Viewer/react/print.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/print/enable-print-rotation.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/print/events.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/print/overview.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/print/print-quality.md diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 584381bb48..2fca2cc243 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -1080,7 +1080,14 @@
  • Events
    • -
  • Print
    • +
  • Print + +
  • Download
  • Events
  • Text Selection
    • diff --git a/Document-Processing/PDF/PDF-Viewer/react/print.md b/Document-Processing/PDF/PDF-Viewer/react/print.md deleted file mode 100644 index 365a46d03f..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/react/print.md +++ /dev/null @@ -1,510 +0,0 @@ ---- -layout: post -title: Print in React Pdfviewer component | Syncfusion -description: Learn here all about Print in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. -control: PDF Viewer -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- -# Print in React PDF Viewer component - -The PDF Viewer supports printing the loaded PDF document. Enable or disable printing with the `enablePrint` API as shown in the examples below. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} -{% raw %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, - ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endraw %} -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} -{% raw %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, - ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endraw %} -{% endhighlight %} -{% endtabs %} - -![PDF Viewer print dialog and toolbar](./images/print.png) - -Invoke the print action programmatically using the example below. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} -{% raw %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, - ThumbnailView, Print, TextSelection, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - function printClicked() { - var viewer = document.getElementById('container').ej2_instances[0]; - viewer.print.print() - } - return (
    -
    - {/* Render the PDF Viewer */} - - - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endraw %} -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} -{% raw %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, - ThumbnailView, Print, TextSelection, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - function printClicked() { - var viewer = document.getElementById('container').ej2_instances[0]; - viewer.print.print() - } - return (
    -
    - {/* Render the PDF Viewer */} - - - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endraw %} -{% endhighlight %} -{% endtabs %} - -## Customize print quality with printScaleFactor - -Adjust print quality using the `printScaleFactor` API. Valid values are between 0.5 and 5. Increasing the value improves print quality but may increase print time. Values below 0.5 or above 5 produce standard quality; the default value is `1`. - -The example below demonstrates how to set `printScaleFactor`. -{% tabs %} -{% highlight js tabtitle="Standalone" %} -{% raw %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, - ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endraw %} -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} -{% raw %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, - ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endraw %} -{% endhighlight %} -{% endtabs %} - -## EnablePrintRotation in the PDF Viewer - -The `enablePrintRotation` option controls whether landscape pages are automatically rotated to best fit when printing. The default value is `true`. Set it to `false` to preserve the original page orientation during printing. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endhighlight %} -{% endtabs %} - -## Print modes - -Use the `printMode` property to control how the document is printed. - -Supported values: -- `Default`: Print from the same window. -- `NewWindow`: Print from a new window or tab (useful to avoid popup restrictions in some browsers). - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, PrintMode, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, PrintMode, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endhighlight %} -{% endtabs %} - -[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/Customization%20of%20print%20Quality) - -## Print events - -The PDF Viewer exposes print-related events: - -| Name | Description | -|------|-------------| -| `printStart` | Fired when a print action starts. | -| `printEnd` | Fired when a print action completes. | - -### printStart Event - -The `printStart` event fires when printing begins. See `PrintStartEventArgs` for event details such as `fileName` and the `cancel` option. - -The example below shows handling `printStart`. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - { - console.log('Print action has started for file: ' + args.fileName); - // To cancel the print action - // args.cancel = true; - }} - style={{ height: '640px' }}> - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - { - console.log('Print action has started for file: ' + args.fileName); - // To cancel the print action - // args.cancel = true; - }} - style={{ height: '640px' }}> - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endhighlight %} -{% endtabs %} - -### printEnd Event -The [`printEnd`](https://ej2.syncfusion.com/documentation/api/pdfviewer/#printend) event triggers when a print action is completed. - -#### Event Arguments -See [`PrintEndEventArgs`](https://ej2.syncfusion.com/documentation/api/pdfviewer/printEndEventArgs/) for details such as `fileName`. - -The following example illustrates how to handle the `printEnd` event. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - { - console.log('Printed File Name: ' + args.fileName); - }} - style={{ height: '640px' }}> - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -import * as ReactDOM from 'react-dom'; -import * as React from 'react'; -import './index.css'; -import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Inject } from '@syncfusion/ej2-react-pdfviewer'; - -function App() { - return (
    -
    - {/* Render the PDF Viewer */} - { - console.log('Printed File Name: ' + args.fileName); - }} - style={{ height: '640px' }}> - - - -
    -
    ); -} -const root = ReactDOM.createRoot(document.getElementById('sample')); -root.render(); - -{% endhighlight %} -{% endtabs %} - -## See also - -* [Toolbar items](./toolbar) -* [Feature Modules](./feature-module) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/enable-print-rotation.md b/Document-Processing/PDF/PDF-Viewer/react/print/enable-print-rotation.md new file mode 100644 index 0000000000..d004f2e21d --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/print/enable-print-rotation.md @@ -0,0 +1,72 @@ +--- +layout: post +title: Enable Print Rotation in React PDF Viewer | Syncfusion +description: Learn how to enable print rotation for landscape documents in the Syncfusion React PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Enable print rotation in React PDF Viewer + +This guide shows how to enable automatic rotation of landscape pages during printing so they match the paper orientation and reduce clipping. Use [`enablePrintRotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprintrotation) when printing documents that include landscape pages and you want them rotated to match the printer paper orientation. + +## Prerequisites + +- The [`Print`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print) module must be injected into [`PdfViewerComponent`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer). + +## Steps to enable print rotation + +1. Inject the required modules (including [`Print`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print)) into [`PdfViewerComponent`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer). +2. Set [`enablePrintRotation={true}`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprintrotation) in the PDF Viewer during initialization. + +## Example + +{% tabs %} +{% highlight ts tabtitle="App.tsx" %} +{% raw %} +import { + PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner, + FormFields, TextSelection, TextSearch, Print, Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +export default function App() { + return ( +
    + + + +
    + ); +} +{% endraw %} +{% endhighlight %} +{% endtabs %} + +![Print rotation demo showing landscape pages rotated for printing](../../javascript-es6/images/print-rotate.gif) + +[View sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## Troubleshooting + +- If you need to preserve original page orientation for archival printing, set [`enablePrintRotation: false`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprintrotation). +- Confirm that injected modules include [`Print`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print) or the property will have no effect. + +## See also + +- [Overview](./overview) +- [Print quality](./print-quality) +- [Print modes](./print-modes) +- [Print events](./events) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/events.md b/Document-Processing/PDF/PDF-Viewer/react/print/events.md new file mode 100644 index 0000000000..a26ac361b2 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/print/events.md @@ -0,0 +1,92 @@ +--- +layout: post +title: Print Events in React PDF Viewer | Syncfusion +description: Learn how to configure print events and track usage and implements workflows in the Syncfusion React PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Print events in React PDF Viewer + +This page lists each event emitted by the React PDF Viewer's [`Print`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print) feature, the argument schema, and the minimal behaviour notes needed for implementation. + +## Events + +| Name | Description | +|--------------|-------------| +| [`printStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printstart) | Raised when a print action begins. Use the event to log activity or cancel printing. | +| [`printEnd`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printend) | Raised after a print action completes. Use the event to notify users or clean up resources. | + +### `printStart` + +This event is emitted when printing is initiated by toolbar or through programmatic API. Use to validate prerequisites, record analytics, or cancel printing. + +**Arguments** - ([`PrintStartEventArgs`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/printstarteventargs)): + +- `fileName` - The document file name being printed. +- `cancel` - Default: `false`. Set to `true` to cancel the print operation. + +Setting `args.cancel = true` prevents the client-side print flow; for server-backed printing it prevents the service request that produces print output. Find the code example [here](../security/restricting-download-and-print#3-block-print-with-the-printstart-event) + +**Minimal usage example:** + +{% highlight ts %} +{% raw %} + { + console.log('Print action has started for file: ' + args.fileName); + }} + style={{ height: '100%' }} +> + + +{% endraw %} +{% endhighlight %} + +### `printEnd` + +This event is emitted after the printing completes. Use to finalize analytics, clear temporary state, or notify users. + +Arguments - ([`PrintEndEventArgs`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/printendeventargs)): + +- `fileName` - The printed document name. + +**Minimal usage example:** + +{% highlight ts %} +{% raw %} + { + console.log('Printed file name: ' + args.fileName); + }} + style={{ height: '100%' }} +> + + +{% endraw %} +{% endhighlight %} + +## See also + +- [Overview](./overview) +- [Print quality](./print-quality) +- [Enable print rotation](./enable-print-rotation) +- [Print modes](./print-modes) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/overview.md b/Document-Processing/PDF/PDF-Viewer/react/print/overview.md new file mode 100644 index 0000000000..4cf3280e1c --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/print/overview.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Print PDF in React PDF Viewer | Syncfusion +description: Enable and customize printing, configure print events, cancel print, and monitor printing in the Syncfusion React PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Print PDF in React PDF Viewer + +The React PDF Viewer includes built-in printing via the toolbar and APIs so users can control how documents are printed and monitor the process. + +Select **Print** in the built-in toolbar to open the browser print dialog. + +![Browser print dialog from PDF Viewer](../../javascript-es6/images/print.gif) + +## Enable or Disable Print in React PDF Viewer + +The Syncfusion React PDF Viewer component lets users print a loaded PDF document through the built-in toolbar or programmatic calls. Control whether printing is available by setting the [`enablePrint`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprint) property (`true` enables printing; `false` disables it). + +The following React examples render the PDF Viewer with printing disabled. + +{% tabs %} +{% highlight ts tabtitle="App.tsx" %} +{% raw %} +import { + PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner, + FormFields, TextSelection, TextSearch, Print, Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +export default function App() { + return ( +
    + + + +
    + ); +} +{% endraw %} +{% endhighlight %} +{% endtabs %} + +## Print programmatically in React PDF Viewer + +To start printing from code, call the [`pdfviewer.print.print()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print#print-1) method after the document is fully loaded. This approach is useful when wiring up custom UI or initiating printing automatically; calling print before the document finishes loading can result in no output or an empty print dialog. + +{% tabs %} +{% highlight ts tabtitle="App.tsx" %} +{% raw %} +import { RefObject, useRef } from 'react'; +import { + PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner, + FormFields, TextSelection, TextSearch, Print, Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +export default function App() { + const viewerRef: RefObject = useRef(null); + const printPdf = () => { + viewerRef.current.print.print(); + } + return ( +
    + + + + +
    + ); +} +{% endraw %} +{% endhighlight %} +{% endtabs %} + +## Key capabilities + +- Enable or disable printing with the [`enablePrint`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprint) property +- Start printing from UI (toolbar Print) or programmatically using `print.print()`(https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print#print-1). +- Control output quality with the [`printScaleFactor`](./print-quality) property (0.5–5) +- Auto‑rotate pages during print using [`enablePrintRotation`](./enable-print-rotation) +- Choose where printing happens with [`printMode`](./print-modes) (Default or NewWindow) +- Track the lifecycle with [`printStart` and `printEnd` events](./events) + +## Troubleshooting + +- Ensure the [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) value matches the deployed `ej2-pdfviewer-lib` version. +- Calling [`print()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print#print-1) launches the browser print dialog; behavior varies by browser and may be affected by popup blockers or browser settings. + +[View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## See Also + +- [Print quality](./print-quality) +- [Enable print rotation](./enable-print-rotation) +- [Print modes](./print-modes) +- [Print events](./events) diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md b/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md new file mode 100644 index 0000000000..eaca7ebc13 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md @@ -0,0 +1,82 @@ +--- +layout: post +title: Print Modes in React PDF Viewer | Syncfusion +description: Learn how to configure print modes for PDF Documents in the Syncfusion React PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Print Modes in the React PDF Viewer + +This guide shows how to set the PDF Viewer [`printMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printmode) so PDFs print from the current window or from a new window/tab. + +## Prerequisites + +- A React app with the Syncfusion PDF Viewer and [`Print`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print) module injected. + +## Steps to set print mode + +1. Decide which [`printMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printmode) you need: + - `Default` — print from the same browser window. + - `NewWindow` — print from a new window or tab (may be blocked by pop-up blockers). + +2. Set [`printMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printmode) during viewer initialization (recommended): + +{% tabs %} +{% highlight ts tabtitle="App.tsx" %} +{% raw %} +import { + PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner, FormFields, + PageOrganizer, TextSelection, TextSearch, Print, Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +export default function App() { + return ( +
    + + + +
    + ); +} +{% endraw %} +{% endhighlight %} +{% endtabs %} + +![Print in New Window](../../javascript-es6/images/print-newwindow.gif) + +3. Or change it at runtime after the viewer is created: + +```ts +// switch to NewWindow at runtime +pdfviewer.printMode = 'NewWindow'; +``` + +## Quick reference + +- `Default`: Print from the same window (default). +- `NewWindow`: Print from a new window or tab. + +N> Browser pop-up blockers must allow new windows or tabs when using `pdfviewer.printMode = "NewWindow"`. + +[View live examples and samples on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## See also + +- [Overview](./overview) +- [Print quality](./print-quality) +- [Enable print rotation](./enable-print-rotation) +- [Print events](./events) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/print-quality.md b/Document-Processing/PDF/PDF-Viewer/react/print/print-quality.md new file mode 100644 index 0000000000..5a49a0a448 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/print/print-quality.md @@ -0,0 +1,85 @@ +--- +layout: post +title: Customize Print Quality in React PDF Viewer | Syncfusion +description: Learn how to customize print quality for PDF Documents in the Syncfusion React PDF Viewer component. +platform: document-processing +control: Print +documentation: ug +domainurl: ##DomainURL## +--- + +# Customize Print Quality in React PDF Viewer + +This article shows a concise, task-oriented workflow to set and verify print quality for documents rendered by the React PDF Viewer by using the [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) property. + +**Goal:** Set a suitable [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) to improve printed output sharpness while balancing performance and memory use. + +## Steps to set `printScaleFactor` + +### 1. Choose a target print quality. + +- Valid [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) values: **0.5 – 5**. Higher values increase image sharpness and resource use. +- Default value: **1**. + +### 2. Set `printScaleFactor` during initialization + +It is recommended that you set the [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) in the viewer options during initialization. + +{% tabs %} +{% highlight ts tabtitle="App.tsx" %} +{% raw %} +import { + PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner, + FormFields, TextSelection, TextSearch, Print, Inject +} from '@syncfusion/ej2-react-pdfviewer'; + +export default function App() { + return ( +
    + + + +
    + ); +} +{% endraw %} +{% endhighlight %} +{% endtabs %} + +### 3. Set `printScaleFactor` after instantiation + +As an alternative option, the [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) can be dynamically changed during runtime + +{% highlight ts %} +// Update printScaleFactor at runtime +pdfviewer.printScaleFactor = 2; // increase print resolution for upcoming prints +{% endhighlight %} + +### 4. Verify output + +Use browser Print Preview or produce a printed/PDF copy to confirm sharpness and acceptable render time. + +## Notes + +- Values outside the supported range **0.5 – 5** will be ignored and fall back to the default (`1`). +- Increasing [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) raises CPU, memory, and rendering time requirements. Test on target machines and documents before setting a higher factor. + +[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/Customization%20of%20print%20Quality) + +## See Also + +- [Overview](./overview) +- [Enable print rotation](./enable-print-rotation) +- [Print modes](./print-modes) +- [Print events](./events) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/prevent-copy-and-print.md b/Document-Processing/PDF/PDF-Viewer/react/security/prevent-copy-and-print.md index 85ccc56724..a195f7e56a 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/security/prevent-copy-and-print.md +++ b/Document-Processing/PDF/PDF-Viewer/react/security/prevent-copy-and-print.md @@ -29,7 +29,7 @@ This guide shows how to prevent users from copying text or printing documents in ### 3. Hide/disable UI elements in the viewer - Print, download and copy options can be disabled or hidden in the viewer regardless of the PDF's permissions. -- Print and download options can be hidden in the viewer's primary toolbar. See [primary toolbar customization](../toolbar-customization/primary-toolbar). +- Print and download options can be hidden in the viewer's primary toolbar. See [primary toolbar customization](../toolbar-customization/primary-toolbar#3-show-or-hide-primary-toolbar-items). - Copy option in the context menu can be disabled in the PDF Viewer. See [customize context menu](../context-menu/custom-context-menu). ### 4. Disable print programmatically in the viewer diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md b/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md index b84096bbbe..1ef4bdb8c7 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md +++ b/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md @@ -29,7 +29,7 @@ The viewer toolbar items are controlled by [`toolbarSettings.toolbarItems`](http The viewer raises the [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) event whenever a download is initiated. Add an event handler and set `args.cancel = true` to block the operation regardless of how it was triggered (toolbar, API, or custom UI). -### 3. Block download with the `printStart` event +### 3. Block print with the `printStart` event The viewer triggers the [`printStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printstart) event whenever a print action is initiated. Attach an event handler to the event and set `args.cancel = true` to block the operation regardless of how it was triggered. From bf0fb6c6358beb5d59b5831cf586638625e8579d Mon Sep 17 00:00:00 2001 From: Balaji Loganathan Date: Mon, 9 Mar 2026 15:03:09 +0530 Subject: [PATCH 2/6] 1014821: Resolved CI errors --- Document-Processing-toc.html | 2 +- Document-Processing/PDF/PDF-Viewer/react/print/events.md | 2 +- Document-Processing/PDF/PDF-Viewer/react/print/overview.md | 2 +- Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 2fca2cc243..d7aa6bbd3f 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -1080,7 +1080,7 @@
  • Events
    • -
  • Print +
  • Print
    • Print Modes
    • Print Quality
      • diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/events.md b/Document-Processing/PDF/PDF-Viewer/react/print/events.md index a26ac361b2..e687e6d709 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/print/events.md +++ b/Document-Processing/PDF/PDF-Viewer/react/print/events.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Print events in React PDF Viewer -This page lists each event emitted by the React PDF Viewer's [`Print`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print) feature, the argument schema, and the minimal behaviour notes needed for implementation. +This page lists each event emitted by the React PDF Viewer's [`Print`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print) feature, the argument schema, and the minimal behavior notes needed for implementation. ## Events diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/overview.md b/Document-Processing/PDF/PDF-Viewer/react/print/overview.md index 4cf3280e1c..d46fdba0f4 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/print/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/react/print/overview.md @@ -103,7 +103,7 @@ export default function App() { - Control output quality with the [`printScaleFactor`](./print-quality) property (0.5–5) - Auto‑rotate pages during print using [`enablePrintRotation`](./enable-print-rotation) - Choose where printing happens with [`printMode`](./print-modes) (Default or NewWindow) -- Track the lifecycle with [`printStart` and `printEnd` events](./events) +- Track the life cycle with [`printStart` and `printEnd` events](./events) ## Troubleshooting diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md b/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md index eaca7ebc13..a88360023a 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md +++ b/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md @@ -1,7 +1,7 @@ --- layout: post title: Print Modes in React PDF Viewer | Syncfusion -description: Learn how to configure print modes for PDF Documents in the Syncfusion React PDF Viewer component. +description: Learn how to configure print modes for PDF Documents in the Syncfusion React PDF Viewer component and more. platform: document-processing control: Print documentation: ug From e97b6cf644ab5a10e90209bea08d584aca2dc406 Mon Sep 17 00:00:00 2001 From: Balaji Loganathan Date: Mon, 9 Mar 2026 17:01:13 +0530 Subject: [PATCH 3/6] 1014821: Revamped print module in react --- .../PDF/PDF-Viewer/react/print/print-modes.md | 6 +++--- .../PDF/PDF-Viewer/react/print/print-quality.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md b/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md index a88360023a..35865f5c81 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md +++ b/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md @@ -18,11 +18,11 @@ This guide shows how to set the PDF Viewer [`printMode`](https://ej2.syncfusion. ## Steps to set print mode -1. Decide which [`printMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printmode) you need: +**Step 1:** Decide which [`printMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printmode) you need: - `Default` — print from the same browser window. - `NewWindow` — print from a new window or tab (may be blocked by pop-up blockers). -2. Set [`printMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printmode) during viewer initialization (recommended): +**Step 2:** Set [`printMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printmode) during viewer initialization (recommended): {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -58,7 +58,7 @@ export default function App() { ![Print in New Window](../../javascript-es6/images/print-newwindow.gif) -3. Or change it at runtime after the viewer is created: +**Step 3:** Print mode can also be changed at runtime after the viewer is created: ```ts // switch to NewWindow at runtime diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/print-quality.md b/Document-Processing/PDF/PDF-Viewer/react/print/print-quality.md index 5a49a0a448..8746d2ab0e 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/print/print-quality.md +++ b/Document-Processing/PDF/PDF-Viewer/react/print/print-quality.md @@ -14,7 +14,7 @@ This article shows a concise, task-oriented workflow to set and verify print qua **Goal:** Set a suitable [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) to improve printed output sharpness while balancing performance and memory use. -## Steps to set `printScaleFactor` +## Steps ### 1. Choose a target print quality. From 69c5183ebb6e671d60ef1e27c74c928fedf1b7c0 Mon Sep 17 00:00:00 2001 From: Balaji Loganathan Date: Tue, 10 Mar 2026 11:34:30 +0530 Subject: [PATCH 4/6] 1014821: Revamped download docs files in react --- .../PDF/PDF-Viewer/react/download.md | 88 +++++++++++++- .../PDF/PDF-Viewer/react/save-pdf-files.md | 111 +++++++++++++++++- 2 files changed, 193 insertions(+), 6 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/download.md b/Document-Processing/PDF/PDF-Viewer/react/download.md index 637f34eb63..e9807fe211 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/download.md +++ b/Document-Processing/PDF/PDF-Viewer/react/download.md @@ -7,15 +7,25 @@ platform: document-processing documentation: ug domainurl: ##DomainURL## --- + # Download in React PDF Viewer component -The PDF Viewer component supports downloading the loaded PDF file. Enable or disable the download using the example below. +The React PDF Viewer allows users to download the currently loaded PDF, including any annotations, form‑field edits, ink drawings, comments, or page reorganizations. Downloading produces a local PDF file containing all applied changes. This guide shows ways to download a PDF displayed in the PDF Viewer: using the built-in toolbar, and programmatically after editing. + +## Download the PDF Using the Toolbar + +The viewer's toolbar can include a download button when the `Toolbar` service is injected. When enabled, users can click the toolbar download icon to save the currently loaded PDF. + +**Notes:** + +- Ensure `Toolbar` is included in the `Inject` services for `PdfViewerComponent` and `DownloadOption` is included in `toolbarItems`. +- See the [toolbar items documentation](./toolbar-customization/primary-toolbar#3-show-or-hide-primary-toolbar-items) for customizing or hiding the default download icon. ![Download button in PDF Viewer](./images/download.png) -Invoke the download action using the following example. +## Download an Edited PDF Programmatically -N> The examples obtain the viewer instance and call `download()`. Prefer using the component `ref` to access the viewer instance when available rather than direct DOM lookup. +You can invoke the viewer's `download()` method to trigger a download programmatically. The examples below show a standalone setup and a server-backed setup to trigger download action. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -94,7 +104,75 @@ root.render(); {% endhighlight %} {% endtabs %} +## Download a PDF with Flattened Annotations + +You can intercept the viewer's `downloadStart` event, cancel the default download, obtain the document as a `Blob` via `saveAsBlob()`, and flatten annotations before saving the resulting PDF. + +{% tabs %} +{% highlight ts tabtitle="App.tsx" %} +{% raw %} +import { + PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, + ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, + PageOrganizer, Inject, Print, DownloadStartEventArgs +} from '@syncfusion/ej2-react-pdfviewer'; +import { PdfDocument } from '@syncfusion/ej2-pdf'; +import { RefObject, useRef } from 'react'; + +export default function App() { + const viewerRef: RefObject = useRef(null); + + const blobToBase64 = async (blob: Blob): Promise => { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onerror = () => reject(reader.error); + reader.onload = () => { + const dataUrl: string = reader.result as string; + const data: string = dataUrl.split(',')[1]; + resolve(data); + }; + reader.readAsDataURL(blob); + }); + } + + const flattenPDF = (data: string) => { + let document: PdfDocument = new PdfDocument(data); + document.flatten = true + document.save(`${viewerRef.current.fileName}.pdf`); + document.destroy(); + } + + const handleFlattening = async () => { + const blob: Blob = await viewerRef.current.saveAsBlob(); + const data: string = await blobToBase64(blob); + flattenPDF(data); + } + + const onDownloadStart = async (args: DownloadStartEventArgs) => { + args.cancel = true; + handleFlattening(); + }; + + return ( +
      + + + +
      + ); +} +{% endraw %} +{% endhighlight %} +{% endtabs %} + ## See also -* [Toolbar items](./toolbar) -* [Feature Modules](./feature-module) \ No newline at end of file +- [Toolbar items](./toolbar) +- [Feature Modules](./feature-module) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md index 3583c2d4be..8963d9ec2c 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md +++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md @@ -253,9 +253,118 @@ Each link below goes to a provider page with simple, step-by-step instructions a - [Box](./save-pdf-file/to-box-cloud-file-storage) - [Azure AD (auth notes)](./save-pdf-file/to-azure-active-directory) +## Export PDF with or without annotations + +The React PDF Viewer allows exporting the current PDF along with annotations, or exporting a clean version without annotations. This gives flexibility depending on workflow review mode, sharing, or securing final documents. + +### Export PDF with annotations + +The PDF is exported with annotations and form fields by default. You can download a PDF using the download button in the built‑in toolbar or through the `download` API. See the [download guide](./download) for further explanation. + +### Export PDF without annotations + +The PDF can be exported without annotations by setting the `skipDownload` API to true in `annotationSettings`. + +{% highlight ts %} +{% raw %} + + + +{% endraw %} +{% endhighlight %} + +### Export after restoring annotations + +PDFs can also be exported after importing annotations. The following code example uses the `downloadStart` event to cancel the download action and import the annotations from a JSON file before downloading the PDF document. + +{% tabs %} +{% highlight ts tabtitle="App.tsx" %} +{% raw %} +import { + PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, + ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, + PageOrganizer, Inject, Print, DownloadStartEventArgs +} from '@syncfusion/ej2-react-pdfviewer'; +import { DataFormat, PdfDocument } from '@syncfusion/ej2-pdf'; +import { RefObject, useRef } from 'react'; + +export default function App() { + const viewerRef: RefObject = useRef(null); + + const blobToBase64 = async (blob: Blob): Promise => { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onerror = () => reject(reader.error); + reader.onload = () => { + const dataUrl: string = reader.result as string; + const data: string = dataUrl.split(',')[1]; + resolve(data); + }; + reader.readAsDataURL(blob); + }); + } + + const restoreAnnotations = async (data: string) => { + try { + const fetchResponse: Response = await fetch("/pdf-succinctly.json", { headers: { Accept: "application/json" } }); + if (fetchResponse.ok) { + let document: PdfDocument = new PdfDocument(data); + let jsonData = await fetchResponse.json(); + document.importAnnotations(btoa(JSON.stringify(jsonData)), DataFormat.json); + document.save(`${viewerRef.current.fileName}.pdf`); + document.destroy(); + } + else { + throw new Error(`HTTP ${fetchResponse.status}`); + } + } + catch (error) { + console.error(error); + } + } + + const handleImports = async () => { + const blob: Blob = await viewerRef.current.saveAsBlob(); + const data: string = await blobToBase64(blob); + await restoreAnnotations(data); + } + + const onDownloadStart = async (args: DownloadStartEventArgs) => { + args.cancel = true; + await handleImports(); + }; + + return ( +
      + + + +
      + ); +} +{% endraw %} +{% endhighlight %} +{% endtabs %} + --- **See also** - [Get Base64 value from a loaded PDF using saveAsBlob API](./how-to/get-base64) -- [Open PDF files overview](./open-pdf-files) \ No newline at end of file +- [Open PDF files overview](./open-pdf-files) +- [Download a PDF](./download) \ No newline at end of file From a9a64f7373c06d5b2dd4cb0970c60e0b80e990e2 Mon Sep 17 00:00:00 2001 From: Balaji Loganathan Date: Tue, 10 Mar 2026 11:46:42 +0530 Subject: [PATCH 5/6] 1014821: Revamped download react docs --- Document-Processing/PDF/PDF-Viewer/react/download.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/download.md b/Document-Processing/PDF/PDF-Viewer/react/download.md index e9807fe211..7fc5b6b904 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/download.md +++ b/Document-Processing/PDF/PDF-Viewer/react/download.md @@ -1,6 +1,6 @@ --- layout: post -title: Download in React Pdfviewer component | Syncfusion +title: Download edited PDF in React PDF Viewer | Syncfusion description: Learn here all about Download in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. control: PDF Viewer platform: document-processing @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Download in React PDF Viewer component +# Download edited PDF in React PDF Viewer The React PDF Viewer allows users to download the currently loaded PDF, including any annotations, form‑field edits, ink drawings, comments, or page reorganizations. Downloading produces a local PDF file containing all applied changes. This guide shows ways to download a PDF displayed in the PDF Viewer: using the built-in toolbar, and programmatically after editing. From 9f008c1c671bce4b0276237788038cd376c65fcf Mon Sep 17 00:00:00 2001 From: Balaji Loganathan Date: Tue, 10 Mar 2026 17:24:00 +0530 Subject: [PATCH 6/6] 1014821: Added API reference links --- .../PDF/PDF-Viewer/react/download.md | 8 ++++---- .../PDF-Viewer/react/forms/flatten-form-fields.md | 12 ++++++------ .../PDF/PDF-Viewer/react/forms/submit-form-data.md | 8 ++++---- .../PDF/PDF-Viewer/react/save-pdf-files.md | 14 +++++++------- 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/download.md b/Document-Processing/PDF/PDF-Viewer/react/download.md index 7fc5b6b904..40012f9f2d 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/download.md +++ b/Document-Processing/PDF/PDF-Viewer/react/download.md @@ -14,18 +14,18 @@ The React PDF Viewer allows users to download the currently loaded PDF, includin ## Download the PDF Using the Toolbar -The viewer's toolbar can include a download button when the `Toolbar` service is injected. When enabled, users can click the toolbar download icon to save the currently loaded PDF. +The viewer's toolbar can include a download button when the [`Toolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar) service is injected. When enabled, users can click the toolbar download icon to save the currently loaded PDF. **Notes:** -- Ensure `Toolbar` is included in the `Inject` services for `PdfViewerComponent` and `DownloadOption` is included in `toolbarItems`. +- Ensure [`Toolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar) is included in the `Inject` services for [`PdfViewerComponent`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer) and `DownloadOption` is included in [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettingsmodel#toolbaritems). - See the [toolbar items documentation](./toolbar-customization/primary-toolbar#3-show-or-hide-primary-toolbar-items) for customizing or hiding the default download icon. ![Download button in PDF Viewer](./images/download.png) ## Download an Edited PDF Programmatically -You can invoke the viewer's `download()` method to trigger a download programmatically. The examples below show a standalone setup and a server-backed setup to trigger download action. +You can invoke the viewer's [`download()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#download) method to trigger a download programmatically. The examples below show a standalone setup and a server-backed setup to trigger download action. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -106,7 +106,7 @@ root.render(); ## Download a PDF with Flattened Annotations -You can intercept the viewer's `downloadStart` event, cancel the default download, obtain the document as a `Blob` via `saveAsBlob()`, and flatten annotations before saving the resulting PDF. +You can intercept the viewer's [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) event, cancel the default download, obtain the document as a `Blob` via [`saveAsBlob()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#saveasblob), and flatten annotations before saving the resulting PDF. {% tabs %} {% highlight ts tabtitle="App.tsx" %} diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/flatten-form-fields.md b/Document-Processing/PDF/PDF-Viewer/react/forms/flatten-form-fields.md index 5dd2386e28..1eec8f4ee2 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/flatten-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/flatten-form-fields.md @@ -21,11 +21,11 @@ Flattening PDF forms converts interactive fields such as textboxes, dropdowns, c ## Flatten forms before downloading PDF -1. Add a ref to the `PdfViewerComponent` so you can access viewer APIs from event handlers. -2. Intercept the download flow using `downloadStart` and cancel the default flow. -3. Retrieve the viewer's blob via `saveAsBlob()` and convert the blob to base64. +1. Add a ref to the [`PdfViewerComponent`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer) so you can access viewer APIs from event handlers. +2. Intercept the download flow using [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) and cancel the default flow. +3. Retrieve the viewer's blob via [`saveAsBlob()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#saveasblob) and convert the blob to base64. 4. Use `PdfDocument` from Syncfusion PDF Library to open the document, set `field.flatten = true` for each form field, then save. -5. For the flattening the form fields when downloading through *Save As* option in Page Organizer, repeat steps 2–4 by using `pageOrganizerSaveAs` event. +5. For the flattening the form fields when downloading through *Save As* option in Page Organizer, repeat steps 2–4 by using [`pageOrganizerSaveAs`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pageorganizersaveas) event. ## Complete example @@ -111,8 +111,8 @@ export default function App() { ## Troubleshooting -- If viewerRef is null, ensure `ref={viewerRef}` is present and the component has mounted before invoking `saveAsBlob()`. -- Missing `resourceUrl`: If viewer resources are not reachable, set `resourceUrl` to the correct CDN or local path for the ej2-pdfviewer-lib. +- If viewerRef is null, ensure `ref={viewerRef}` is present and the component has mounted before invoking [`saveAsBlob()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#saveasblob). +- Missing [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl): If viewer resources are not reachable, set [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) to the correct CDN or local path for the ej2-pdfviewer-lib. ## Related topics diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/submit-form-data.md b/Document-Processing/PDF/PDF-Viewer/react/forms/submit-form-data.md index 889e9a90a0..baa396cc70 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/submit-form-data.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/submit-form-data.md @@ -25,11 +25,11 @@ The React PDF Viewer allows submitting filled form data like text fields, checkb 1. Enable form designer in the viewer - - Inject `FormFields` and `FormDesigner` services into the viewer so form APIs are available. + - Inject `FormFields` and [`FormDesigner`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner) services into the viewer so form APIs are available. 2. Export form data from the viewer - - Use `viewer.exportFormFieldsAsObject()` to obtain the filled values as JSON. + - Use [`viewer.exportFormFieldsAsObject()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#exportformfieldsasobject) to obtain the filled values as JSON. 3. POST the exported JSON to your back end @@ -103,10 +103,10 @@ export default function SubmitFormExample() { ## Troubleshooting -- **No form values returned**: Ensure the PDF has interactive fields and the viewer has finished loading before calling `exportFormFieldsAsObject()`. +- **No form values returned**: Ensure the PDF has interactive fields and the viewer has finished loading before calling [`exportFormFieldsAsObject()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#exportformfieldsasobject). - **CORS errors**: Enable CORS on the server or serve both frontend and back end from the same origin during testing. - **Server rejects payload**: Confirm the server expects `application/json` and validates shape of the object. -- **WASM or resource errors**: Ensure `resourceUrl` points to the correct Syncfusion PDF Viewer library files. +- **WASM or resource errors**: Ensure [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) points to the correct Syncfusion PDF Viewer library files. ## Use cases diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md index 8963d9ec2c..83c198ecd6 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md +++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md @@ -253,17 +253,17 @@ Each link below goes to a provider page with simple, step-by-step instructions a - [Box](./save-pdf-file/to-box-cloud-file-storage) - [Azure AD (auth notes)](./save-pdf-file/to-azure-active-directory) -## Export PDF with or without annotations +## Save PDF with or without annotations The React PDF Viewer allows exporting the current PDF along with annotations, or exporting a clean version without annotations. This gives flexibility depending on workflow review mode, sharing, or securing final documents. -### Export PDF with annotations +### Save PDF with annotations -The PDF is exported with annotations and form fields by default. You can download a PDF using the download button in the built‑in toolbar or through the `download` API. See the [download guide](./download) for further explanation. +The PDF is exported with annotations and form fields by default. You can download a PDF using the download button in the built‑in toolbar or through the [`download`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#download) API. See the [download guide](./download) for further explanation. -### Export PDF without annotations +### Save PDF without annotations -The PDF can be exported without annotations by setting the `skipDownload` API to true in `annotationSettings`. +The PDF can be exported without annotations by setting the [`skipDownload`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationsettingsmodel#skipdownload) API to true in [`annotationSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationsettings). {% highlight ts %} {% raw %} @@ -281,9 +281,9 @@ The PDF can be exported without annotations by setting the `skipDownload` API to {% endraw %} {% endhighlight %} -### Export after restoring annotations +### Save after restoring annotations -PDFs can also be exported after importing annotations. The following code example uses the `downloadStart` event to cancel the download action and import the annotations from a JSON file before downloading the PDF document. +PDFs can also be exported after importing annotations. The following code example uses the [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) event to cancel the download action and import the annotations from a JSON file before downloading the PDF document. {% tabs %} {% highlight ts tabtitle="App.tsx" %}