Some test text!

keyboard_arrow_down

Getting started

keyboard_arrow_down

Deployment options

keyboard_arrow_down

Webviewer Server

keyboard_arrow_down

Fundamentals

keyboard_arrow_down

Basics

keyboard_arrow_down

Annotations

keyboard_arrow_down

UI

keyboard_arrow_down

Legacy UI

keyboard_arrow_down

Advanced

keyboard_arrow_down

PDFNetJS Full

keyboard_arrow_down

PDF Processing API

Document loading

In this document
chevron_rightLoading WebViewer without a document
chevron_rightLoading multiple documents with loadDocument
chevron_rightLoading documents from a Blob or File
chevron_rightLoading documents from base64 data

The easiest way to load a document in WebViewer is by specifying the initialDoc option but what if you want to do something a bit different? For example loading multiple documents in sequence or preloading WebViewer without a document and then loading the document later.

linkLoading WebViewer without a document

If you want to instantiate the viewer without loading any document (maybe you're getting the document URL asynchronously) then you can simply not set the initialDoc option. The viewer UI will be loaded and you can call the loadDocument function when you're ready to load a document.

linkLoading multiple documents with loadDocument

If you want to load multiple documents in your app you'll want to reuse WebViewer. This is better than removing the old iframe and creating a new instance of WebViewer because some browsers have trouble with this and may leak memory.

To reuse WebViewer just keep a reference to your WebViewer instance and call loadDocument with the new document URL. The old document will be removed from the viewer (automatically cleaning up its resources) and the new document will be loaded in.

Note that if you are using the serverUrl option for loading annotations it's important to specify the documentId for each document so your server can determine which annotations should be returned. See more information here.
var myWebViewer = new PDFTron.WebViewer({
  initialDoc: 'mysite.com/myfirstdocument.pdf',
  documentId: 'id1'
}, viewerElement);

viewerElement.addEventListener('ready', function() {
  loadDocumentButton.on('click', function() {
    myWebViewer.loadDocument('mysite.com/myOtherDocument.pdf', { documentId: 'id2' });
  });
});

linkLoading documents from a Blob or File

If your document is already in Blob format you can simply pass the Blob (or File) object to loadDocument instead of a URL. Note that you cannot use the initialDoc option in this case and you may need to specify the documentType option in your PDFTron.WebViewer constructor. For example:

var myWebViewer = new PDFTron.WebViewer({
  documentType: 'pdf'
}, viewerElement);

viewerElement.addEventListener('ready', function() {
  myWebViewer.loadDocument(myBlob, { filename: 'myfile.pdf' });
});

linkLoading documents from base64 data

If you have the file data as a base64 string then the best way to load the document in WebViewer is to first convert it to a Blob and then load it as specified in the previous section. Below is some example code showing how to convert base64 to a Blob.

var myWebViewer = new PDFTron.WebViewer({
  documentType: 'pdf'
}, viewerElement);

var base64ToBlob = function(base64) {
  var binaryString = window.atob(base64);
  var len = binaryString.length;
  var bytes = new Uint8Array(len);
  for (var i = 0; i < len; ++i) {
    bytes[i] = binaryString.charCodeAt(i);
  }

  return new Blob([bytes], { type: 'application/pdf' });
};

viewerElement.addEventListener('ready', function() {
  myWebViewer.loadDocument(base64ToBlob(myBase64String), { filename: 'myfile.pdf' });
});