|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Flatten PDF form fields in React PDF Viewer | Syncfusion |
| 4 | +description: Learn hoow to flatten interactive PDF form fields before download or save-as in EJ2 React PDF Viewer. |
| 5 | +platform: document-processing |
| 6 | +control: PDF Viewer |
| 7 | +documentation: ug |
| 8 | +domainurl: ##DomainURL## |
| 9 | +--- |
| 10 | + |
| 11 | +# Flatten PDF form fields in React |
| 12 | + |
| 13 | +## Overview |
| 14 | + |
| 15 | +Flattening PDF forms converts interactive fields such as textboxes, dropdowns, checkboxes, signatures, etc., into non‑editable page content. Use this when you want to protect filled data, finalize a document, or prepare it for secure sharing. |
| 16 | + |
| 17 | +## Prerequisites |
| 18 | + |
| 19 | +- EJ2 React PDF Viewer installed and configured |
| 20 | +- Basic viewer setup completed with toolbar and page organizer services injected. For more information, see [getting started guide](../getting-started) |
| 21 | + |
| 22 | +## Flatten forms before downloading PDF |
| 23 | + |
| 24 | +1. Add a ref to the `PdfViewerComponent` so you can access viewer APIs from event handlers. |
| 25 | +2. Intercept the download flow using `downloadStart` and cancel the default flow. |
| 26 | +3. Retrieve the viewer's blob via `saveAsBlob()` and convert the blob to base64. |
| 27 | +4. Use `PdfDocument` from Syncfusion PDF Library to open the document, set `field.flatten = true` for each form field, then save. |
| 28 | +5. For the flattening the form fields when downloading through *Save As* option in Page Organizer, repeat steps 2–4 by using `pageOrganizerSaveAs` event. |
| 29 | + |
| 30 | +## Complete example |
| 31 | + |
| 32 | +{% tabs %} |
| 33 | +{% highlight ts tabtitle="App.tsx" %} |
| 34 | +{% raw %} |
| 35 | +import { |
| 36 | + PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, |
| 37 | + ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, |
| 38 | + PageOrganizer, Inject, Print, PageOrganizerSaveAsEventArgs, DownloadStartEventArgs |
| 39 | +} from '@syncfusion/ej2-react-pdfviewer'; |
| 40 | +import { PdfDocument, PdfField } from '@syncfusion/ej2-pdf'; |
| 41 | +import { RefObject, useRef } from 'react'; |
| 42 | + |
| 43 | +export default function App() { |
| 44 | + const viewerRef: RefObject<PdfViewerComponent> = useRef(null); |
| 45 | + |
| 46 | + const blobToBase64 = async (blob: Blob): Promise<string> => { |
| 47 | + return new Promise((resolve, reject) => { |
| 48 | + const reader = new FileReader(); |
| 49 | + reader.onerror = () => reject(reader.error); |
| 50 | + reader.onload = () => { |
| 51 | + const dataUrl: string = reader.result as string; |
| 52 | + const data: string = dataUrl.split(',')[1]; |
| 53 | + resolve(data); |
| 54 | + }; |
| 55 | + reader.readAsDataURL(blob); |
| 56 | + }); |
| 57 | + } |
| 58 | + |
| 59 | + const flattenFormFields = (data: string) => { |
| 60 | + let document: PdfDocument = new PdfDocument(data); |
| 61 | + for (let index = 0; index < document.form.count; index++) { |
| 62 | + let field: PdfField = document.form.fieldAt(index); |
| 63 | + field.flatten = true; |
| 64 | + } |
| 65 | + // If both annotations and form fields needs to be flattened, use |
| 66 | + // document.flatten = true |
| 67 | + document.save(`${viewerRef.current.fileName}.pdf`); |
| 68 | + document.destroy(); |
| 69 | + } |
| 70 | + |
| 71 | + const handleFlattening = async () => { |
| 72 | + const blob: Blob = await viewerRef.current.saveAsBlob(); |
| 73 | + const data: string = await blobToBase64(blob); |
| 74 | + flattenFormFields(data); |
| 75 | + } |
| 76 | + |
| 77 | + const onDownloadStart = async (args: DownloadStartEventArgs) => { |
| 78 | + args.cancel = true; |
| 79 | + handleFlattening(); |
| 80 | + }; |
| 81 | + |
| 82 | + const onPageOrganizerSaveAs = async (args: PageOrganizerSaveAsEventArgs) => { |
| 83 | + args.cancel = true; |
| 84 | + handleFlattening() |
| 85 | + }; |
| 86 | + |
| 87 | + return ( |
| 88 | + <div style={{ height: '640px' }}> |
| 89 | + <PdfViewerComponent |
| 90 | + id="pdf-viewer" |
| 91 | + ref={viewerRef} |
| 92 | + documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf" |
| 93 | + resourceUrl="https://cdn.syncfusion.com/ej2/32.2.5/dist/ej2-pdfviewer-lib" |
| 94 | + pageOrganizerSaveAs={onPageOrganizerSaveAs} |
| 95 | + downloadStart={onDownloadStart} |
| 96 | + > |
| 97 | + <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, |
| 98 | + BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Print]} /> |
| 99 | + </PdfViewerComponent> |
| 100 | + </div> |
| 101 | + ); |
| 102 | +} |
| 103 | +{% endraw %} |
| 104 | +{% endhighlight %} |
| 105 | +{% endtabs %} |
| 106 | + |
| 107 | +## Expected result |
| 108 | + |
| 109 | +- The downloaded or "Save As" PDF will contain the visible appearance of filled form fields as static, non-editable content. |
| 110 | +- Form fields will no longer be interactive or editable in common PDF readers. |
| 111 | + |
| 112 | +## Troubleshooting |
| 113 | + |
| 114 | +- If viewerRef is null, ensure `ref={viewerRef}` is present and the component has mounted before invoking `saveAsBlob()`. |
| 115 | +- Missing `resourceUrl`: If viewer resources are not reachable, set `resourceUrl` to the correct CDN or local path for the ej2-pdfviewer-lib. |
| 116 | + |
| 117 | +## Related topics |
| 118 | + |
| 119 | +- [`downloadStart` event reference](../events#downloadstart) |
| 120 | +- [`pageOrganizerSaveAs` event reference](../events#pageorganizersaveas) |
| 121 | +- [Form Designer in React PDF Viewer](./form-designer) |
0 commit comments