Accusoft PDF Viewer
npm install @accusoft/pdf-viewerAccusoft 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.
!Accusoft PDF Viewer Illustration
Click here for a live demo.
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.
``bash`
npm install @accusoft/pdf-viewer
Define a container DOM element on your page where you want the viewer to exist:
`html`
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:
`html`
Import PdfViewerControl and create a viewer:
`js
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:
`js
(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
}
});
})();
`
As an alternative to import, you can also use PdfViewerControl via ascript tag.
To do this, either:
- Host the bundle.js included in the @accusoft/pdf-viewer npm package andscript
load it in your page with a tag:
`html`
- Reference the bundle.js file using a popular npm CDN, like jsdelivr.net:
`html`
This will attach the viewer creation API to window so you can use it (window.Accusoft.PdfViewerControl).
Then, create the viewer:
`html`
Optionally, use a licenseKey of 'eval' to evaluate Professional features, enabling the allowedControls you want, such as annotation tools:
`html``
- Using in a React app
- Using in plain HTML via CDN
For complete documentation, click here.
Submit suggestions and feature requests to https://ideas.accusoft.com/
Report issues or bugs to https://issues.accusoft.com
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.
Email info@accusoft.com or call 1-800-875-7009.