WebViewer Version:
Do you have an issue with a specific file(s)? HTML files
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? Yes
Is your issue related to annotations? Yes
Please give a brief summary of your issue:
I am trying to use documentXFDFRetriever in the webviewer constructor. The idea is to load the annotations into the document. However, the documentXFDFRetriever never gets called.
Just fyi, its working for the core webviewer instance when I am loading pdf files, but not working when i am loading html files.
Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
Please provide a link to a minimal sample where the issue is reproducible:
WebViewer(
{
path: ‘/webviewer/lib’,
disableVirtualDisplayMode: true,
showLocalFilePicker: true,
fullAPI: true,
licenseKey: ‘demo:1684362422816:7dab2e0b03000000003eabcbfc835f0df3e6464776d7ffb12bd62c27c7’,
documentXFDFRetriever: async () => {
alert(“starting load”);
const rows = await loadxfdfStrings(ucdid);
return JSON.parse(rows).map(row => row.xfdfString);
}
},
Hello rpswadhwa,
In order to import XFDF annotations to WebViewer-HTML, you can use this API importAnnotations, document here. Please make sure to call this inside the proxyLoaded event, document here.
documentViewer.addEventListener("proxyLoaded", () => {
// Set a timeout here to delay the import so that the text layer has time to be properly scanned
setTimeout(() => {
annotationManager.importAnnotations(xfdStringFormat);
}, 5000);
});
Let me know how it works!
Regards,
Maggie V.
Thanks Maggie,
The proxyload is kicking off the right series of steps, but I am still not able to view the annotations and I am getting an error. Here are the 2 steps I am following:
Step 1:
At proxyload, I am starting the importannptations step through the following command:
const loadannot = annotationManager.importAnnotationCommand(XFDFString(ucdid));
console.log(loadannot)
Step 2:
importAnnotationCommand(XFDFString(ucdid)) is calling a function that is providing xfdfstring of the annotations from my database.
const loadxfdfStrings = async (ucdid) => {
//alert(“calling load”)
const res = await fetch(http://localhost:8080/api/annotationsorig?ucdid=${ucdid}, {
method: ‘GET’
});
if (res.status === 200) {
const xfdfStrings = await res.text();
return JSON.parse(xfdfStrings).map(row => row.xfdfString);
}
};
const XFDFString = async (ucdid) => {
//alert(“calling last xfdf”)
const rows = await loadxfdfStrings(ucdid);
//y
console.log(rows);
return rows;
However, I am getting an error : Uncaught (in promise) TypeError: ba.querySelector is not a function
on the line const loadannot = annotationManager.importAnnotationCommand(XFDFString(ucdid)); AND the annotations are not getting loaded.
Thanks
Hello rpswadhwa,
Your function XFDFString returns a promise, you’ll need await/async in importAnnotationCommand. Also importAnnotationCommand returns a promise of an array of annotations, this needs an await and you’ll need to redrawAnnotation after importing, documentation here.
Step 1 should look like this:
documentViewer.addEventListener('proxyLoaded', () => {
setTimeout(async () => {
console.log('start importing');
const annots = await annotationManager.importAnnotationCommand(await XFDFString(ucdid));
annots.forEach(annot => annotationManager.redrawAnnotation(annot));
}, 5000);
});
Hope this helps!
Regards,
Maggie V.
Thanks for the response Maggie.
changed the code as you suggested, but getting the same issue. TypeError: ba.querySelector is not a function.
The challenge seems to be at the importAnnotationCommand line. It is calling the fetch function and is getting the xml array of all the xfdf strings. however, once it receives the xfdf string, the baquery selector seems to come in and create an issue.
Rajan
Hi beginew2023,
It is calling the fetch function and is getting the xml array of all the xfdf strings
Do you pass an array as parameter in importAnnotationCommand?
importAnnotationCommand or importAnnotations takes in a string, please check our documentation again https://docs.apryse.com/documentation/web/guides/annotation/import-export/database/#import-annotation-command-xfdf.
Regards,
Maggie V.
Thats correct Maggie.
the importAnnotationCommand is being passed the xfdfstring. Here is the function that is running to send the xfdfstrings:
Command for running the import:
const annots = await annotationManager.importAnnotationCommand(await XFDFString(ucdid));
Logic for XFDFString to get the xfdf string from the database:
var XFDFString = async (ucdid) => {
//alert(“calling last xfdf”+ucdid)
const rows = await loadxfdfStrings(ucdid);
//y
console.log(rows);
return rows;
};
const loadxfdfStrings = async (ucdid) => {
//alert("calling load"+ucdid)
const res = await fetch(`http://localhost:8080/api/annotationsorig?ucdid=${ucdid}`, {
method: 'GET'
});
if (res.status === 200) {
const xfdfStrings = await res.text();
return JSON.parse(xfdfStrings).map(row => row.xfdfString);
}
};
Hi beginew2023,
Please find this branch https://github.com/PDFTron/webviewer-html-annotate-proxy/commit/98382c495f829593af28c5936b0c0ff372f31cee that has a mocked XFDF string (not an array) to pass into the importAnnotationCommand API.
As we cannot debug your code of fetching data from server, please make sure that you pass the correct XFDF string into the API. You can console log the string before passing it in the API, similar to this line https://github.com/PDFTron/webviewer-html-annotate-proxy/commit/98382c495f829593af28c5936b0c0ff372f31cee#diff-368228d7d3aae15622601ab98f216201629ca1d2a9e01763adf696b5b7861d9cR51
This is what I’m seeing running the branch
If the issue still persists, please feel free to modify Viewer.js, replace with your XFDF string (xml syntax) and the website you’re testing on and send it back.
Regards,
Maggie V.
Thanks a ton Maggie. Its working now.
I was constructing XML as an array of xfdf strings rather than adding annotations into a single XML string. Thanks for pointing that out.
