PDF Web Viewer

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.

Installation

Install the package with:

``
npm i @pdf-tools/four-heights-pdf-web-viewer --save
`

$3

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:

`html

`

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:

`sh
cp -R ./node_modules/@pdf-tools/four-heights-pdf-web-viewer/pdfwebviewer ./static
`

Instead of manual copying, we recommend to use a bundler which does the work for you on every build.

E.g: webpack:

`JavaScript
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:

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

Basic usage

A simple web application that uses PDF Web Viewer is implemented as follows.

index.html:

`html

















`

index.js:

`javascript
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)
`

Documentation

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.

Licensing

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.