PDF Web Viewer by Pdftools, Switzerland, is a JavaScript component for viewing and annotating PDFs.
- High PDF rendering quality, high performance, low footprint (webassemblies)
- Responsive UI with no external dependencies
- Support for mobile devices
- Creation and editing of PDF annotations
- PDF form filling
- Reading and writing of FDF files
- A multitude of configuration options
- Easy integration in many JavaScript frameworks
- Easy evaluation without the necessity of a license key
See our online demo.
Install the package with:
npm i @pdf-tools/four-heights-pdf-web-viewer --save
PDF Web Viewer comes with static assets and resource files (web assemblies, JavaScript files, translation json files) contained in the packet's pdfwebviewer sub-directory. These need to be served with your application from a "base URL", an absolute or relative path which must be defined prior to loading PDF Web Viewer, e.g. in the HTML file as:
<script type="text/javascript">
window.PDFTOOLS_FOURHEIGHTS_PDFVIEWING_BASEURL = './pdfwebviewer/'
</script>After installing or updating ensure that all static assets are copied.
Manual copying in a shell is possible, but not recommended, because it is easily forgotten. E.g, if PDFTOOLS_FOURHEIGHTS_PDFVIEWING_BASEURL is defined as above and your main directory for static assets is static:
cp -R ./node_modules/@pdf-tools/four-heights-pdf-web-viewer/pdfwebviewer ./staticInstead of manual copying, we recommend to use a bundler which does the work for you on every build.
E.g: webpack:
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const pdfwebviewerDir = path.join(
path.dirname(require.resolve('@pdf-tools/four-heights-pdf-web-viewer')),
'../pdfwebviewer'
)
module.exports = {
...
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: '**/*',
to: 'pdfwebviewer', // Should match PDFTOOLS_FOURHEIGHTS_PDFVIEWING_BASEURL
context: pdfwebviewerDir,
}
],
}),
],
}E.g. for Angular in angular.json:
"projects": {
"angular": {
"architect": {
"build": {
"options": {
"assets": [
{
"glob": "**/*",
"input": "./node_modules/@pdf-tools/four-heights-pdf-web-viewer/pdfwebviewer",
"output": "./pdfwebviewer"
}
],
},
},
}
}
},In the above, the value of "output" directory should match PDFTOOLS_FOURHEIGHTS_PDFVIEWING_BASEURL.
A simple web application that uses PDF Web Viewer is implemented as follows.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript">
// path to the directory containing the static assets must be set before the viewer is loaded
window.PDFTOOLS_FOURHEIGHTS_PDFVIEWING_BASEURL = './pdfwebviewer/'
</script>
<link rel="stylesheet" type="text/css" href="./pdfwebviewer/pdf-web-viewer.css" />
<title>PDF Web Viewer</title>
</head>
<body>
<!-- HTM element containing the PdfWebViewer. -->
<div id="pdfviewer" style="height: 100vh; width: 100vw"></div>
</body>
</html>index.js:
import { PdfWebViewer } from '@pdf-tools/four-heights-pdf-web-viewer'
const element = document.getElementById('pdfviewer')
const license = '' // insert your license key here
// see the documentation for all available options
const options = {}
const pdfViewer = new PdfWebViewer(element, license, options)PDF Web Viewer is documented in more detail in the manual. This manual is also contained in the package in the doc sub-directory.
Furthermore, we have some basic examples on how to integrate PDF Web Viewer in Angular, React or plain JavaScript. Please contact us.
PDF Web Viewer runs both with or without license. If no license is set a watermark will be applied by default. If you don't want a watermark to be applied, please get a free evaluation license. If you want to buy a productive license then request a tailored quote or contact pdfsales@pdf-tools.com.