Annotations in WebViewer with PHP backend

The sample integrates WebViewer into a PHP backend development environment. Enables save/load annotations using XFDF files.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Click the button below to view the full project in GitHub.

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

1<?php
2// Create xfdf folder if it doesn't exist
3if (!is_dir("xfdf")) {
4  mkdir("xfdf");
5}
6
7$xfdf_file = "xfdf/".$_REQUEST['documentId'].".xfdf";
8
9if ($_SERVER['REQUEST_METHOD'] === 'POST') {
10  // Handle POST request sent to '/server/annotationHandler.php'
11  $xfdf_string = file_get_contents('php://input');
12  // Write XFDF string into an XFDF file
13  if (file_put_contents($xfdf_file, $xfdf_string)) {
14    header("HTTP/1.1 200 OK");
15  } else {
16    header("HTTP/1.1 500 Internal Server Error");
17  }
18} else if ($_SERVER['REQUEST_METHOD'] === 'GET') {
19  // Handle GET request sent to '/server/annotationHandler.php'
20  if (file_exists($xfdf_file)) {
21    // Read from the XFDF file and send the string as a response
22    $xfdf_string = file_get_contents($xfdf_file);
23    header("HTTP/1.1 200 OK");
24    header("Content-type: text/xml");
25    echo $xfdf_string;
26  } else {
27    header("HTTP/1.1 204 No Content");
28  }
29}
30?>

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales

Product:

Annotations in WebViewer with PHP backend