Import Annotation not working

Technical Support
1

Which product are you using?
Am using PDF.js Express Plus

Detailed description of issue
Am working on pdf xxpress js plus for annotations, am abl to export annotations(underline and comment), by using “instance.Core.annotationManager.exportAnnotations”, it is successfully exporting into xfdf format and am locally storing it. when am importing by using instance.Core.annotationManager.importAnnotations(xfdfString); back the annotation it is loading a fresh file not the annotated part ie my annotation text is not coming

Expected behaviour
once annotation is done and exported am saving to local storage, and when i try to import the annotated paragraph ie retriving the locally stored xfdf format, am not finding any annotations, document is loading freshly
Does your issue happen with every document, or just one?
Yes Every Document

Link to document
{Provide a link to the document in question if possible}

Code snippet

useEffect(() => {
        WebViewer(
            {
                path: '/webviewer/lib',
                          },
            viewer.current,
        ).then(async instance => {
           
            var myAnnotations = localStorage.getItem("Annotations");
                        const {Core} = instance;
                     instance.UI.loadDocument('https://www.corenet.gov.sg/media/2268607/dc19-07.pdf');
            Core.documentViewer.addEventListener('documentLoaded', async () => {
                               const xfdfString = await myAnnotations
                               instance.Core.annotationManager.importAnnotations(xfdfString);
               
            });
             //For Pop Up
            instance.UI.contextMenuPopup.add({
                type: 'actionButton',
                label: 'Export',
                onClick: async () => await saveToDatabase(xfdfString, instance),
            });
        });

    }, []);
    
    function saveToDatabase(x, y) {
        //Saving Annotations to Local Storage as on now
        //Here x is the xfdfString(Annotated string)
        //Here y is the instance
        localStorage.setItem("Annotations", x);
    }
3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

Hi there,

There is a bunch of errors in your code:

  1. When you are calling saveToDatabase, xfdfString is not defined which means you are saving undefined into local storage. This is what’s causing your issue.

  2. You are calling await myAnnotations but myAnnotations is not a promise

  3. saveToDatabase is not asynchronous but you are still awaiting it in your onClick handler

I have rewritten your code here to clean it up and get it working:

  const { Core } = instance;

  instance.UI.loadDocument('https://www.corenet.gov.sg/media/2268607/dc19-07.pdf');

  Core.documentViewer.addEventListener('documentLoaded', async () => {
    const xfdfString = localStorage.getItem("Annotations");
    instance.Core.annotationManager.importAnnotations(xfdfString);
  });

  // For Pop Up
  instance.UI.contextMenuPopup.add({
    type: 'actionButton',
    label: 'Export',
    onClick: async () => {
      const xfdfString = await instance.Core.annotationManager.exportAnnotations();
      saveToDatabase(xfdfString)
    }
  });

  function saveToDatabase(x) {
    localStorage.setItem("Annotations", x);
  }

Thanks,
Logan