@accusoft/pdf-viewer
Version:
Accusoft PDF Viewer
199 lines (142 loc) • 6.12 kB
Markdown
[](https://www.accusoft.com/products/pdf-collection/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.
[](https://accusoft.github.io/hello-accusoft-pdf-viewer-via-cdn/) 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](https://www.accusoft.com/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
<!-- 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 in the `head` of your HTML which ensures the viewport is kept the same size as the device screen:
```html
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
```
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 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:
```html
<script src="path/to/bundle.js"></script>
```
- Reference the `bundle.js` file using a popular npm CDN, like jsdelivr.net:
```html
<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:
```html
<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:
```html
<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>
```
- [Using in a React app](https://github.com/Accusoft/hello-accusoft-pdf-viewer-with-react)
- [Using in plain HTML via CDN](https://github.com/Accusoft/hello-accusoft-pdf-viewer-via-cdn)
For complete documentation, [click here](https://help.accusoft.com/accusoft-pdf-viewer/latest/).
Submit suggestions and feature requests to [https://ideas.accusoft.com/](https://ideas.accusoft.com/?project=PDFV)
Report issues or bugs to [https://issues.accusoft.com](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.
[](https://www.accusoft.com/contact-us/) for more information about our support packages.
Email [info@accusoft.com](mailto:info@accusoft.com) or call 1-800-875-7009.