@pdftron/webviewer-html

This is an addon for WebViewer that allows loading HTML web pages so that they can be annotated.

Usage no npm install needed!

<script type="module">
  import pdftronWebviewerHtml from 'https://cdn.skypack.dev/@pdftron/webviewer-html';
</script>

README

WebViewer HTML

WebViewer is a powerful JavaScript-based PDF Library that's part of the PDFTron PDF SDK. It allows you to view and annotate PDFs, MS Office, images, videos and web pages on your web app with a fully customizable UI.

WebViewer

This is an addon for WebViewer that allows loading HTML web pages so that HTML pages can be annotated. You can watch the demo on YouTube or read a blog.

What's new?

  • Highlight, underline, draw shapes, callouts, stamps
  • View page as a snapshot in time of a live web page
  • Search for wording on the page using different search modes
  • Get access to all the links present on the web page

Initial setup

Before you begin, make sure your development environment includes Node.js and npm.

One of the dependencies is PDFTron's WebViewer. If you would like to use version 6.x of WebViewer, ensure that you use version 1.x of WebViewer HTML. If you are using 7.x, you should be good with version 2.x of this package.

Install

npm install @pdftron/webviewer-html

How to use

You can either load HTML pages from URLs, or static resources using the relative path. Two APIs are available to load a single HTML page by calling loadHTMLPage or to load multiple by calling loadHTMLPages.

import WebViewer from '@pdftron/webviewer';
import { initializeHTMLViewer } from '@pdftron/webviewer-html';

WebViewer(
  {
    path: 'lib',
  },
  document.getElementById('viewer')
).then(async (instance) => {
  // Extends WebViewer to allow loading HTML5 files from URL or static folder.
  const { loadHTMLPage, loadHTMLPages } = await initializeHTMLViewer(instance);

  // loadHTMLPage({
  //   url:
  //     'https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik',
  //   width: 500,
  //   height: 500,
  // });

  // OR

  loadHTMLPages({
    htmlPages: [
      {
        url:
          'https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d41656.714956835!2d-123.0850416!3d49.26607539999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.  1!5e0!3m2!1sen!2sca!4v1591640645684!5m2!1sen!2sca',
        width: 1800,
        height: 1100,
      },
      {
        url:
          'https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&  layer=mapnik',
        width: 600,
        height: 450,
      },
    ],
  });
});

Setting WebViewer instance

You can set WebViewer instance at the moment of initialization or afterwards by calling setInstance.

import WebViewer from '@pdftron/webviewer';
import { initializeHTMLViewer } from '@pdftron/webviewer-html';

WebViewer(
  {
    path: 'lib',
  },
  document.getElementById('viewer')
).then(async (instance) => {
  // Extends WebViewer to allow loading HTML5 files from URL or static folder.
  const { loadHTMLPage, loadHTMLPages, setInstance } = await initializeHTMLViewer(instance);

  // OR
  // setInstance(instance);

Adding a license key

Beginning with version 3.x, we have added a watermark on all HTML pages being viewed in the demo mode. Version 3.x introduces quite a number of feature additions including text tools like highlighting and strikeout, as well as searching capabilities. To remove the PDFTron Demo watermark, please pass the license key to the function. The license key can be obtained on PDFTron's website.

loadHTMLPage({
  url:
    'https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik',
  width: 500,
  height: 500,
  license: 'license-key-goes-here',
});

loadHTMLPages({
  htmlPages: [
    {
      url:
        'https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d41656.714956835!2d-123.0850416!3d49.26607539999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.  1!5e0!3m2!1sen!2sca!4v1591640645684!5m2!1sen!2sca',
      width: 1800,
      height: 1100,
    },
    {
      url:
        'https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&  layer=mapnik',
      width: 600,
      height: 450,
    },
  ],
  license: 'license-key-goes-here',
});

Disable incompatible tools

Some tools are incompatible with webviewer-html. You can disable the incompatible features as shown below:

instance.disableElements([
  'viewControlsButton',
  'downloadButton',
  'printButton',
  'fileAttachmentToolGroupButton',
  'toolbarGroup-Edit',
]);

Adding thumbnails

You can now pass thumbnails to be rendered in the leftPanel. To do so pass an optional thumb parameter containing base64 image representation of your page to loadHTMLPage or loadHTMLPages.

loadHTMLPages({
  htmlPages: [
    {
      url:
        'https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d41656.714956835!2d-123.0850416!3d49.26607539999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sca!4v1591640645684!5m2!1sen!2sca',
      width: 1800,
      height: 1100,
      thumb: image,
    },
    {
      url:
        'https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik',
      width: 600,
      height: 450,
    },
  ],
});

OR

loadHTMLPage({
  url:
    'https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik',
  width: 500,
  height: 500,
  thumb: image,
});

Adding document outline

You can add a document outline that can help users navigate when you are loading multiple pages.

loadHTMLPages({
  htmlPages: [
    {
      url:
        'https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d41656.714956835!2d-123.0850416!3d49.26607539999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sca!4v1591640645684!5m2!1sen!2sca',
      width: 1800,
      height: 1100,
      thumb: image,
    },
    {
      url:
        'https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik',
      width: 600,
      height: 450,
    },
  ],
  bookmarks: [
    {
      title: 'Google Maps',
      pageNumber: 1,
    },
    {
      title: 'Open Street Map',
      pageNumber: 2,
    },
  ],
});

Opening external URL links

To avoid CORS issues with loading external websites, and to be able to save the website as a snapshot in time, we have prepared a sample that scrapes the content of a live website and allows you to annotate.

Support for links on the website

We are now creating clickable links in the annotation layer allowing users to validate that the link takes them to the right place. In a sample, we are passing origUrl into the options object for loadHTMLPages that allows us to properly set up the destination on the link.

Ready-to-deploy Collaboration Sample

We have put together a ready to deploy collaboration sample based on collaboration.pdftron.com. You can read about it in a blog and get started with a sample.

Documentation

Please read the following documentation to get familiar with all WebViewer capabilities WebViewer documentation.

License

WebViewer will run in trial mode until a license is provided. For more information on licensing, please visit our website.