Section:

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 pages can be annotated.

Let me know how you are planning to use WebViewer HTML or if you have any feedback on any feature missing. Let us know.

Please make sure to check the CHANGELOG to ensure versions of WebViewer and WebViewer-HTML are compatible.

Demo

https://showcase.apryse.com/webviewer-html/

Sample Integration

Try out the react sample. It shows how to integrate WebViewer and WebViewer-HTML with webviewer-html-proxy-server, a server component for proxying web pages.

Initial setup

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

Install

sh

1npm install @pdftron/webviewer-html

How to use

WebViewer-HTML requires the server component, @pdftron/webviewer-html-proxy-server. This proxy server solves CORS issues. It will also parse the page for text and links, allowing you to use text annotations and page navigation.

Call the createServer function in your server component and pass in an object that includes SERVER_ROOT and PORT, see API docs for more.

JavaScript

1const HTMLProxyServer = require('@pdftron/webviewer-html-proxy-server');
2HTMLProxyServer.createServer({
3  SERVER_ROOT: `http://localhost`,
4  PORT: 3100
5});

When making the request to the proxy-server, make sure to pass along { credentials: 'include' } to be able to send cookies in cross-origin requests.

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.

JavaScript

1import WebViewer from '@pdftron/webviewer';
2import { initializeHTMLViewer } from '@pdftron/webviewer-html';
3
4WebViewer(
5  {
6    path: 'lib',
7  },
8  document.getElementById('viewer')
9).then(async (instance) => {
10  const url = 'https://apryse.com/';
11  const htmlProxyServerUrl = 'http://localhost:3100';
12
13  // Tell webviewer-html-proxy-server that you want to proxy this URL
14  const proxyUrlRes =
15    await fetch(
16      `${htmlProxyServerUrl}/pdftron-proxy?url=${url}`, 
17      { credentials: 'include' },
18    );
19
20  const { validUrl } = await proxyUrlRes.json();
21  const { href, origin, pathname } = new URL(validUrl);
22  const hrefWithoutOrigin = href.split(origin)[1] || pathname;
23
24  const license = `---- Insert commercial license key here after purchase ----`;
25
26  // Extends WebViewer to allow loading HTML5 files from URL or static folder.
27  const { loadHTMLPage } = await initializeHTMLViewer(instance, { license });
28
29  loadHTMLPage({
30    iframeUrl: `${htmlProxyServerUrl}${hrefWithoutOrigin}`,
31    // URL that is being proxied
32    urlToProxy: validUrl,
33    width: 1440,
34    height: 770,
35  });
36});

New versions of WebViewer v8.5 and above requires the disableVirtualDisplayMode: true constructor option. See documentation.

JavaScript

1WebViewer(
2  {
3    path: 'lib',
4    disableVirtualDisplayMode: true,
5  },
6  document.getElementById('viewer')
7).then(async (instance) => {
8  // ...
9});

Detecting when the proxy is loaded

You can add a proxyLoaded event listener to detect when the proxy iframe is fully loaded. This event comes from the DOMContentLoaded event attached to the proxy website.

JavaScript

1import WebViewer from '@pdftron/webviewer';
2
3WebViewer(
4  {
5    path: 'lib',
6  },
7  document.getElementById('viewer')
8).then((instance) => {
9  const { documentViewer } = instance.Core;
10  documentViewer.addEventListener('proxyLoaded', listener);
11});

Version 3.x

Older versions 3.x of WebViewer-HTML used website scraping to save the website as a snapshot in time, without the need for a separate server component. Please refer to this sample that scrapes the content of a live website and allows you to annotate. This sample along with WebViewer-HTML v3.x are no longer maintained, as the proxy solution allows to better capture accurately the content of a live website. Read more in our blog about scraping.

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 Apryse Demo watermark, please pass the license key to the function. The license key can be obtained on Apryse's website.

JavaScript

1WebViewer(
2  {
3    path: 'lib',
4  },
5  document.getElementById('viewer')
6).then(async (instance) => {
7  const license = `---- Insert commercial license key here after purchase ----`;
8  const { loadHTMLPage } = await initializeHTMLViewer(instance, { license });
9});

For versions v4.5x and below, please pass the licence key to loadHTMLPage.

JavaScript

1loadHTMLPage({
2  // Your webviewer-html-proxy-server url
3  iframeUrl: 'http://localhost:3100',
4  // Original url that is being proxied
5  urlToProxy: 'https://apryse.com/',
6  width: 500,
7  height: 500,
8  license: 'license-key-goes-here',
9});

Documentation

Client API documentation

Server API documentation

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales