Showing selected XFDF on viewer

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.x.x.

Detailed description of issue
{We would like to show selected XFDF on viewer and download them with PDF}

Expected behaviour
{We provide many XFDFs in one PDF file. Sometimes user would like to select one or several speicfic XFDFs and check them on PDF viewer and then download XFDFs(annotations) with a PDF file. Once we load a pdf, we cannot load new or revised XFDF data from a server.}

Does your issue happen with every document, or just one?
{Not happend yet}

Link to document
{Importing and exporting annotations | Documentation
Remove annotations to a PDF using JavaScript | PDF.js Express}

Code snippet

{
const [annotContents, setAnnotContents] = useState([]) 
// saving xfdf data from a server

// function to reload newer xfdf from a server
const handleChangeAnnotation = async (checkedIds) => {
  
    try {
      const { data } = await changeAnnotation(project_id, selectedFile.key, checkedIds)
      if (data.result === -1) {
        throw Error(data.message)
      }
      setAnnotContents(data)
    } catch (error) {
      return message.error(error.message)
    }
  }

useEffect(() => {

    WebViewer(
      {
        path: '../../../webviewer/lib',
        initialDoc: url,
        licenseKey: 'jVaiU6YstW4vIskbboU5',
      },
      viewer.current
    ).then(async (instance) => {
      setInstance(instance)

      const { annotationManager, documentViewer } = instance.Core

      

 

      documentViewer.addEventListener('documentLoaded', () => {
        handleGetAnnotXfdfList().then(async (xfdfString) => {
          xfdfString.map(async ({ content }) => {
            await annotationManager.importAnnotations(content)
          })
        })
      })

      await annotationManager.addEventListener('annotationChanged', async (annotations, action, { imported }) => {
        if (imported) return

        if (annotContents.length) return

        if (action === 'add') {
          await annotations.map(async (annotation) => {
            const data = await annotationManager.exportAnnotations({
              annotList: [annotation],
            })
            dispatch(addAnnotation(`"${data}"`))
          })
        }

        if (action === 'delete') {
          dispatch(clearAnnotation())
          const annots = await annotationManager.getAnnotationsList()

          await annots.map(async (annotation) => {
            const data = await annotationManager.exportAnnotations({
              annotList: [annotation],
            })
            dispatch(addAnnotation(`"${data}"`))
          })
        }
      })

      instance.loadDocument(url)
    })

    handleGetAnnotationsList()

    return () => {
      dispatch(clearAnnotation())
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

// Running everytime when import xfdfs from a server
useEffect(() => {
    if (instance && annotContents) {
      const { annotationManager } = instance.Core

      const deleteAnnotations = async (annots) => {
        await annotationManager.deleteAnnotations(annots)
      }

      const load = async () => {
        const annots = await annotationManager.getAnnotationsList() // removing existed xfdfs
        await deleteAnnotations(annots)
	

// importing new xfdfs from a server
        annotContents.map(async ({ content }) => {
          await annotationManager.importAnnotations(content)
        })
      }

      load()
    }
  }, [instance, annotContents])
}

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:

Hi there,

Your ticket does not contain a question so I am unsure what you are asking or what I can do to help.

Can you please elaborate and explain what you need help with?

Thanks,
Logan

Hi Logan,

Let me explain with an example.

In a pdf file, there are ten annotations which has been treated individual XFDFs. If a user would like to see only four annotations, the user choose four annotations and call a server to render the selected annotations.

We noticed a server sent those four annotations in PDF viewer, however those are not rendered properly. Sometimes it shows two or three annotations. It seems there is an issue importing annotations.

Hope you understand my explanations. Please review our code and let us know which part has an error.

Thank you,
Heejung