[Feature]: Serialization / Deserialization of Annotations with Viewer Update

[BeingAStudentIsPainful]

Is the feature relevant to the Firefox PDF Viewer?

No

Feature description

I’m working on adding a feature to PDF.js that allows serialization and deserialization of PDF annotations for persistent storage across sessions. My goal is to allow users to save annotations as JSON and re-import them, displaying them immediately in the PDF viewer. While I was able to serialize and deserialize annotations using AnnotationStorage, I have been unable to get the deserialized annotations to render in the viewer.

Approach and Issues:

• Serialization: I added a serialize method in AnnotationStorage, which correctly converts annotations to JSON format. This serialized data can be stored externally (e.g., in localStorage) and works as expected.
• Deserialization: I created a deserialize method that parses the JSON data and populates AnnotationStorage. When I log the contents of AnnotationStorage after deserialization, the data appears to load correctly. However, the annotations are not displayed in the viewer.

Attempts to Trigger Display:

To try and display the deserialized annotations, I added "Serialize Annotations" and "Deserialize Annotations" buttons in viewer.html, and wired up functions in viewer.js to call serializeand deserializeon AnnotationStorage. After deserialization, I tried triggering renderon the annotation and editor layers, but these attempts didn’t display the annotations either. In short, despite the data being present in AnnotationStorage, nothing displays in the viewer.

Current Workarounds

Currently, there is no feasible workaround. Reloading the PDF document does not make the deserialized annotations appear, and calling render functions on the annotation layers has no effect on displaying the annotations after deserialization.

P.S. I’m fairly new to the PDF.js project and have limited experience with its internals. I’ve tried various methods to get the deserialized annotations to display but haven’t been successful. Any guidance or support would be greatly appreciated. Thank you for considering this feature, and I’d be happy to provide additional details if needed.

Source.zip

Other PDF viewers

While similar functionality can be achieved in other PDF viewers, it often requires custom implementation. For example:

• PSPDFKit: Allows serialization and deserialization of annotations but requires custom code to handle importing and displaying saved annotations. In a previous implementation with PSPDFKit in React, I used exportInstantJSON and applyInstantJson methods to achieve this functionality by creating a custom UI for saving and loading annotations.

I've attached the source code below

PDFViewer.txt