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.

Installing PDFViewer

npm

$ npm install pdf-generator-api-pdfviewer

yarn

$ yarn add pdf-generator-api-pdfviewer

Using PDFViewer

API

• loadUrl(string) - load PDF from an URL
• loadBase64(string) - load PDF from a base64 encoded string
• getBase64() - get base64 encoded PDF
• startSignatureFlow(params) - open the signature dialog programmatically
• cancelSignatureFlow() - close the signature dialog
• setActiveSignatureField(signatureId) - activates the signature placeholder with the specified ID
• 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 feature (toolbar button and dialog)
  • signatureButton: boolean - show/hide the signature toolbar button
  • print: boolean - enable print button
  • download: boolean - enable download button
  • upload: boolean - enable upload file button
  • sidebar: boolean - display sidebar on load

ECMAScript module

import{PDFViewer}from"pdf-generator-api-pdfviewer";constviewer=newPDFViewer({container: document.getElementById("viewer-container"),});viewer.loadUrl("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf");

CommonJS

const{ PDFViewer }=require("pdf-generator-api-pdfviewer");constviewer=newPDFViewer({container: document.getElementById("viewer-container"),});viewer.loadUrl("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf");

CDN

<divid="viewer-container"></div><scriptsrc="https://unpkg.com/pdf-generator-api-pdfviewer@latest/dist/PDFViewer.iife.js"></script><script>const{ PDFViewer }=PDFGeneratorApi;constviewer=newPDFViewer({container: document.getElementById("viewer-container"),});viewer.loadUrl("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf");</script>

Loading PDF documents

The PDF Viewer library loads documents from various sources:

• URL

constviewer=newPDFViewer({container: document.getElementById("viewer-container"),})viewer.loadUrl("https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf");

• Base64 Encoded String

constviewer=newPDFViewer({container: document.getElementById("viewer-container"),})constbase64encodedPdf="JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog"+"IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv"+"TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K"+"Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg"+"L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+"+"PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u"+"dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq"+"Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU"+"CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu"+"ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g"+"CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw"+"MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v"+"dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G";viewer.loadBase64(base64encodedPdf);

Listen for the lifecycle via postMessage events: signature-requested, signature-added, signature-cancelled, signature-click-outside. See Available events.

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

Signature toolbar button:

• signatureButton: (boolean):
  • Default: true

Printing:

• print: (boolean):
  • Default: true

Downloading:

• download: (boolean):
  • Default: true

Uploading:

• upload: (boolean):
  • Default: true

Sidebar:

• sidebar: (boolean)
  • Default: true

import{PDFViewer,Scale,Theme}from"pdf-generator-api-pdfviewer";// Initialize options in the constructorconstviewer=newPDFViewer({container: document.getElementById("viewer-container")asHTMLElement,options: {theme: Theme.Light,initialScale: Scale.PageFit,toolbarFontSize: 16,toolbarIconSize: 24,scaleDropdown: true,search: true,signature: true,signatureButton: true,print: true,download: true,upload: true,sidebar: true,},});// Or set them using API functionviewer.setOptions({theme: Theme.Light,initialScale: Scale.PageFit,toolbarFontSize: 16,toolbarIconSize: 24,scaleDropdown: true,search: true,signature: true,signatureButton: true,print: true,download: true,upload: true,sidebar: 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-requested	Triggered when the signer requests to sign the document.
signature-added	Triggered after a signature has been added to the document.
signature-cancelled	Triggered after a signature flow has been cancelled.
signature-click-outside	Triggered after a user clicked outside the signature area.

constviewer=newPDFViewer({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){caseEvent.DocumentUploaded:
console.log("Triggered after a PDF file has been successfully uploaded.");break;caseEvent.DocumentSaved:
console.log("Triggered after the current PDF file has been saved.");break;caseEvent.DocumentUpdated:
console.log("Triggered after the current PDF file has been updated.");break;caseEvent.DocumentPrinted:
console.log("Triggered after the current PDF file has been printed.");break;caseEvent.SignatureRequested:
console.log("Triggered when the signer requests to sign the document.");break;caseEvent.SignatureAdded:
console.log("Triggered after a signature has been added to the document.");break;caseEvent.SignatureCancelled:
console.log("Triggered after a signature flow has been cancelled.");break;caseEvent.SignatureClickOutside:
console.log("Triggered after a user clicked outside the signature area.");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