Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

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

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

JavaScript PDF Viewer

4.3.3
latest
npm

Version published: 2 months ago

Weekly downloads: 149; decreased by-47.16%

Maintainers: 0

Weekly downloads

Created: 3 years ago

Source

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 pdfsales@pdf-tools.com.

Keywords

FAQs

What is @pdf-tools/four-heights-pdf-web-viewer?

Is @pdf-tools/four-heights-pdf-web-viewer popular?

Is @pdf-tools/four-heights-pdf-web-viewer well maintained?

Package last updated on 30 Sep 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install