Saving a document with JavaScript

There are numerous methods of saving a document depending on what you need to do. This may involve triggering a download on the client to save to the local file system or saving the file data to the server. Regardless of the outcome, WebViewer has APIs to support the features you would like to implement.

The standard way to retrieve document data is by getting the Document object and using the getFileData API.

Below is a basic example of setting up WebViewer and using the getFileData API to retrieve document data by clicking a custom header button.

1WebViewer({
2  initialDoc: "mydoc.pdf",
3  licenseKey: 'YOUR_LICENSE_KEY',
4}, document.getElementById('viewer'))
5  .then(instance => {
6    const { documentViewer, annotationManager } = instance.Core;
7
8    // Add header button that will get file data on click
9    instance.UI.setHeaderItems(header => {
10      header.push({
11          type: 'actionButton',
12          img: '...',
13          onClick: async () => {
14            const doc = documentViewer.getDocument();
15            const xfdfString = await annotationManager.exportAnnotations();
16            const data = await doc.getFileData({
17              // saves the document with annotations in it
18              xfdfString
19            });
20            const arr = new Uint8Array(data);
21            const blob = new Blob([arr], { type: 'application/pdf' });
22
23            // Add code for handling Blob here
24          }
25      });
26    });
27  });

1WebViewer({
2  initialDoc: "mydoc.pdf",
3  licenseKey: 'YOUR_LICENSE_KEY',
4}, document.getElementById('viewer'))
5  .then(instance => {
6    const { docViewer, annotManager } = instance;
7
8    // Add header button that will get file data on click
9    instance.setHeaderItems(header => {
10      header.push({
11          type: 'actionButton',
12          img: '...',
13          onClick: async () => {
14            const doc = docViewer.getDocument();
15            const xfdfString = await annotManager.exportAnnotations();
16            const data = await doc.getFileData({
17              // saves the document with annotations in it
18              xfdfString
19            });
20            const arr = new Uint8Array(data);
21            const blob = new Blob([arr], { type: 'application/pdf' });
22
23            // Add code for handling Blob here
24          }
25      });
26    });
27  });

The getFileData API also takes in an options object to change some of the characteristics of the saved file data. The most commonly used options are:

• xfdfString: A string containing the XFDF annotation data to include in the downloaded file. This can be retrieved from the exportAnnotations function on AnnotationManager.
• downloadType: A string value for the output format. Possible values are:
  • 'pdf': Get file data in a PDF format. This is the default option and can be used for any loaded document.
  • 'office': If an office file is loaded (docx, xlsx, pptx, etc) then get file data in the current document format.
• flags: optional enum flags for how to save the PDF data. They can be found in Core.SaveOptions and the most commonly used values are:
  • REMOVE_UNUSED: Remove unused PDF data during save. This is the default option.
  • LINEARIZED: Optimize data for speed and remove unused data.

Using the getFileData API along with exportAnnotations as displayed in the section above is the standard way to get file data, but isn’t the most efficient. This is because calling exportAnnotations will serialize all the annotations, even though they haven’t been touched. Although this is more complete, it may not be necessary and can impact performance if there are tens of thousands of annotations in a document. If the document already has these annotations, you can avoid updating it.

Use the exportDocumentAnnotationCommand for an XFDF command that represents the updates made to annotations since you last opened the document, or since you last gave the workers some XFDF to merge. You can pass this XFDF to getFileData using the xfdfCommand option. Please note that the xfdfString option will take priority if both are used.

1const xfdfCommand = await annotationManager.exportDocumentAnnotationCommand()
2const data = await doc.getFileData({
3    // updates the document with only annotations that changed
4    xfdfCommand
5});

After getting a Blob object, there are a variety of ways to save it from the browser:

1const url = URL.createObjectURL(blob);
2window.open(url);

1// using the FileSaver.js library saveAs function, but any technique to save a Blob from the browsers works
2window.saveAs(blob, 'downloaded.pdf');

1const data = new FormData();
2data.append('mydoc.pdf', blob, 'mydoc.pdf');
3// depending on the server, 'FormData' might not be required and can just send the Blob directly
4
5const res = await fetch('/api/test', {
6  method: 'POST',
7  body: data,
8});

1const data = new FormData();
2data.append('mydoc.pdf', blob, 'mydoc.pdf');
3// depending on the server, 'FormData' might not be required and can just send the Blob directly
4
5const req = new XMLHttpRequest();
6req.open("POST", '/api/test', true);
7req.onload = function(oEvent) {
8  // Uploaded.
9};
10
11req.send(data);

The UI namespace provides a downloadPdf API with similar options to getFileData.

1const options = {
2  filename: 'myDocument.pdf',
3  xfdfString,
4  flags: Core.SaveOptions.LINEARIZED,
5  downloadType: 'pdf'
6};
7
8instance.UI.downloadPdf(options);

1const options = {
2  filename: 'myDocument.pdf',
3  xfdfString,
4  flags: CoreControls.SaveOptions.LINEARIZED,
5  downloadType: 'pdf'
6};
7
8instance.downloadPdf(options);

Getting document data without a viewer is possible and very similar to the method mentioned in this guide.

Get document data without a viewer
To get document data as a blob without a viewer.

Loading and saving annotations
To import/load and export/save annotations with a PDF document.

Saving a document in Salesforce
To save a PDF through WebViewer in a Salesforce deployment.

Sending data with XMLHttpRequest
Mozilla documentation on sending binary data using XMLHttpRequest.

Sending data with fetch
Google documentation on working with fetch API.

Sending post request with jQuery
jQuery documentation on using post requests.