1014821: Revamped print & download docs in react documentation

Document-Processing-toc.html

@@ -1136,7 +1136,14 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/events">Events</a></li>
 								</ul>
 							</li>
-							<li><a href="/document-processing/pdf/pdf-viewer/react/print">Print</a></li>
+							<li><a href="/document-processing/pdf/pdf-viewer/react/print/overview">Print</a>
+								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/print/print-modes">Print Modes</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/print/print-quality">Print Quality</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/print/enable-print-rotation">Print rotation</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/print/events">Events</a></li>
+								</ul>
+							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/download">Download</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/events">Events</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/text-selection">Text Selection</a></li>

Document-Processing/PDF/PDF-Viewer/react/download.md

@@ -1,21 +1,31 @@
 ---
 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
 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.
+# 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.
+
+## Download the PDF Using the Toolbar
+
+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`](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)
 
-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()`](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" %}
@@ -94,7 +104,75 @@ root.render(<App />);
 {% endhighlight %}
 {% endtabs %}
 
+## Download a PDF with Flattened Annotations
+
+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" %}
+{% 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/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
 

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