1014821: Revamped download docs files in react

Author: BalajiLoganathanSF4826

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(<App />);
 {% 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<PdfViewerComponent> = useRef(null);
+
+    const blobToBase64 = async (blob: Blob): Promise<string> => {
+        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 (
+        <div style={{ height: '640px' }}>
+            <PdfViewerComponent
+                id="pdf-viewer"
+                ref={viewerRef}
+                documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
+                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.5/dist/ej2-pdfviewer-lib"
+                downloadStart={onDownloadStart}
+            >
+                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+                    BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Print]} />
+            </PdfViewerComponent>
+        </div>
+    );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
 ## See also
 
-* [Toolbar items](./toolbar)
-* [Feature Modules](./feature-module)
+- [Toolbar items](./toolbar)
+- [Feature Modules](./feature-module)

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 %}
+<PdfViewerComponent
+    id="pdfViewer"
+    documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
+    resourceUrl="https://cdn.syncfusion.com/ej2/32.2.5/dist/ej2-pdfviewer-lib"
+    annotationSettings={{
+        skipDownload: true
+    }}
+>
+    <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+        BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Print]} />
+</PdfViewerComponent>
+{% 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<PdfViewerComponent> = useRef(null);
+
+    const blobToBase64 = async (blob: Blob): Promise<string> => {
+        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 (
+        <div style={{ height: '640px' }}>
+            <PdfViewerComponent
+                id="pdf-viewer"
+                ref={viewerRef}
+                documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
+                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.5/dist/ej2-pdfviewer-lib"
+                downloadStart={onDownloadStart}
+            >
+                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+                    BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Print]} />
+            </PdfViewerComponent>
+        </div>
+    );
+}
+{% 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)
+- [Open PDF files overview](./open-pdf-files)
+- [Download a PDF](./download)