@accusoft/pdf-viewer

Accusoft PDF Viewer is a free JavaScript library that easily integrates into your web application with just a few lines of code. With a responsive UI that performs equally well on desktop and mobile, this PDF solution brings an optimized document viewing experience to your users, regardless of device. As an entirely client-side integration, you can get up and running quickly without configuring any server components or installing any plug-ins. Accusoft PDF Viewer’s lightning fast search capabilities and high quality rendering make it easier than ever for developers to provide dynamic PDF viewing capabilities.

Usage no npm install needed!

<script type="module">
  import accusoftPdfViewer from 'https://cdn.skypack.dev/@accusoft/pdf-viewer';
</script>

README

Accusoft PDF Viewer

Accusoft PDF Viewer is a free JavaScript library that easily integrates into your web application with just a few lines of code. With a responsive UI that performs equally well on desktop and mobile, this PDF solution brings an optimized document viewing experience to your users, regardless of device. As an entirely client-side integration, you can get up and running quickly without configuring any server components or installing any plug-ins. Accusoft PDF Viewer’s lightning fast search capabilities and high quality rendering make it easier than ever for developers to provide dynamic PDF viewing capabilities.

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'
  });
})();

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'
    });
  })();
</script>

Samples

API Reference

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: issues.accusoft.com