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
• 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
  • sidebar: boolean - display sidebar on load

ECMAScript module

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");

CommonJS

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");

CDN

<div id="viewer-container"></div>
<script src="https://unpkg.com/pdf-generator-api-pdfviewer@latest/dist/PDFViewer.iife.js"></script>
<script>
  const { PDFViewer } = PDFGeneratorApi;

  const viewer = new PDFViewer({
    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

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

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

Sidebar:

• sidebar: (boolean)
  • Default: true

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,
    sidebar: 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,
  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-added	Triggered after a signature has been added to the document.
signature-click-outside	Triggered after a user clicked outside the signature area.

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;
    case Event.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