Which product are you using?
PDFJS Express
PDF.js Express Version
| UI version | ‘8.4.1’ |
|---|---|
| Core version | ‘8.4.0’ |
Detailed description of issue
I can load a document into the viewer and am able to update fields and save them. On save, I export and save the annotations. When I reload the page, the fields are set properly. If I annotate the page with highlight and underlines, save, and reload, the annotations appear correctly.
However, if I add a comment annotation, save and reload, the annotations fail with the following JS error:
VM265:1 Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 18
at JSON.parse ()
at h.qO (webviewer-core.min.js:2575:263)
at ja (webviewer-core.min.js:2578:224)
at h.rO (webviewer-core.min.js:2578:462)
at webviewer-core.min.js:2570:364
at webviewer-core.min.js:2570:269
at webviewer-core.min.js:2076:313
at x (webviewer-core.min.js:1845:405)
at ha (webviewer-core.min.js:1845:426)
at ka (webviewer-core.min.js:2069:480)
Expected behaviour
All annotations will be displayed properly
Does your issue happen with every document, or just one?
Every document
Link to document
Code snippet
$(document).ready(function() {
WebViewer({
path: '/Scripts/pdf-js-express/lib',
licenseKey: 'xxx', // redacted
initialDoc: '/FormDocument/CreateFormTemplate/8',
disableFlattenedAnnotations: true
},
document.getElementById('viewer')).then(async instance => {
const docViewer = instance.docViewer;
const annotManager = instance.annotManager;
// call methods from instance, docViewer and annotManager as needed
// you can also access major namespaces from the instance as follows:
// const Tools = instance.Tools;
// const Annotations = instance.Annotations;
docViewer.addEventListener('documentLoaded',
async () => {
$("#btnSave").click(function() {
saveFile(false, docViewer, annotManager);
});
$("#submitDocumentBtn").click(function() {
saveFile(true, docViewer, annotManager);
});
var annotText = 'XXX'; // redacted full XFDF XML embedded string
await annotManager.importAnnotations(annotText);
});
});
});
async function saveFile(isSubmit, docViewer, annotManager) {
const xfdf = await annotManager.exportAnnotations();
const fileData = await docViewer.getDocument().getFileData({});
const blob = new Blob([fileData], { type: 'application/pdf' });
var data = new FormData();
data.append('xfdf', xfdf);
data.append('file', blob);
//data.append('license', 'XXXX'); // redacted
// Process the file
const response = await fetch('https://api.pdfjs.express/xfdf/merge', {
method: 'post',
body: data
}).then(resp => resp.json());
const { url, key, id } = response;
// Download the file
var mergedBlob = await fetch(url,
{
headers: {
Authorization: key
}
}).then(resp => resp.blob());
var data = new FormData();
data.append("id", 8);
data.append("pdfAnnotations", xfdf);
data.append("fileStream", mergedBlob);
$.ajax({
url: '/FormDocument/UploadFile',
method: "POST",
data: data,
cache: false,
contentType: false,
processData: false,
success : async data => {
if (data.success) {
if (isSubmit) {
return submitFormDocument();
}
}
}
});
}
async function submitFormDocument() {
return $.ajax({
url: "/FormDocument/Submit",
type: "POST",
data: {
formDocumentId: "8"
},
success: function (data) {
if (data.success) {
var hasOpener = !isNullOrWhiteSpace(window.opener);
if (hasOpener) {
window.close();
}
else {
var isPatient = true;
var isClinician = false;
var id = 29;
var url;
if (isPatient) {
url = "/Patient/Chart/29?patientPage=OtherDocuments";
} else if (isClinician) {
url = "/Clinician/Edit/29?page=Documents";
} else {
url = "/";
}
window.location.href=url;
}
} else {
if (data.message != "") {
window.alert(data.message);
} else {
window.alert("Something went wrong please try again");
}
}
}
});
}