@pdf-tools/four-heights-pdf-web-viewer

v4.3.3

Published

2 months ago

JavaScript PDF Viewer

Downloads

1,186

0High
0Medium
0Low

pdf pdf viewer pdf web viewer webassembly pdf annotation

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

Static Assets

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

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

Basic usage

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)

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 [email protected].

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme