Importing XFDF has failed

Technical Support
1

PDF.js Express Version: 8.x.x

We exported annotations as XFDFs, but could not import XFDFs. We tried to pass xfdfString value to annotationManager.importAnnotCommand(xfdfString) function. The result is empty array. We would like to know how we could import XFDFs.

Here is what we referenced.

The below code is about exporting XFDFs.

<?xml version="1.0" encoding="UTF-8" ?>

Here is importing code:

useEffect(() => {
    WebViewer(
      {
        path: '../../../webviewer/lib',
        initialDoc: 'https://s3.ap-northeast-2.amazonaws.com/crossxxx/xxx/drive/wGmxxxx.pdf',
      },
      viewer.current
    ).then((instance) => {
      const { annotationManager, documentViewer } = instance.Core

      // load the annotation data as a transaction command
      fetch('https://apixxx.crossxxxx.cxxxx/pdf-web/715', {
        method: 'GET',
      }).then((response) => {
        if (response.status === 200) {
          response.text().then(async (xfdfString) => {
            console.log('xfdfString', xfdfString)
            // <xfdf>
            // <add>
            // <text subject="Comment" page="0" color="#FFE6A2" ... />
            // </add>
            // <modify />
            // <delete />
            // </xfdf>
            const annotations = await annotationManager.importAnnotCommand(xfdfString) // empty array is returned
            console.log('annotations', annotations)

            annotations.forEach((annotation) => {
              annotationManager.redrawAnnotation(annotation)
            })
          })
        }
      })
    })
},[])

Please let us know what to do.

Thanks in advance,
Heejung

2

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:

3

Hi there,

importAnnotCommand is the wrong function to use to import annotations, instead, use importAnnotations.

Thanks!
Logan

4

Hi Logan,

We changed the code as you suggested, but it didn’t work, still empty array returned.

const annotations = await annotManager.importAnnotations(xfdfString)

Could you provide us an example regarding exporting and importing? It would be helpful to us.

Best,
Hee Jung

5

Hi,

Sorry I made a mistake, importAnnotCommand is the correct function based off of the sample XFDF code in your code snippet.

Can you send me the entire xfdfString?

Also, we recommend not using annotation commands and instead just using normal XFDF.

To export:

const xfdfString = await instance.Core.annotationManager.exportAnnotations();

To import:

instance.Core.annotationManager.importAnnotations(xfdfString)

Thanks,
Logan

6

It works. Thank you!

1 Like