PDF Viewer by PDF Generator API

PDFViewer is a library to display and interact with PDF documents in web applications,
offering features such as document loading via URL and base64 encoded strings.

!PDF Viewer

Installing PDFViewer

$3

$ npm install pdf-generator-api-pdfviewer

$3

$ yarn add pdf-generator-api-pdfviewer

Using PDFViewer

$3

* loadUrl(string) - load PDF from an URL
* loadBase64(string) - load PDF from a base64 encoded string
* getBase64() - get base64 encoded PDF
* setOptions(object) - update options
* theme: Theme - set viewer theme
* initialScale: Scale - set initial page scale
* toolbarFontSize: number - set toolbar font size
* toolbarIconSize: number - set toolbar icon size
* scaleDropdown: boolean - display scaling options
* search: boolean - enable search button
* signature: boolean - enable signature button
* print: boolean - enable print button
* download: boolean - enable download button
* upload: boolean - enable upload file button

$3

``javascript

import { PDFViewer } from "pdf-generator-api-pdfviewer";

const viewer = new PDFViewer({
container: document.getElementById("viewer-container"),
});

viewer.loadUrl("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf");
`

$3

`javascript
const { PDFViewer } = require("pdf-generator-api-pdfviewer");

const viewer = new PDFViewer({
container: document.getElementById("viewer-container"),
});

viewer.loadUrl("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf");
`

$3

`html





`

Loading PDF documents

The PDF Viewer library loads documents from various sources:

+ URL

`typescript
const viewer = new PDFViewer({
container: document.getElementById("viewer-container"),
})

viewer.loadUrl("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf");
`

+ Base64 Encoded String

`typescript
const viewer = new PDFViewer({
container: document.getElementById("viewer-container"),
})

const base64encodedPdf =
"JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog" +
"IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv" +
"TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K" +
"Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg" +
"L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+" +
"PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u" +
"dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq" +
"Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU" +
"CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu" +
"ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g" +
"CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw" +
"MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v" +
"dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G";

viewer.loadBase64(base64encodedPdf);
`

Available options


PDFViewer theme:
* theme: (Theme.Light | Theme.Dark | Theme.PDFApi)
Default*: Theme.Light

Initial page scale:
* initialScale: (Scale.AutomaticZoom | Scale.ActualSize | Scale.PageFit | Scale.PageWidth | number)
Default*: Scale.PageFit

Toolbar font size:
* toolbarFontSize: (number):
* Ranged from 10 to 24
Default*: 16

Toolbar icon size:
* toolbarIconSize: (16 | 24 | 32 | 48):
Default*: 24

Page scale dropdown:
* scaleDropdown: (boolean):
Default*: true

Searching:
* search: (boolean):
Default*: true

Adding signature:
* signature: (boolean):
Default*: false

Printing:
* print: (boolean):
Default*: true

Downloading:
* download: (boolean):
Default*: true

Uploading:
* upload: (boolean):
Default*: true

`typescript
import { PDFViewer, Scale, Theme } from "pdf-generator-api-pdfviewer";

// Initialize options in the constructor
const viewer = new PDFViewer({
container: document.getElementById("viewer-container") as HTMLElement,
options: {
theme: Theme.Light,
initialScale: Scale.PageFit,
toolbarFontSize: 16,
toolbarIconSize: 24,
scaleDropdown: true,
search: true,
signature: true,
print: true,
download: true,
upload: true,
},
});

// Or set them using API function
viewer.setOptions({
theme: Theme.Light,
initialScale: Scale.PageFit,
toolbarFontSize: 16,
toolbarIconSize: 24,
scaleDropdown: true,
search: true,
signature: true,
print: true,
download: true,
upload: true,
});
`

Available events

Events are dispatched as window.postMessage messages with an object containing a type
field (matching one of the event names).

| Event | Description |
|:------------------------|:------------------------------------------------------------|
| document-uploaded | Triggered after a PDF file has been successfully uploaded. |
| document-saved | Triggered after the current PDF file has been saved. |
| document-updated | Triggered after the current PDF file has been updated. |
| document-printed | Triggered after the current PDF file has been printed. |
| signature-added | Triggered after a signature has been added to the document. |

`typescript
const viewer = new PDFViewer({
container: document.getElementById("viewer-container"),
})

viewer.loadUrl("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf");

window.addEventListener("message", async (event) => {
switch (event.data.type) {
case Event.DocumentUploaded:
console.log("Triggered after a PDF file has been successfully uploaded.");
break;
case Event.DocumentSaved:
console.log("Triggered after the current PDF file has been saved.");
break;
case Event.DocumentUpdated:
console.log("Triggered after the current PDF file has been updated.");
break;
case Event.DocumentPrinted:
console.log("Triggered after the current PDF file has been printed.");
break;
case Event.SignatureAdded:
console.log("Triggered after a signature has been added to the document.");
break;
}
});
`

Examples

Complete code examples can be found in the examples folder.

* Webpack
* ESBuild
* Rollup
* Parcel
* Browserify

Building PDF Viewer

To apply customization changes and build the library, run:

$ npm run build


This will compile minified files in the dist` directory.

Contributing

PDFViewer is an open source project and always looking for more contributors.

Issues

+ https://github.com/pdfgeneratorapi/pdfviewer/issues/new