Options
All
  • Public
  • Public/Protected
  • All
Menu

Accusoft PDF Viewer Documentation

Accusoft PDF Viewer is a JavaScript SDK that easily integrates into your web application to enable PDF viewing and markup with no server dependencies. We now have two versions available - a free to use Standard version that includes basic viewing features and a Professional version with enhanced paid functionality like annotation and eSignature. Note: in order to evaluate the Professional features, you will need a trial key which you can request here. You can also email info@accusoft.com or call us at 1-800-875-7009 for more information on our paid product and licensing.

Click here for a live demo

Accusoft PDF Viewer Illustration

Quick Start

Install This Package

npm install @accusoft/pdf-viewer

Make Sure You Have Defined a Viewport Meta Tag for Mobile

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

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

Without this, the viewer UI may appear very small and be unusable on a mobile device (if you are already developing a web application for mobile, you likely already have a tag like this defined).

Create a Container Element

Define a container DOM element on your page which you want to become a PDF viewer:

<div id="myContainer" style="height: 800px;"></div>
// Note: Make sure the container has a set height

Import and Create a Viewer

Import PdfViewerControl and create a viewer:

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

(async () => {
  const pdfViewer = await PdfViewerControl.create({
    container: document.getElementById('myContainer'),
    sourceDocument: 'https://yourdomain.com/documents/example.pdf',
    licenseKey: 'YOUR_LICENSE_KEY' // Optional
  });
})();

Note that sourceDocument can be a URL to a PDF, a data URL for a PDF, or a Uint8Array binary of a PDF.

Use a Script Tag Instead

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

To do this, host the bundle.js (included in this package) and load it in your page with a script tag:

<script src="path/to/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 type="text/javascript">
  (async () => {
    const pdfViewer = await window.Accusoft.PdfViewerControl.create({
      container: document.getElementById('myContainer'),
      sourceDocument: 'https://yourdomain.com/documents/example.pdf',
      licenseKey: 'YOUR_LICENSE_KEY' // Optional
    });
  })();
</script>

Samples

API Reference

NOTE: Error Messages and Details Subject to Change in Future Releases

We want your development experience with PDF Viewer to be great. As part of that, we try to give you useful, actionable errors.

In order to continuously improve the development experience, we may make changes to error messages and error details from release to release. As such, you should consider all error messages and error details returned from our API to be informational only and subject to change.

The one exception to this is an error's name property. We treat an error name as an identifier for the kind of error that occurred, and we consider any changes to this value to be a breaking change. If your application needs to take conditional action based on an error, it should only rely upon the value of an error's name.

Aside from name, all other properties on an error produced by our API (message, expected, etc.) should be considered informational only, subject to change in any future release, and intended only to help you during development.

Feedback

Please report suggestions and feature requests at: https://ideas.accusoft.com/

Have additional questions? Contact us at: info@accusoft.com

Please report issues or bugs at: https://issues.accusoft.com