Some test text!

platform
search

Sending documents to a RESTful API

Contents

Getting data from a document
When using client only mode
When using WebViewer Server
When not using a Viewer
Saving Blob from the browser
Uploading to a RESTful API

linkGetting data from a document

After annotating or modifying a document you may want to save the entire document to your server. The most common way to send a document to a server is as a Blob object and WebViewer makes this easy by providing functions to get the document data as a Blob.

linkWhen using client only mode

When using client only mode, 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

var viewerElement = document.getElementById('viewer');
var myWebViewer = new PDFTron.WebViewer({
  initialDoc: "mydoc.pdf",
  l: 'YOUR_LICENSE_KEY_HERE',
}, viewerElement);

viewerElement.addEventListener('documentLoaded', function() {
  var docViewer = myWebViewer.getInstance().docViewer;
  var doc = docViewer.getDocument();

  doc.getFileData().then(function(data) {
    var arr = new Uint8Array(data);
    var 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

viewerElement.addEventListener('documentLoaded', function() {
  var docViewer = myWebViewer.getInstance().docViewer;
  docViewer.on('annotationsLoaded', function () {
    // since we are using 'xfdfstring', have to wait till annotations are loaded before using 'exportAnnotations'
    var CoreControls = viewerElement.querySelector('iframe').contentWindow.CoreControls;
    var doc = docViewer.getDocument();

    var annotManager = docViewer.getAnnotationManager();
    var saveOptions = CoreControls.SaveOptions;
    var options = {
      xfdfString: annotManager.exportAnnotations(),
      flags: saveOptions.LINEARIZED,
      downloadType: 'pdf'
    };

    doc.getFileData(options).then(function(data) {
      var arr = new Uint8Array(data);
      var 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.

linkWhen using WebViewer Server

When using WebViewer Server, use the getDownloadLink function to get a URL for downloading the document data. Afterward simply get a Blob object from the URL:

viewerElement.addEventListener('documentLoaded', function() {
  var docViewer = myWebViewer.getInstance().docViewer;
  var doc = docViewer.getDocument();

  var annotManager = docViewer.getAnnotationManager();
  var options = {
    annots: annotManager.exportAnnotations()
  };

  doc.getDownloadLink(options).then(function(data) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', data.url, true);
    xhr.responseType = 'blob';
    xhr.onload = function(e) {
      if (this.status == 200) {
        var blob = this.response;
        // add code for handling Blob here
      }
    };
    xhr.send();
  });
});

linkWhen not using a Viewer

When not using a Viewer, first load the document into a Document or PDFDoc object then use their respective function to acquire the document data.

linkGetting data from a PDFDoc object

One way of getting document data without a Viewer is by using the saveMemoryBuffer function found on PDFDoc objects. An example can be found below

var licenseKey =  'YOUR_LICENSE_KEY_HERE';

function main() {
  try {
    var documentURL = 'Enter Document URL Here';
    PDFNet.PDFDoc.createFromURL(documentURL)
    .then(function(pdfDoc){
      pdfDoc.initSecurityHandler();
      pdfDoc.lock();
    return pdfDoc.saveMemoryBuffer(PDFNet.SDFDoc.SaveOptions.e_remove_unused);
    }).then(function(data){
      var arr = new Uint8Array(data);
      var blob = new Blob([arr], { type: 'application/pdf' });
      // add code for handling Blob here
    })
  } catch(err) {
    console.log(err.stack)
  }
}
PDFNet.runWithCleanup(main, licenseKey);

After acquiring a PDFDoc object, use the saveMemoryBuffer function to retrieve the document data. saveMemoryBuffer takes in an enum flag similar to getFileData flags. The flags can be found in PDFNet.SDFDoc.SaveOptions and their values are:

  • e_remove_unused
  • e_hex_strings
  • e_omit_xref
  • e_linearized
  • e_compatibility

There is also an e_incremental flag but it's ignored when using saveMemoryBuffer.   saveMemoryBuffer modifies the PDFDoc data stored in memory, so it's best practice to acquire a write lock for the document.

linkGetting data from a Document object

Another way to retrieve document data without a viewer is by creating a new Document object. The following example shows how to use an ExternalPdfPartRetriever to retrieve document data from an external URL.

function main() {
  CoreControls.getDefaultBackendType().then(function(backendType) {
    var workerHandlers = {};
    var workerTransportPromise = CoreControls.initPDFWorkerTransports(backendType, workerHandlers, licenseKey);
    var options = { workerTransportPromise: workerTransportPromise };

    var documentID = 'another.pdf';
    // documentID can be anything but should be unique
    var documentType = 'pdf';
    var documentURL = 'Enter Document URL Here';

    var partRetriever = new CoreControls.PartRetrievers.ExternalPdfPartRetriever(documentURL);
    var doc = new CoreControls.Document(documentID, documentType);

    doc.loadAsync(partRetriever, function(err) {
      doc.getFileData().then(function(data) {
        var arr = new Uint8Array(data);
        var blob = new Blob([arr], { type: 'application/pdf' });
        // add code for handling Blob here
      });
    }, options);
  });
}
var licenseKey = 'YOUR_LICENSE_KEY_HERE';
PDFNet.runWithCleanup(main, licenseKey);
Document objects also have a getPDFDoc function for retrieving an associated PDFDoc object. However getFileData is preferred over saveMemoryBuffer in most cases because getFileData gives easy control over the output and is safer (it ensure everything is loaded and it take care of locks). The only reason to use saveMemoryBuffer over getFileData, is if there isn't an easy way of acquiring a Document object or if you need other PDFDoc features for controlling the download process.

linkSaving Blob from the browser

After getting a Blob object, it's possible to save it from the browser using a library like FileSaver.js.

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

linkUploading to a RESTful API

Once you have the document as a Blob you can send it to your server:

var data = new FormData();
data.append('mydoc.pdf', blob, 'mydoc.pdf');
// depending on the server, 'FormData' might not be required and can just send the Blob directly

var req = new XMLHttpRequest();
req.open("POST", '/api/test', true);
req.onload = function (oEvent) {
  // Uploaded.
};

req.send(data);

or using jQuery

var data = new FormData();
data.append('mydoc.pdf', blob, 'mydoc.pdf');
// depending on the server, 'FormData' might not be required and can just send the Blob directly

$.ajax({
 type: 'POST',
 url: url,
 data: blob,
 processData: false,
 contentType: false
}).done(function(response) {

});

More information can be found in the links below

Get the anwsers you need: Support

Contents

Getting data from a document
When using client only mode
When using WebViewer Server
When not using a Viewer
Saving Blob from the browser
Uploading to a RESTful API