Flatten Annotations in React Native
PSPDFKit for React Native allows you to create a new document with processed (embedded, flattened, removed, or printed) annotations using the PSPDFKit.processAnnotations(annotationChange, annotationType, sourceDocumentPath, processedDocumentPath)
function.
Parameters
This guide shows how to use the processAnnotations()
function and its parameters.
Annotation Change
The annotation change parameter is a string that specifies how PSPDFKit should include annotations in the resulting document.
flatten |
The annotation will be flattened. Its visual representation will be kept intact, but it can no longer be modified. The annotation object is removed from the document. |
remove |
The annotation will be removed. |
embed |
The annotation will be embedded into the resulting document, allowing it to still be modified. |
print |
Processes the document for printing. Flattens annotations that can be printed and removes the remaining ones. |
Annotation Type
The annotation type parameter is a string that specifies which annotation types PSPDFKit should process. See the list of all supported annotation types. To process all annotations (including forms), you need to set the value for the annotation type parameter to all
or null
.
Source Document Path
The source document path parameter is a string that specifies the path of the original document that PSPDFKit will process.
Make sure you save all annotations before processing the document. For more details, refer to our guide showing how to manually save annotations in a document.
Processed Document Path
The processed document path parameter is a string that specifies the path where the resultant processed file will be stored.
The processed document path should be in a writable location (e.g. the document directory). You can use a third-party dependency like react-native-fs
to ensure that the processed document is stored in a writable location:
const RNFS = require('react-native-fs'); const processedDocumentPath = RNFS.DocumentDirectoryPath + '/flattened.pdf';
Usage
A typical call of the processAnnotations
function would look like this:
const sourceDocumentPath = ... const RNFS = require("react-native-fs"); const processedDocumentPath = RNFS.DocumentDirectoryPath + '/embedded.pdf'; PSPDFKit.processAnnotations('embed', 'ink', sourceDocumentPath, processedDocumentPath);
The example below shows how to implement a button that flattens all the annotations of the source document from the currently displayed PSPDFKitView
in a newly processed PDF file:
const sourceDocumentPath = ... // The path of the document that's currently displayed in the `PSPDFKitView`. const RNFS = require("react-native-fs"); ... <Button onPress={async () => { const processedDocumentPath = RNFS.DocumentDirectoryPath + '/flattened.pdf'; // Delete the processed document if it already exists. RNFS.exists(processedDocumentPath) .then((exists) => { if (exists) { RNFS.unlink(processedDocumentPath); } }) .then(() => { // First, save all annotations in the current document. this.pdfRef?.current?.getDocument().save().then((success) => { if (success) { // Then, flatten all the annotations. PSPDFKit.processAnnotations( 'flatten', 'all', sourceDocumentPath, processedDocumentPath, ) .then((success) => { if (success) { // And finally, present the newly processed document with flattened annotations. PSPDFKit.present(processedDocumentPath, {}); } else { alert('Failed to embed annotations.'); } }) .catch((error) => { alert(JSON.stringify(error)); }); } else { alert('Failed to save current document.'); } }); }); }} title="Flatten All Annotations" />