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