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 live 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. This API is available to load an HTML page by calling loadHTMLPage. You can seach, select and highlight the text on an HTML page.

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 } = await initializeHTMLViewer(instance);

  loadHTMLPage({
    iframeUrl:
      'https://www.pdftron.com/',
    width: 500,
    height: 500,
  });
});

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, 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({
  iframeUrl:
    'https://www.pdftron.com/',
  width: 500,
  height: 500,
  license: 'license-key-goes-here',
});

React Sample

To avoid CORS issues with loading external websites, and to be able to annotate on the live website, we have prepared a sample that proxies the content of a live website and allows you to annotate. This sample requires a server component for our proxy solution.

Get the answers you need: Support

Upcoming Webinar: Live tech update & run-through: Redaction | March 31st at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use