1const viewerElement = document.getElementById('viewer');
2const DOCUMENT_ID = 'webviewer-demo-1';
3
4WebViewer({
5 path: 'lib',
6 initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo.pdf',
7 documentXFDFRetriever: () => loadXfdfString(DOCUMENT_ID)
8}, viewerElement).then(instance => {
9 const { annotationManager } = instance.Core;
10
11 // Add a save button on header
12 const topHeader = instance.UI.getModularHeader('default-top-header');
13 const items = topHeader.getItems();
14
15 const saveButton = {
16 type: 'customButton',
17 img: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
18 title: 'Save Annotations',
19 onClick: function() {
20 // Save annotations when button is clicked
21 // widgets and links will remain in the document without changing so it isn't necessary to export them
22 annotationManager.exportAnnotations({ links: false, widgets: false }).then(function (xfdfString) {
23 saveXfdfString(DOCUMENT_ID, xfdfString).then(function() {
24 alert('Annotations saved successfully.');
25 }).catch(function () {
26 alert('Annotations not saved successfully.');
27 });
28 });
29 }
30 };
31
32 items.push(saveButton);
33 topHeader.setItems(items);
34});
35
36
37// Make a POST request with XFDF string
38const saveXfdfString = function(documentId, xfdfString) {
39 return new Promise(function(resolve) {
40 fetch(`../server/annotationHandler.php?documentId=${documentId}`, {
41 method: 'POST',
42 body: xfdfString
43 }).then(function(res) {
44 if (res.status === 200) {
45 resolve();
46 }
47 });
48 });
49};
50
51// Make a GET request to get XFDF string
52const loadXfdfString = function(documentId) {
53 return new Promise(function(resolve) {
54 fetch(`../server/annotationHandler.php?documentId=${documentId}`, {
55 method: 'GET'
56 }).then(function(res) {
57 if (res.status === 200) {
58 res.text().then(function(xfdfString) {
59 resolve(xfdfString);
60 })
61 }
62 });
63 });
64};
65