Some test text!

Loading...
Guides
Load and Annotate HTML

Load and Annotate HTML

Loading HTML directly (dynamic)

You can load HTML pages directly by importing webviewer-html module completely client-side.

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

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 pages by calling loadHTMLPages. You can seach, select and highlight the text on an HTML page.

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.

Get the answers you need: Support

UPCOMING WEBINAR: Live tech update and run-through. October 21 @ 11am PDT