importAnnotations(XFDF) API is working for only first document when we login to application

Hello Team,

WebViewer Version: [WebViewer Server] server version: 1.5.6-gf198a7c

We are using PDFTron Webviewer in our salesforce application to view documents, modify pdf documents and for annotations export and import.

I have implemented to export annotations from the rendered document in the webviewer to external database and meanwhile we are importing same annotations when we load same document second time.
Here importAnnotations(XFDF string) API working only for one document when we opened in webviewer, if we open any other document second time and if even we have XFDF string from the database, importAnnotation API is not importing any annotations.

Below is the sample code we are using to import annotations

function importAnnot(XFDF){
var annotManager = readerControl.docViewer.getAnnotationManager();
annotManager.importAnnotations(XFDF)
}

Please help me, we have in a critical situation on this.

Thanks
Vijaykumar L S

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 Vijaykumar,

I understand what you are saying, but I don’t see why importAnnotations is not working.
In order for us to investigate further, can you provide the following information?

  • When you “open any other document”, how did you open it? (If you opened a file programmatically, please send me your code)
  • The XFDF strings when you call “importAnnot” function (There should be two XFDF strings)
  • The 2 PDFs that you are using
    -If your application is open to the public, can you provide an access?
  • If not, what’s the version of WebViewer you are using? Are there any errors under the browser console when you see this issue? Also please send me all related JavaScript code to this issue

Oscar

Hi Oscar

Thank you for the quick response.
I have recorded one video and i explained my issue clearly in the attached video.
it has low quality video, for uploading purpose i have compressed the file to low quality. please convert that video to MP4 and watch.

Below are the details i am sharing as per your comments
*** When you “open any other document”, how did you open it? (If you opened a file programmatically, please send me your code)**
we configured PDFTron UI in one of the LWC component and when component lifecycle method called renderedcallback method we are initilizing the webviewer and we are calling loaddocument method to load the file.below is the code for this,

uiInitialized = false;
renderedCallback() {
if (this.uiInitialized) {
return;
}
this.uiInitialized = true;
Promise.all([loadScript(this, libUrl + “/webviewer.min.js”)])
.then(() => {
this.initUI();
})
.catch(console.error);
}
initUI() {
var myObj = {
libUrl: libUrl,
fullAPI: true,
namespacePrefix: “”
};
const viewerElement = this.template.querySelector(“div”);
const viewer = new PDFTron.WebViewer(
{
path: libUrl, // path to the PDFTron ‘lib’ folder on your server
custom: JSON.stringify(myObj),
pdftronServer: “https://rimsmart1.azurewebsites.net”,

            config: myfilesUrl + "/config.js",
            fullAPI: this.fullAPI,
            enableFilePicker: true
            // l: 'YOUR_LICENSE_KEY_HERE',
        },
        viewerElement
    );
	 viewerElement.addEventListener("ready", () => {
        this.iframeWindow = viewerElement.querySelector("iframe").contentWindow;
    });

}
@api loadDocumentFromBox(docData) {

    console.log("coming here loadDocumentFromBox");

    let docContentURL = "https://api.box.com/2.0/files/";

    let authToken = "Bearer " + docData.authToken;

    if (docData.isRenditionAvailable) {

        docContentURL = docContentURL + docData.docRenditionExternalID + "/content";

    } else if (docData.docExternalID) {

        docContentURL = docContentURL + docData.docExternalID + "/content?version=" + docData.docVersionExternalID;

    } else {

        docContentURL = docContentURL + docData.docID + "/content";

    }

    console.log("docContentURL:", docContentURL);

    this.iframeWindow.postMessage(

        {

            type: "BOX_DOCUMENT",

            docContentURL: docContentURL,

            authToken: authToken,

            asUser: docData.userID,

            fileName: docData.fileName,

            isRenditionAvailable: docData.isRenditionAvailable,

            docId: docData.docID,

            recordId:this.recordId,

        },

        "*"

    );

}

When we called loadDocumentFromBox, it is passing data to the iframe window recieve message event handled in config.js file, there we are loading the file in webviewer. below is the code for loading the document,

window.addEventListener(“message”, receiveMessage, false);
function receiveMessage(event) {
if (event.isTrusted && typeof event.data === ‘object’) {
switch (event.data.type) {
case ‘BOX_DOCUMENT’:
event.target.readerControl.loadDocument(event.data.docContentURL, {
filename: event.data.fileName,
cacheKey : Math.random().toString(36).substring(1),
customHeaders: {
Authorization: event.data.authToken,
‘as-user’: event.data.asUser
},
withCredentials: true
})
if(!event.data.isRenditionAvailable){
readerControl.disableElements([“toolbarGroup-Annotate”]);
hideannotationtabelements();
}
window.recordId = event.data.recordId;
break;
default:
break;
}
}
}

*** The 2 PDFs that you are using**
-If your application is open to the public, can you provide an access?
Sorry, our application is not in production.

if not, what’s the version of WebViewer you are using? Are there any errors under the browser console when you see this issue? Also please send me all related JavaScript code to this issue

this issue is replicated when we import annotation from external resource like DB or excel.
for import we are using below code

let XFDFData = event.data.data;
if(XFDFData !== undefined && XFDFData !== null && XFDFData !== “”){
let annotobj = JSON.parse(event.data.data);
if(annotobj.annotationList && annotobj.annotationList.length>0 && annotobj.annotationList[0].annotationdetail){
var annotManager = readerControl.docViewer.getAnnotationManager();
let XFDFString = {…annotobj.annotationList[0]}.annotationdetail;
annotManager.importAnnotations(XFDFString);
}

Please let us know any quick solution for this is much apreciated.
Thank you again for the quick response and i waiting for your response.
Thanks
Vijaykumar L S

Hi Vijaykumar,

If seems the video is over-compressed, I can hear your voice very well in that video, if you don’t mind, you can upload the uncompressed version (you can upload the video to google drive)

It is ok that your application is not open to the public, I can still run your code locally.
However, since your XFDFData are loaded from the server side, can you provide me the PDFs that you are using and also the XFDFData you get from the DB? (if the XFDFData is large, you can also put them into a txt file and attach it here)

The reason I am asking is that if I can reproduce this issue on my local, it will be much easier to debug.

Oscar

Hi Oscar,

This issue can be reproduceable with below steps

  1. Load the List of document
  2. Click on the first document and import the annotation XFDFData (You can tack any XFDFData)
    Here XFDF String will be successfully imported and viewed on the PDFTron web viewer - Step 2 is
    working fine
  3. Open the second document from the List of document in the same tab (where you opened the first
    document in step 1) then Import same XFDF string to second document.
    There you can observe XFDF string for the second document will be not imported and its not visible
    in the PDFTron web viewer.

Note: You can use any PDF and XFDF string to reproduce this issue.

Please help me out here and let me know if you need any other info?

Thanks
Vinay

Hi Vinay,

Can you book an office hour here so we can investigate the issue together?

Thank you,
Thomas