@accusoft/pdf-viewer

Accusoft PDF Viewer

Accusoft PDF Viewer is a client-only JavaScript library which allows you to easily embed PDF viewing and annotation functionality to your website or web application.

Live Demo

Click here for a live demo.

Pricing and Editions

The Standard edition includes basic viewing features and is free-to-use. The Professional edition includes paid functionality like annotations, white labeling, and eSignatures. Contact us for more information on pricing and editions.

Quick Start

Install @accusoft/pdf-viewer

npm install @accusoft/pdf-viewer

Create a container div

Define a container DOM element on your page where you want the viewer to exist:

<!-- NOTE: The viewer will only fill the size of your container.
       Make sure your container has a defined width and height! -->
<div id="myContainer" style="height: 800px;"></div>

For mobile, define a viewport meta tag

For mobile, define a viewport meta tag in the head of your HTML which ensures the viewport is kept the same size as the device screen:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

Import and create a viewer

Import PdfViewerControl and create a viewer:

import { PdfViewerControl } from '@accusoft/pdf-viewer';

(async () => {
  window.myViewer = await PdfViewerControl.create({
    container: document.getElementById('myContainer'),

    // URL or Uint8Array for a PDF
    sourceDocument: 'https://yourdomain.com/documents/example.pdf'
  });
})();

Optionally, use a licenseKey of 'eval' to evaluate Professional features, enabling the allowedControls you want, such as annotation tools:

(async () => {
  // Create a viewer
  window.myViewer = await PdfViewerControl.create({
    container: document.getElementById('myContainer'),

    // URL or Uint8Array for a PDF
    sourceDocument: 'https://yourdomain.com/documents/example.pdf',

    // Evaluate Professional features (page contents will be watermarked)
    licenseKey: 'eval',

    // Configure the UI:
    allowedControls: {
      // Enable or disable annotation tools (all false by default):
      ellipseTool: true,
      freehandDrawingTool: true,
      freehandSignatureTool: true,
      lineTool: true,
      rectangleTool: true,
      textHighlightTool: true,

      // Enable or disable other parts of the UI (all true by default):
      fullScreenToggle: true,
      nextAndPreviousPageButtons: true,
      pageNumberAndCount: true,
      printing: true,
      search: true,
      thumbnails: true,
      zoomInAndOutButtons: true
    }
  });
})();

Use a Script Tag Instead

As an alternative to import, you can also use PdfViewerControl via a script tag.

To do this, either:

• Host the bundle.js included in the @accusoft/pdf-viewer npm package and load it in your page with a script tag:

  <script src="path/to/bundle.js"></script>
  

• Reference the bundle.js file using a popular npm CDN, like jsdelivr.net:

  <script src="https://cdn.jsdelivr.net/npm/@accusoft/pdf-viewer@3/bundle.js"></script>
  

This will attach the viewer creation API to window so you can use it (window.Accusoft.PdfViewerControl).

Then, create the viewer:

<script>
  (async () => {
    // Create a viewer
    window.myViewer = await window.Accusoft.PdfViewerControl.create({
      container: document.getElementById('myContainer'),

      // URL or Uint8Array for a PDF
      sourceDocument: 'https://yourdomain.com/documents/example.pdf'
    });
  })();
</script>

Optionally, use a licenseKey of 'eval' to evaluate Professional features, enabling the allowedControls you want, such as annotation tools:

<script>
  (async () => {
    // Create a viewer
    window.myViewer = await window.Accusoft.PdfViewerControl.create({
      container: document.getElementById('myContainer'),

      // URL or Uint8Array for a PDF
      sourceDocument: 'https://yourdomain.com/documents/example.pdf',

      // Evaluate Professional features (page contents will be watermarked)
      licenseKey: 'eval',

      // Configure the UI:
      allowedControls: {
        // Enable or disable annotation tools (all false by default):
        ellipseTool: true,
        freehandDrawingTool: true,
        freehandSignatureTool: true,
        lineTool: true,
        rectangleTool: true,
        textHighlightTool: true,

        // Enable or disable other parts of the UI (all true by default):
        fullScreenToggle: true,
        nextAndPreviousPageButtons: true,
        pageNumberAndCount: true,
        printing: true,
        search: true,
        thumbnails: true,
        zoomInAndOutButtons: true
      }
    });
  })();
</script>

Samples

• Using in a React app
• Using in plain HTML via CDN

Documentation

For complete documentation, click here.

Feedback

Submit suggestions and feature requests to https://ideas.accusoft.com/

Report issues or bugs to https://issues.accusoft.com

Support Plans

Paid support is available:

• For the free Standard edition, basic support is available for a charge.
• For the paid Professional edition, support is included with an annual license. Additional levels of support are also available as an upgrade.

Contact us for more information about our support packages.

Questions

Email [e-mail] or call 1-800-875-7009.