Annotations can be serialized into an XFDF string, which can then be stored in a database, file, or anywhere else you can store strings. Then, that string can be reimported into the viewer at a future date.
Exporting annotations
Annotations can be exported with the annotationManager.exportAnnotations API. This API returns a promise which resolves to a string which can then be stored in a database or any other data storage system.
const xfdfString = await instance.Core.annotationManager.exportAnnotations();
// Save to your database
await saveToDatabase(xfdfString)
This XFDF string can then be imported in the future.
Importing annotations
Importing annotations means taking an XFDF string (usually retrieved from the exportAnnotations API shown above), and loading those annotations into the viewer.
This can be done with the annotationManager.importAnnotations API.
// Get the annotations from your database
const xfdfString = await loadAnnotationsFromDatabase()
await instance.Core.annotationManager.importAnnotations(xfdfString);
Example
Below is an example of a common workflow involving saving and loading annotations:
import WebViewer from '@pdftron/pdfjs-express'
const saveButton = document.getElementById('custom-save-button')
WebViewer({...options}).then(instance => {
// Some ID for the document. In this case we load document '123'
const docId = '123';
// Load "123.pdf"
instance.UI.loadDocument(`/files/${docId}.pdf`);
// After the document is loaded, we load the annotations from the database
// and then import them into the viewer
instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
const xfdfString = await loadXFDF(docId)
await instance.Core.annotationManager.importAnnotations(xfdfString);
});
// When our "save" button is clicked, we export
// the annotations and save them to our database
saveButton.onclick = () => {
const xfdfString = await instance.Core.annotationManager.exportAnnotations();
await saveToDatabase(docId, xfdfString)
}
})
