Some test text!

menu
search
Setupkeyboard_arrow_down

Customizing setup

There are two ways of adding customization to WebViewer, the first way is by accessing the WebViewer instance within your app and the second is by using a config file, which is a stand-alone JavaScript file executed inside WebViewer's iframe.

linkWhat option should I choose

We'll start with a simple example Web App and show where you can make your customizations.

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <script src="/lib/webviewer.min.js"></script>
  </head>
  <body>
    <div id="viewer"></div>
    <script src="app.js"></script>
  </body>
</html>

linkApp level customization

Listen to events on the viewer element and call functions on the varructed WebViewer instance. Generally this is the recommended way to customize WebViewer within your app.

The only time where this will not work is if you are hosting the WebViewer lib folder on a different server from the rest of your app. This causes the iframe to not be accessible directly from your app because it's on a different origin.

// app.js
// Instantiate WebViewer
WebViewer({
  path: 'lib',
  licenseKey: 'Insert commercial license key here after purchase',
  initialDoc: '/files/webviewer-demo-annotated.pdf'
}, document.getElementById('viewer'))
  .then(function(instance) {
    var docViewer = instance.docViewer;
    var annotManager = instance.annotManager;
    var Annotations = instance.Annotations;

    instance.disableElement('searchButton');
    instance.setTheme('dark');
    docViewer.setMargin(20);

    docViewer.on('documnetLoaded', function() {
      // Add customization here
      // Draw rectangle annotation on first page
      var rectangle = new Annotations.RectangleAnnotation();
      rectangle.PageNumber = 1;
      rectangle.X = 100;
      rectangle.Y = 100;
      rectangle.Width = 250;
      rectangle.Height = 250;
      rectangle.Author = annotManager.getCurrentUser();
      annotManager.addAnnotation(rectangle);
      annotManager.drawAnnotations(rectangle.PageNumber);
    });

    docViewer.on('fitModeUpdated', function(e, fitMode) {
      console.log('fit mode changed');
    });
  });

linkConfig file

You can organize your custom code in a separate JavaScript file that is executed in the context of the iframe. In this way, you have direct access to the iframe window and document, and you can use WebViewer's global methods directly. More details about config files can be found here.

Config files are recommended when you are hosting the WebViewer lib folder on a separate server from your application. Since the config file is executed directly in the iframe there are no cross origin issues.

// app.js
// Instantiate WebViewer
WebViewer({
  path: 'https://myotherserver.com/webviewer/lib',
  licenseKey: 'Insert commercial license key here after purchase'
  initialDoc: '/files/webviewer-demo-annotated.pdf',
  config: 'config.js' // path/to/your/config.js
}, document.getElementById('viewer'));
// config.js executed inside the iframe
$(document).on('viewerLoaded', function() {
  var docViewer = readerControl.docViewer;
  var annotManager = docViewer.getAnnotationManager();

  // Add customization here
  docViewer.setMargin(20);
  docViewer.on('fitModeUpdated', function(e, fitMode) {
    console.log('fit mode changed');
  });

  readerControl.disableElement('searchButton');
  readerControl.setTheme('dark');
});

$(document).on('documentLoaded', function() {
  var docViewer = readerControl.docViewer;
  var annotManager = docViewer.getAnnotationManager();

  // Add customization here
  // Draw rectangle annotation on first page
  // "Annotations" can be directly accessed since we're inside the iframe
  var rectangle = new Annotations.RectangleAnnotation();
  rectangle.PageNumber = 1;
  rectangle.X = 100;
  rectangle.Y = 100;
  rectangle.Width = 250;
  rectangle.Height = 250;
  rectangle.Author = annotManager.getCurrentUser();
  annotManager.addAnnotation(rectangle);
  annotManager.drawAnnotations(rectangle.PageNumber);
})

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.

PDFTron Receives USD$71 Million Growth Investment Led By Silversmith Capital Partners

Learn more
close