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])
}
