Some test text!

Load and Annotate HTMLkeyboard_arrow_down

Load and Annotate HTML

linkLoading 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.


npm install @pdftron/webviewer-html

linkHow 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 interact with HTML content underneath by calling toggleAnnotations to hide/show annotation canvas overlay.

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

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

  // loadHTMLPage("",
  // 500,
  // 500);

      width: 1800,
      height: 1100,
      width: 600,
      height: 450,

  // Add a button that toggles annotation layer to interact with web content underneath
  instance.setHeaderItems(header => {
      type: 'actionButton',
      img: '<svg id="icons" xmlns="" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#8c8c8c;}</style></defs><title>icon - lin- header - annotations</title><path class="cls-1" d="M19.5,12.6l1.9-2.2v9.4A2.2,2.2,0,0,1,19.3,22H4.3A2.24,2.24,0,0,1,2,19.8V4.7A2.2,2.2,0,0,1,1,2.5h9.5L11.7,4.4H3.8V20.1H19.4V12.6ZM22,5.9a2.2,2.2,0,0,1-.6,1.5L11,17.7H6.3V12.9L16.7,2.6a2.17,2.17,0,0,1,3,0l1.7,1.7A2.27,2.27,0,0,1,22,9ZM16.9,9.2,14.7,7,8,13.8V16h2.1ZM20.2,6,18,3.8,16.1,5.7l2.2,2.2Z"></path></svg>',
      onClick: () => {

Get the answers you need: Support


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.