|
1 | 1 | --- |
2 | 2 | layout: post |
3 | | -title: Download in React Pdfviewer component | Syncfusion |
| 3 | +title: Download edited PDF in React PDF Viewer | Syncfusion |
4 | 4 | description: Learn here all about Download in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. |
5 | 5 | control: PDF Viewer |
6 | 6 | platform: document-processing |
7 | 7 | documentation: ug |
8 | 8 | domainurl: ##DomainURL## |
9 | 9 | --- |
10 | | -# Download in React PDF Viewer component |
11 | 10 |
|
12 | | -The PDF Viewer component supports downloading the loaded PDF file. Enable or disable the download using the example below. |
| 11 | +# Download edited PDF in React PDF Viewer |
| 12 | + |
| 13 | +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. |
| 14 | + |
| 15 | +## Download the PDF Using the Toolbar |
| 16 | + |
| 17 | +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. |
| 18 | + |
| 19 | +**Notes:** |
| 20 | + |
| 21 | +- 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). |
| 22 | +- See the [toolbar items documentation](./toolbar-customization/primary-toolbar#3-show-or-hide-primary-toolbar-items) for customizing or hiding the default download icon. |
13 | 23 |
|
14 | 24 |  |
15 | 25 |
|
16 | | -Invoke the download action using the following example. |
| 26 | +## Download an Edited PDF Programmatically |
17 | 27 |
|
18 | | -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. |
| 28 | +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. |
19 | 29 |
|
20 | 30 | {% tabs %} |
21 | 31 | {% highlight js tabtitle="Standalone" %} |
@@ -94,7 +104,75 @@ root.render(<App />); |
94 | 104 | {% endhighlight %} |
95 | 105 | {% endtabs %} |
96 | 106 |
|
| 107 | +## Download a PDF with Flattened Annotations |
| 108 | + |
| 109 | +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. |
| 110 | + |
| 111 | +{% tabs %} |
| 112 | +{% highlight ts tabtitle="App.tsx" %} |
| 113 | +{% raw %} |
| 114 | +import { |
| 115 | + PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, |
| 116 | + ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, |
| 117 | + PageOrganizer, Inject, Print, DownloadStartEventArgs |
| 118 | +} from '@syncfusion/ej2-react-pdfviewer'; |
| 119 | +import { PdfDocument } from '@syncfusion/ej2-pdf'; |
| 120 | +import { RefObject, useRef } from 'react'; |
| 121 | + |
| 122 | +export default function App() { |
| 123 | + const viewerRef: RefObject<PdfViewerComponent> = useRef(null); |
| 124 | + |
| 125 | + const blobToBase64 = async (blob: Blob): Promise<string> => { |
| 126 | + return new Promise((resolve, reject) => { |
| 127 | + const reader = new FileReader(); |
| 128 | + reader.onerror = () => reject(reader.error); |
| 129 | + reader.onload = () => { |
| 130 | + const dataUrl: string = reader.result as string; |
| 131 | + const data: string = dataUrl.split(',')[1]; |
| 132 | + resolve(data); |
| 133 | + }; |
| 134 | + reader.readAsDataURL(blob); |
| 135 | + }); |
| 136 | + } |
| 137 | + |
| 138 | + const flattenPDF = (data: string) => { |
| 139 | + let document: PdfDocument = new PdfDocument(data); |
| 140 | + document.flatten = true |
| 141 | + document.save(`${viewerRef.current.fileName}.pdf`); |
| 142 | + document.destroy(); |
| 143 | + } |
| 144 | + |
| 145 | + const handleFlattening = async () => { |
| 146 | + const blob: Blob = await viewerRef.current.saveAsBlob(); |
| 147 | + const data: string = await blobToBase64(blob); |
| 148 | + flattenPDF(data); |
| 149 | + } |
| 150 | + |
| 151 | + const onDownloadStart = async (args: DownloadStartEventArgs) => { |
| 152 | + args.cancel = true; |
| 153 | + handleFlattening(); |
| 154 | + }; |
| 155 | + |
| 156 | + return ( |
| 157 | + <div style={{ height: '640px' }}> |
| 158 | + <PdfViewerComponent |
| 159 | + id="pdf-viewer" |
| 160 | + ref={viewerRef} |
| 161 | + documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf" |
| 162 | + resourceUrl="https://cdn.syncfusion.com/ej2/32.2.5/dist/ej2-pdfviewer-lib" |
| 163 | + downloadStart={onDownloadStart} |
| 164 | + > |
| 165 | + <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, |
| 166 | + BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Print]} /> |
| 167 | + </PdfViewerComponent> |
| 168 | + </div> |
| 169 | + ); |
| 170 | +} |
| 171 | +{% endraw %} |
| 172 | +{% endhighlight %} |
| 173 | +{% endtabs %} |
| 174 | + |
97 | 175 | ## See also |
98 | 176 |
|
99 | | -* [Toolbar items](./toolbar) |
100 | | -* [Feature Modules](./feature-module) |
| 177 | +- [Toolbar items](./toolbar) |
| 178 | +- [Feature Modules](./feature-module) |
0 commit comments