Document Processing

PSPDFKit for Web allows annotation flattening when exporting PDF documents.

PDF Exporting

PDF exporting can be done on the client (for both the Server-backed and Standalone case) as well as the Server (only the Server-backed case).

Client-Side PDF Exporting

Regardless of the deployment option, you can always use Instance#exportPDF() to get the PDF content as an ArrayBuffer:

1
2
const content = await instance.exportPDF();
console.log(content); // => ArrayBuffer
1
2
3
instance.exportPDF().then(function(content) {
  console.log(content); // => ArrayBuffer
});

Adding a download button to the toolbar

With instance.exportPDF() and the possibility of customizing the toolbar, you can easily add a download button to PSPDFKit for Web:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const downloadButton = {
  type: "custom",
  id: "download-pdf",
  icon: "/download.svg",
  title: "Download",
  onPress: () => {
    pspdfkitInstance.exportPDF().then(buffer => {
      const blob = new Blob([buffer], { type: "application/pdf" });
      const fileName = "document.pdf";
      if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
      } else {
        const objectUrl = window.URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = objectUrl;
        a.style = "display: none";
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(objectUrl);
        document.body.removeChild(a);
      }
    });
  }
};

const items = PSPDFKit.defaultToolbarItems;
// Add the download button to the toolbar.
items.push(downloadButton);

PSPDFKit.load({
  toolbarItems: items
});
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var downloadButton = {
  type: "custom",
  id: "download-pdf",
  icon: "/download.svg",
  title: "Download",
  onPress: function() {
    pspdfkitInstance.exportPDF().then(function(buffer) {
      var blob = new Blob([buffer], { type: "application/pdf" });
      var fileName = "document.pdf";
      if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
      } else {
        var objectUrl = window.URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = objectUrl;
        a.style = "display: none";
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(objectUrl);
        document.body.removeChild(a);
      }
    });
  }
};

var items = PSPDFKit.defaultToolbarItems;
// Add the download button to the Toolbar
items.push(downloadButton);

PSPDFKit.load({
  toolbarItems: items
});

Sever-Side PDF Exporting

To request the latest PDF from the Server, please use the /pdf endpoint of the document API. You have the option to download the latest version with all annotations included (the default option) or to access the original PDF content that was initially uploaded. Keep in mind that annotations will never be flattened when using this API.

Annotation Flattening

When flattening an annotation, the annotation is removed from the document, while its visual representation is kept intact. A flattened annotation is still visible but no longer editable by your users or by your app. This can be used, for example, to permanently apply annotations to your document, or to make annotations visible to viewers that otherwise can’t show annotations (like Safari on iOS). If not specified, an export will keep all annotations as they are.

To change how annotations are exported, use Instance#exportPDF(). This method accepts a flatten option:

1
2
const content = await instance.exportPDF({ flatten: true });
console.log(content); // => ArrayBuffer
1
2
3
instance.exportPDF({ flatten: true }).then(function(content) {
  console.log(content); // => ArrayBuffer
});