@pdftron/webviewer-html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Documentation Index</title>  <link type="text/css" rel="stylesheet" href="styles/sunlight.default.css"> <link type="text/css" rel="stylesheet" href="styles/site.simplex.css"> </head> <body> <div class="navbar navbar-default navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="index.html">Documentation</a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse" id="topNavigation"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="modules.list.html" class="dropdown-toggle" data-toggle="dropdown">Modules<b class="caret"></b></a> <ul class="dropdown-menu "> <li><a href="module-@pdftron_webviewer-html.html">@pdftron/webviewer-html</a></li> </ul> </li> <li class="dropdown"> <a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b class="caret"></b></a> <ul class="dropdown-menu "> <li><a href="module-@pdftron_webviewer-html.html#~event:proxyLoaded">event:proxyLoaded</a></li> </ul> </li> </ul> <div class="col-sm-3 col-md-3"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="q" id="search-input"> <div class="input-group-btn"> <button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div> </div> </div> <div class="container" id="toc-content"> <div class="row"> <div class="col-md-8"> <div id="main"> <section class="readme-section"> <article><h1>WebViewer HTML</h1> <p><a href="https://apryse.com/products/webviewer">WebViewer</a> is a powerful JavaScript-based PDF Library that's part of the <a href="https://apryse.com/">Apryse SDK</a>. It allows you to view and annotate PDFs, MS Office, images, videos and web pages on your web app with a fully customizable UI.</p> <p>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 <a href="https://youtu.be/pamn97LMD6s">YouTube</a> or read a <a href="https://apryse.com/blog/webviewer/webpage-annotation-and-collaboration">blog</a>.</p> <p><img src="https://www.pdftron.com/static/40c0d4315743aa5cff94e527ba6c7858/image-webpage-annotation-solution2.png" alt="WebViewer"></p> <p>Let me know how you are planning to use WebViewer HTML or if you have any feedback on any feature missing. You can <a href="mailto:andrey@pdftron.com">email me</a> directly.</p> <h2>Disclaimer</h2> <p>This project is experimental. A proxy server is used to serve webpage assets. This is done to get around various security issues, when loading a webpage in an iframe. This works for a good amount of pages but there are many exceptions. If you have a subset of web pages that you would like to support then we recommend forking <a href="https://github.com/PDFTron/webviewer-html-proxy-server">this repository</a> and making the necessary fixes. We won't be making those changes because it would likely result in other pages failing.</p> <h2>What's new?</h2> <ul> <li>Highlight, underline, draw shapes, callouts, stamps</li> <li>View a live web page</li> <li>Search for wording on the page using different search modes</li> <li>Get access to all the links present on the web page</li> </ul> <h2>Demo</h2> <p>https://showcase.apryse.com/webviewer-html</p> <h2>Sample Integration</h2> <p>Try out the react sample <a href="https://github.com/PDFTron/webviewer-html-annotate-proxy/">here</a>. It shows how to integrate WebViewer, WebViewer-HTML, and webviewer-html-proxy-server.</p> <h2>Initial setup</h2> <p>Before you begin, make sure your development environment includes <a href="https://www.npmjs.com/get-npm">Node.js and npm</a>.</p> <h2>Install</h2> <pre class="prettyprint source"><code>npm install @pdftron/webviewer-html </code></pre> <h2>How to use</h2> <p>WebViewer-HTML requires the server component, <a href="https://www.npmjs.com/package/@pdftron/webviewer-html-proxy-server">@pdftron/webviewer-html-proxy-server</a>. 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.</p> <p>Call the <code>createServer</code> function in your server component and pass in an object that includes <code>SERVER_ROOT</code> and <code>PORT</code>.</p> <pre class="prettyprint source lang-javascript"><code>const HTMLProxyServer = require('@pdftron/webviewer-html-proxy-server'); HTMLProxyServer.createServer({ SERVER_ROOT: `http://localhost`, PORT: 3100 }); </code></pre> <p>When making the request to the proxy-server, make sure to pass along <code>{ credentials: 'include' }</code> to be able to send cookies in cross-origin requests. Read more <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">here</a>.</p> <p>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 <code>loadHTMLPage</code>.</p> <pre class="prettyprint source lang-javascript"><code>import WebViewer from '@pdftron/webviewer'; import { initializeHTMLViewer } from '@pdftron/webviewer-html'; WebViewer( { path: 'lib', }, document.getElementById('viewer') ).then(async (instance) => { const url = 'https://apryse.com/'; const htmlProxyServerUrl = 'http://localhost:3100'; // Tell webviewer-html-proxy-server that you want to proxy this URL const proxyUrlRes = await fetch( `${htmlProxyServerUrl}/pdftron-proxy?url=${url}`, { credentials: 'include' }, ); const { validUrl } = await proxyUrlRes.json(); const { href, origin, pathname } = new URL(validUrl); const hrefWithoutOrigin = href.split(origin)[1] || pathname; const license = `---- Insert commercial license key here after purchase ----`; // Extends WebViewer to allow loading HTML5 files from URL or static folder. const { loadHTMLPage } = await initializeHTMLViewer(instance, { license }); loadHTMLPage({ iframeUrl: `${htmlProxyServerUrl}${hrefWithoutOrigin}`, // URL that is being proxied urlToProxy: validUrl, width: 1440, height: 770, }); }); </code></pre> <h2>Passing custom HTTP headers to the proxy request</h2> <p>For version v1.9.6 and above, the <a href="https://www.npmjs.com/package/@pdftron/webviewer-html-proxy-server">proxy server</a> can accept extra custom HTTP headers using <code>customheaders</code> when making the request, read more <a href="https://developer.mozilla.org/en-US/docs/Glossary/Request_header">here</a>. Make sure to stringify your custom headers before passing them to the value of <code>customheaders</code>.</p> <pre class="prettyprint source lang-javascript"><code>// Tell webviewer-html-proxy-server that you want to proxy this URL const proxyUrlRes = await fetch( `${htmlProxyServerUrl}/pdftron-proxy?url=${url}`, { credentials: 'include', headers: { customheaders: JSON.stringify({ Authorization: 'token', 'custom-header': 'custom token', }), // invalid values: {}, { key: value }, "random string that can't be parsed" }, }, ); </code></pre> <h2>For WebViewer v8.5 and above</h2> <p>New versions of <a href="https://docs.apryse.com/documentation/web/changelog/v8-5-0/">WebViewer v8.5</a> and above requires the <code>disableVirtualDisplayMode: true</code> constructor option. See <a href="https://docs.apryse.com/api/web/global.html#WebViewerOptions__anchor">documentation</a>.</p> <pre class="prettyprint source lang-javascript"><code>WebViewer( { path: 'lib', disableVirtualDisplayMode: true, }, document.getElementById('viewer') ).then(async (instance) => { // ... }); </code></pre> <h2>Detecting when the proxy is loaded</h2> <p>You can add a <code>proxyLoaded</code> event listener to detect when the proxy iframe is fully loaded. This event comes from the <code>DOMContentLoaded</code> event attached to the proxy website.</p> <pre class="prettyprint source lang-javascript"><code>import WebViewer from '@pdftron/webviewer'; WebViewer( { path: 'lib', }, document.getElementById('viewer') ).then((instance) => { const { docViewer } = instance; docViewer.addEventListener('proxyLoaded', listener); }); </code></pre> <h2>Version 3.x</h2> <p>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 <a href="https://github.com/PDFTron/webviewer-html-annotate">this sample</a> 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 <a href="https://apryse.com/blog/webviewer/webviewer-annotate-html-via-proxy-vs-scraping">here</a>.</p> <h2>Adding a license key</h2> <p>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 <code>Apryse Demo</code> watermark, please pass the license key to the function. The license key can be obtained on <a href="https://apryse.com/form/contact-sales">Apryse's website</a>.</p> <pre class="prettyprint source lang-javascript"><code>WebViewer( { path: 'lib', }, document.getElementById('viewer') ).then(async (instance) => { const license = `---- Insert commercial license key here after purchase ----`; const { loadHTMLPage } = await initializeHTMLViewer(instance, { license }); }); </code></pre> <p>For versions v4.5x and below, please pass the licence key to <code>loadHTMLPage</code>.</p> <pre class="prettyprint source lang-javascript"><code>loadHTMLPage({ // Your webviewer-html-proxy-server url iframeUrl: 'http://localhost:3100', // URL that is being proxied urlToProxy: 'https://apryse.com/', width: 1440, height: 770, license: 'license-key-goes-here', }); </code></pre> <h2>Ready-to-deploy Collaboration Sample</h2> <p>We have put together a ready to deploy collaboration sample based on <a href="https://collaboration.pdftron.com/">collaboration.pdftron.com</a>. You can read about it in a <a href="https://apryse.com/blog/webviewer/webpage-annotation-and-collaboration">blog</a> and get started with a <a href="https://github.com/PDFTron/website-reviewer">sample</a>.</p> <p>Please note that this is only supported with Webviewer-HTML v3.x.</p> <h2>Documentation</h2> <p><a href="https://docs.apryse.com/api/html/">Client API documentation</a></p> <p><a href="https://docs.apryse.com/api/html-proxy-server/">Server API documentation</a></p> <h2>License</h2> <p>WebViewer HTML will run in trial mode until a license is provided. For more information on licensing, please visit our <a href="https://apryse.com/feature-chart">website</a>.</p></article> </section> </div> </div> <div class="clearfix"></div> <div class="col-md-3"> <div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div> </div> </div> </div> <div class="modal fade" id="searchResults"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Search results</h4> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <footer> <span class="jsdoc-message"> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on 2023-06-02T16:25:07-07:00 using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>. </span> </footer> <script src="scripts/docstrap.lib.js"></script> <script src="scripts/toc.js"></script> <script type="text/javascript" src="scripts/fulltext-search-ui.js"></script> <script> $( function () { $( "[id*='$']" ).each( function () { var $this = $( this ); $this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) ); } ); $( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () { var $this = $( this ); var example = $this.find( "code" ); exampleText = example.html(); var lang = /{@lang (.*?)}/.exec( exampleText ); if ( lang && lang[1] ) { exampleText = exampleText.replace( lang[0], "" ); example.html( exampleText ); lang = lang[1]; } else { var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/); lang = langClassMatch ? langClassMatch[1] : "javascript"; } if ( lang ) { $this .addClass( "sunlight-highlight-" + lang ) .addClass( "linenums" ) .html( example.html() ); } } ); Sunlight.highlightAll( { lineNumbers : false, showMenu : true, enableDoclinks : true } ); $.catchAnchorLinks( { navbarOffset: 10 } ); $( "#toc" ).toc( { anchorName : function ( i, heading, prefix ) { return $( heading ).attr( "id" ) || ( prefix + i ); }, selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4", showAndHide : false, smoothScrolling: true } ); $( "#main span[id^='toc']" ).addClass( "toc-shim" ); $( '.dropdown-toggle' ).dropdown(); $( "table" ).each( function () { var $this = $( this ); $this.addClass('table'); } ); } ); </script>   <script type="text/javascript"> $(document).ready(function() { SearcherDisplay.init(); }); </script> </body> </html>