PDF viewer by PDF Generator API
npm install pdf-generator-api-pdfviewerPDFViewer 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.
loadUrl(string) - load PDF from an URLloadBase64(string) - load PDF from a base64 encoded stringgetBase64() - get base64 encoded PDFsetOptions(object) - update optionstheme: Theme - set viewer themeinitialScale: Scale - set initial page scaletoolbarFontSize: number - set toolbar font sizetoolbarIconSize: number - set toolbar icon sizescaleDropdown: boolean - display scaling optionssearch: boolean - enable search buttonsignature: boolean - enable signature buttonprint: boolean - enable print buttondownload: boolean - enable download buttonupload: boolean - enable upload file button``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");
`
`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");
`
`html`
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);
`
| Theme.Dark | Theme.PDFApi)
Default*: Theme.LightInitial page scale:
* initialScale: (
Scale.AutomaticZoom | Scale.ActualSize | Scale.PageFit | Scale.PageWidth | number)
Default*: Scale.PageFitToolbar font size:
* toolbarFontSize: (
number):
* Ranged from 10 to 24
Default*: 16Toolbar icon size:
* toolbarIconSize: (
16 | 24 | 32 | 48):
Default*: 24Page scale dropdown:
* scaleDropdown: (
boolean):
Default*: trueSearching:
* search: (
boolean):
Default*: trueAdding signature:
* signature: (
boolean):
Default*: falsePrinting:
* print: (
boolean):
Default*: trueDownloading:
* download: (
boolean):
Default*: trueUploading:
* 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.PDFViewer is an open source project and always looking for more contributors.
+ https://github.com/pdfgeneratorapi/pdfviewer/issues/new