Some test text!

Get started with PDFNetJS Full

Contents

Initial setup
Setting up the HTML file
Setting up your JavaScript document
Writing your custom code
Converting async/await code
PDFNetJS samples

PDFNetJS Full is a complete browser side PDF SDK, unlocking viewing, parsing and editing of PDF files. This guide will demonstrate how to set up a basic PDFNetJS Full project that outputs the number of pages in a PDF document.

PDFNetJS Full does not require any conversion of documents but can only view PDF documents.

linkInitial setup

This guide will require the following files:

  1. The WebViewer folder.
  2. An empty HTML document.
  3. An empty JavaScript document.
  4. A PDF document of your choice. For this guide we will be using the newsletter PDF document.
  5. An image to add to the PDF document. For this guide we will be using an image of a butterfly.

linkSetting up the HTML file

Open up index.html with a text editor and copy/paste the following code into the HTML document.

<!DOCTYPE html>
<html style="height:100%;">
  <head>
    <meta http-equiv="Content-Type" content="text/html">
    <script src="WebViewer/lib/ui-legacy/external/jquery-3.2.1.min.js"></script>
    <script src="WebViewer/lib/webviewer.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var viewerElement = document.getElementById('viewer');
        var myWebViewer = new PDFTron.WebViewer({
          path: "WebViewer/lib",
          initialDoc: "mydoc.pdf",
          config: 'config.js',
          showLocalFilePicker: true,
          fullAPI: true,
          l: 'YOUR_LICENSE_KEY_HERE'
        }, viewerElement);
      });
    </script>
  </head>
  <body style="width:100%;height:100%;margin:0px;padding:0px;overflow:hidden">
    <div id="viewer" style="height: 100%; overflow: hidden;"></div>
  </body>
</html>

Here we include the required jQuery and WebViewer files and start out with a single "viewer" div that we will add content to using a script. In our custom script, new PDFTron.WebViewer is called to create a new WebViewer instance that will be added as a child to our "viewer" div.

Overview of WebViewer initialization parameters:

  • type - Set to "html5".
  • path - String representing the URL that points to the WebViewer libraries.
  • initialDoc - String representing the URL of the document that will be loaded in WebViewer.
  • config - String that represents the URL of the custom script to run once WebViewer finishes loading.
  • showLocalFilePicker - Boolean that determines whether we can open local documents in the viewer.
  • fullAPI - If true, allows the full PDFNetJS API to be used.
  • l - String containing the license key

If you open index.html from a server, you should be able to see your document displayed in WebViewer.

linkSetting up your JavaScript document

Now that we have our pdf displayed, it's time to write a custom script in config.js. Open up config.js with a text editor and copy/paste the following code into the JavaScript document.

(function() {
  $(document).on('documentLoaded', async function onDocumentLoaded() {
    await PDFNet.initialize();
    var doc = readerControl.docViewer.getDocument();
    var pdfDoc = await doc.getPDFDoc();
    
    // Ensure that we have our first page.
    await pdfDoc.requirePage(1);

    // Run our main function using 'runWithCleanup'
    await PDFNet.runWithCleanup(async () => await main(pdfDoc));

    // Refresh the cache with the newly updated document
    readerControl.docViewer.refreshAll();
    // Update viewer with new document
    readerControl.docViewer.updateView();   
  });

  async function main(pdfDoc) {
    alert("Hello WebViewer!");
  }
})();
//# sourceURL=config.js
In order to run this on browsers without ES7 support, you can convert the file to ES5 using ES7-to-ES5 transformers such as Babel.

If you run the project again in a server, you should be able to see "Hello WebViewer" pop up in an alert box once WebViewer has loaded. Before the custom code is run however, several checks and initializations need to be done first.

  • PDFNet.initialize() - Initializes PDFNetJS backend. This should be called before any PDFNetJS functions are called.
  • doc.getPDFDoc() - Extracts the PDFNet PDFDoc object from the WebViewer document.
  • pdfDoc.requirePage() - Ensures that a particular page of the pdf document is finished downloading before we read or write from it.

    • If the page(s) to be edited cannot be known until the custom script runs, requirePage() can be called instead in the middle of the custom code, but only by unlocking and relocking all operations.
    • An example of this can be seen in the html file of the Viewer Edit test on the samples page.

linkWriting your custom code

Let us change our main() code to do something more interesting:

async function main(pdfDoc) {
  pdfDoc.initSecurityHandler();
  pdfDoc.lock();
  var input_url = "../../../../";
  var firstPage =  await pdfDoc.getPage(1);
  // create a new page builder that allows us to create new page elements
  var builder = await PDFNet.ElementBuilder.create();
  // create a new page writer that allows us to add/change page elements
  var writer = await PDFNet.ElementWriter.create();
  writer.beginOnPage(firstPage, PDFNet.ElementWriter.WriteMode.e_overlay);

  // Adding a JPEG image to output file
  var img = await PDFNet.Image.createFromURL(pdfDoc, input_url + "butterfly.png");

  var imgWidth = await img.getImageWidth();
  var imgHeight = await img.getImageHeight();
  var element = await builder.createImageScaled(img, 100, 600, imgWidth, imgHeight);
  writer.writePlacedElement(element);
  writer.end();
}

This code sample adds the "butterfly.png" image to location (x:100, y:600) relative to the lower left corner of the document's first page.

Once our custom code has finished running, two final functions readerControl.docViewer.refreshAll() and readerControl.docViewer.updateView() are called to refresh and update the WebViewer display.

The resulting viewer should look like this:

linkConverting async/await code (important for IE usage)

This guide and all other PDFNetJS guides use ES7 async/await functions in JavaScript which are currently supported in Chrome, Firefox, Edge, Safari, and Opera but may be unsupported in other browsers. If you are working with a browser without async/await support, you will have to transpile the code from ES7 to ES5 using something like Babel.

linkPDFNetJS samples

The best way to get started with writing your own PDFNetJS code is to run the PDFNetJS samples. You can find working samples and their source code on the PDFNetJS samples page.

Get the answers you need: Support

Contents

Initial setup
Setting up the HTML file
Setting up your JavaScript document
Writing your custom code
Converting async/await code
PDFNetJS samples