Some test text!

menu

Get file data with a viewer

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

Below is a basic example of setting up WebViewer and using the getFileData function to retrieve data from a document in a header action button click action.

WebViewer({
  initialDoc: "mydoc.pdf",
  licenseKey: 'Insert commercial license key here after purchase',
}, document.getElementById('viewer'))
  .then(instance => {
    const { docViewer, annotManager } = instance;

    // Add header button that will get file data on click
    instance.setHeaderItems(header => {
      header.push({
          type: 'actionButton',
          img: '...',
          onClick: async () => {
            const doc = docViewer.getDocument();
            const xfdfString = await annotManager.exportAnnotations();
            const data = await doc.getFileData({
              // saves the document with annotations in it
              xfdfString
            });
            const arr = new Uint8Array(data);
            const blob = new Blob([arr], { type: 'application/pdf' });

            // add code for handling Blob here
          }
      });
    });
  });

The getFileData function 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 CoreControls.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.

The following is an example of some of the options being used

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, CoreControls } = instance;

    // Add header button that will get file data on click
    instance.setHeaderItems(header => {
      header.push({
          type: 'actionButton',
          img: '...',
          onClick: async () => {
            const doc = docViewer.getDocument();
            const xfdfString = await annotManager.exportAnnotations();
            const saveOptions = CoreControls.SaveOptions;
            const options = {
              xfdfString,
              flags: saveOptions.LINEARIZED,
              downloadType: 'pdf'
            };
            const data = await doc.getFileData(options);
            const arr = new Uint8Array(data);
            const blob = new Blob([arr], { type: 'application/pdf' });

            // add code for handling Blob here
          }
      });
    });
  });
Another approach would be to use the extractPages function to download a document with only some of the pages. The code would be the similar to the getFileData example above but calls the extractPages function instead of getFileData.

linkDownloading documents

If you are using getFileData to add the ability to download the document, you can consider using downloadPdf instead when using the WebViewer UI.

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, CoreControls } = instance;

    // Add header button that will get file data on click
    instance.setHeaderItems(header => {
      header.push({
          type: 'actionButton',
          img: '...',
          onClick: async () => {
            const xfdfString = await annotManager.exportAnnotations();
            const saveOptions = CoreControls.SaveOptions;
            const options = {
              filename: 'myDocument.pdf',
              xfdfString,
              flags: saveOptions.LINEARIZED,
              downloadType: 'pdf'
            };
            
            instance.downloadPdf(options);
          }
      });
    });
  });

Otherwise, you will have to consider using plain HTML/JavaScript or another JavaScript library such as FileSaver. Below is an example using Blob URLs (make sure to revoke them later):

WebViewer({
  initialDoc: "mydoc.pdf",
  licenseKey: 'Insert commercial license key here after purchase',
}, document.getElementById('viewer'))
  .then(instance => {
    const { docViewer, annotManager } = instance;

    // Add header button that will get file data on click
    instance.setHeaderItems(header => {
      header.push({
          type: 'actionButton',
          img: '...',
          onClick: async () => {
            const doc = docViewer.getDocument();
            const xfdfString = await annotManager.exportAnnotations();
            const data = await doc.getFileData({
              // saves the document with annotations in it
              xfdfString
            });
            const arr = new Uint8Array(data);
            const blob = new Blob([arr], { type: 'application/pdf' });
            const url = URL.createObjectURL(blob);

            window.open(url);
          }
      });
    });
  });

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.