pdfjskit

1.1.1
Need help reading this?

PdfViewer

The viewer component to display PDF files. Renders PDF.js viewer in an iframe but updates UI theme and structure for a neat and fast experience.

new PdfViewer(options: Object)

Extends EventTarget

Parameters
options (Object) The options for PdfViewer class.
Name Description
options.id String (default "pdfViewer") The id that will be used for DOM element of this component in the page. If the id is already used, it will be incremented like pdfViewer2...pdfViewerX .
options.hidden Boolean (default false) A value indicating whether the component is displayed when page is loaded. When set to false, the component can be displayed later via calling PdfViewer#show method. For example, the component can be displayed via a button's click event.
options.width (Number | String) (default 960) The width of the component. If it's a number it will be treated as pixels, if it's a string it will be treated as CSS units (e.g. "80%" , "36rem" ).
options.height (Number | String) (default 720) The height of the component. If it's a number it will be treated as pixels, if it's a string it will be treated as CSS units (e.g. "80%" , "36rem" ).
options.border Boolean (default true) A value indicating whether the component should haver borders.
options.resizable Boolean (default true) A value that specifies if the component can be resized when the user drags sides.
options.libraryPath String (default "pdfjskit") The path from where the component should load its assets (css, images etc.). Relative paths will be considered relative to the host page. If not set, script version (.js) will try to use same directory of the script, module version (.mjs) will use "pdfjskit" .
options.language String (default "en-US") The display (user interface) language of the component. It can be set to the two-letter language names like "en" , "de" , "fr" etc. or to specific languages like "en-US" , "de-DE" , "fr-FR" etc.
options.license Object (default null) The license info (JSON) you received when you purchased. The evaluation version is the same as the purchased one – the trial version simply becomes licensed when you apply the license. If not set, you will see license reminder every time you load a document. 
{
  license: {
    "key": "42U44-A8W3U-0TG5A-66C4F-3AA0E-776A0",
    "owner": "*.example.com",
    "date": "2024-09-01",
    "product": "PdfJSKit",
    "type": "Professional",
    "version": "1.0"
  }
}
options.documentUrl (String | URL) (default "") The url of the PDF to open on load. Relative paths will be considered relative to the host page.
options.documentData (PdfJs#TypedArray | ArrayBuffer | Array<number> | string) (default null) The binary data of the PDF to open on load. If binary data is provided, then it will be used first instead of documentUrl .

Use TypedArrays (Uint8Array) to improve the memory usage. If PDF data is BASE64-encoded, use atob() to convert it to a binary string first.

NOTE: If TypedArrays are used they will generally be transferred to the worker-thread. This will help reduce main-thread memory usage, however it will take ownership of the TypedArrays.
options.documentPassword String (default null) The password of the PDF to open on load, for decrypting password-protected PDFs.
options.documentSize Number (default null) The file size of the PDF to open on load, if known. It's used for progress reports and range requests operations.
options.zoomMode (String | Number) (default "") The initial mode for zooming pages in the viewer. Possible values are "auto" , "page-actual" , "page-width" , "page-height" , "page-fit" (case insensitive and dashes can be omitted) or a percentage string like "80%" or a percentage number like 80 . If not set, the document's zoom level will be remembered per document via browser's local storage. The history will start with "auto" .
options.scrollMode String (default "unknown") The initial mode for scrolling pages in the viewer. Possible values are "vertical" , "horizontal" , "wrapped" , "page" (case insensitive). If not set, the document's scroll mode will be remembered per document via browser's local storage. The history will start with "vertical" .
Note that if rememberViewHistory is set to false , then it can be derived from 'PageLayout' setting inside PDF if exists.
options.spreadMode String (default "unknown") The initial mode for spreading pages in the viewer. Possible values are "none" , "odd" , "even" (case insensitive). If not set, the document's spread mode will be remembered per document via browser's local storage. The history will start with "none" . Note that if rememberViewHistory is set to false , then it can be derived from 'PageLayout' setting inside PDF if exists.
options.sidebarView String (default "unknown") The initial active view in sidebar of the viewer. Possible values are "none" , "thumbs" , "outline" , "attachments" , "layers" (case insensitive). If not set, the sidebar view will be remembered per document via browser's local storage. The history will start with "none" . Note that if rememberViewHistory is set to false , then it can be derived from 'PageMode' setting inside PDF if exists.
options.cursorTool String (default "select") The initial cursor tool in the viewer. Possible values are "select" , "hand" (case insensitive).
options.rotationMode String (default "all-pages") A value that specifies whether rotate buttons should only rotate all pages or only the currently viewed page. Possible values are "all-pages" , "current-page" (case insensitive and dashes can be omitted).
options.rememberViewHistory Boolean (default true) A value that specifies whether for each document fingerprint, the viewer should remember UI state via browser's local storage, i.e. last viewed page, zoom level, scroll position, rotation, sidebarView , scrollMode , spreadMode . If you want the viewer to discard any view history entries and always load all documents at the first page (and with default zoom values), then you should set this property to false .
options.toolbarVisible Boolean (default true) A value that specifies whether the top toolbar is visible.
options.sidebarVisible Boolean (default true) A value that specifies whether the left sidebar is visible.
options.verticalToolbarVisible Boolean (default true) A value that specifies whether the right vertical toolbar is visible.
options.toolbarAtBottom Boolean (default false) A value that specifies whether the top toolbar should be placed at the bottom instead.
options.theme String (default "slate, classic-dark") The theme to use for the viewer. Possible values are "slate" , "classic-light" , "classic-dark" or the CSS class name of a custom theme. When two values separated by comma is set, the second value will be the dark theme. Dark theme is used when a user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting. When single value is provided, dark theme is disabled, i.e. the only provided theme will be used always even when user prefers dark mode.
options.mobileMode String (default "on-any") A value that specifies on which mobile device type to use large UI sizing for the viewer. Possible values are "on-any" , "on-phone" , "on-tablet" , "never" (case insensitive and dashes can be omitted). Note that device features are not detected, instead browser's viewport size is used to decide the UI sizing. So if you manually resize the browser window (or emulate a device via browser's F12 dev tools), phone or tablet size can be triggered.
options.events Object? The event handlers to register. An event handler can be a function or name of the function in string. String function name should refer to a valid JavaScript function which is accessible on the host page. String Function names should be specified without parentheses like "FunctionName" or "Namespace.FunctionName". 
events: {
  loaded: showEvent,
  failed: "functionNameInHostPage"
}

function showEvent(e) {
  var json = JSON.stringify(e.detail, null, 2);

  //console.log(e.target);
  //console.log(e.type);
  console.log(json);
}
options.events.loaded (Function | String) (default null) The event raised when the viewer has been loaded. 
//SAMPLE OUTPUT:
{
  "eventName": "loaded"
}
options.events.failed (Function | String) (default null) The event raised when an error occurs. 
//SAMPLE OUTPUT:
{
  "eventName": "failed",
  "document": "document.pdf",
  "message": "Invalid or corrupted PDF file.",
  "reason": "Invalid PDF structure.",
  "isResponseError": false
}
options.events.documentLoaded (Function | String) (default null) The event raised when a document has been loaded. 
//SAMPLE OUTPUT:
{
  "eventName": "documentLoaded",
  "document": "document.pdf"
}
options.events.pageChanged (Function | String) (default null) The event raised when viewed page is changed. 
//SAMPLE OUTPUT:
{
  "eventName": "pageChanged",
  "document": "document.pdf",
  "pageNumber": 2,
  "pageLabel": null,
  "previous": 1
}
options.events.pageRendered (Function | String) (default null) The event raised when a page had finished rendering. 
//SAMPLE OUTPUT:
{
  "eventName": "pageRendered",
  "document": "document.pdf",
  "pageNumber": 1,
  "cssTransform": false,
  "timestamp": 1426.5,
  "error": null
}
options.events.rotationChanged (Function | String) (default null) The event raised when page rotation is changed. 
//SAMPLE OUTPUT:
{
  "eventName": "rotationChanged",
  "document": "document.pdf",
  "pagesRotation": 90,
  "pageNumber": 2,
  "pageRotation": 90
}
options.events.downloading (Function | String) (default null) The event raised before user downloads the original document or PDF version. 
//SAMPLE OUTPUT:
{
  "eventName": "downloading",
  "document": "document.pdf",
  "isFromKeyboard": false,
  "downloadType": "pdf"
}
options.events.printing (Function | String) (default null) The event raised before user prints the document. 
//SAMPLE OUTPUT:
{
  "eventName": "printing",
  "document": "document.pdf",
  "totalPages": 91
}
options.events.printed (Function | String) (default null) The event raised when printing is completed. 
//SAMPLE OUTPUT:
{
  "eventName": "printed",
  "document": "document.pdf",
  "totalPages": 91
}
options.events.textSelected (Function | String) (default null) The event raised when user selects text in the document. 
//SAMPLE OUTPUT:
{
  "eventName": "textSelected",
  "document": "document.pdf",
  "text": "We are intently focused on implementing new and innovative strategies "
}
options.events.textCopied (Function | String) (default null) The event raised when user copies the selected text in the document. 
//SAMPLE OUTPUT:
{
  "eventName": "textCopied",
  "document": "document.pdf",
  "text": "We are grateful for the recent enactment of the substantial multi-year funding"
}
options.permissions Object? The permissions for the viewer to enable/disable corresponding UI elements.
options.permissions.viewThumbnails Boolean (default true) Ability to view thumbnails for the document pages.
options.permissions.viewOutlines Boolean (default true) Ability to view outlines of the document.
options.permissions.viewAttachments Boolean (default true) Ability to view attachments of the document.
options.permissions.viewLayers Boolean (default true) Ability to view layers of the document.
options.permissions.navigatePages Boolean (default true) Ability to navigate pages, e.g. next page, previous page and jump to page.
options.permissions.zoom Boolean (default true) Ability to zoom in or out of the document.
options.permissions.changeZoomMode Boolean (default true) Ability to change zoom mode of the document, e.g. fit width, fit page etc.
options.permissions.find Boolean (default true) Ability to find text within the document.
options.permissions.downloadOriginal Boolean (default false) Ability to download the original document. Downloading can be disabled for security (DRM) purpose.
options.permissions.save Boolean (default true) Ability to save the document, if there are changes like new annotations, these will be included. Saving can be disabled for additional security (DRM) purpose.
options.permissions.print Boolean (default true) Ability to print the displayed document. Printing can be disabled for additional security (DRM) purpose.
options.permissions.open Boolean (default true) Ability to open local PDF files, i.e. user is shown "Open" menu item which is when clicked shows browser's open dialog to choose a PDF file to load.
options.permissions.goFullScreen Boolean (default true) Ability to switch the viewer to full screen.
options.permissions.goPresentationMode Boolean (default true) Ability to switch the viewer to presentation mode.
options.permissions.viewProperties Boolean (default true) Ability to view properties of the document.
options.permissions.selectText Boolean (default true) Ability to select and copy text in the displayed document Text selection can be disabled for additional security (DRM) purpose.
options.permissions.pan Boolean (default true) Ability to pan the document.
options.permissions.rotate Boolean (default true) Ability to rotate the page or document, e.g. rotate clockwise and rotate counterclockwise.
options.permissions.changeScrollMode Boolean (default true) Ability to change scroll mode of the document, e.g. vertical, horizontal etc.
options.permissions.changeSpreadMode Boolean (default true) Ability to change spread mode of the document, e.g. odd, even etc.
options.permissions.viewAnnotations Boolean (default true) Ability to view and edit annotations of the document.
options.permissions.fillForms Boolean (default true) Ability to fill values into form fields of the document. Requires also ViewAnnotations permission.
options.searchOptions Object? The text search options of the viewer. If you specify a search term, an automatic search will be done when the document is displayed, i.e. the specified term will be searched and the term(s) will be highlighted in the pages. For example, if you launch the viewer from a search results page, you can pass the same search term to the viewer.
options.searchOptions.term String (default "") A value that specifies the search term used.
options.searchOptions.matchCase Boolean (default false) The search should be case-sensitive, i.e. the found text must match the case of the search term.
options.searchOptions.matchDiacritics Boolean (default false) The search should match the letters with diacritics (accents), e.g u matches also ü . Diacritics, often loosely called accents , are the various little dots and squiggles which, in many languages, are written above, below or on top of certain letters of the alphabet to indicate something about their pronunciation.
options.searchOptions.matchWholeWord Boolean (default false) The search should match the whole word only, i.e the found text must be a whole word (surrounded by a non-word character). (e.g. "doc" matches " doc " or ".doc" but not "document").
options.searchOptions.matchAnyWord Boolean (default false) The search should match the term as a whole or match any word in the term separately (e.g. "bicycle bells" or "bicycle" or "bells").
options.searchOptions.highlightColor String (default "#FFFF00") The color to use for highlighting search results. Default is yellow.
options.searchOptions.activeHighlightColor String (default "#FFA500") The color to use for highlighting active (current) search result. Default is orange.
options.searchOptions.highlightAll Boolean (default true) A value that specifies whether to highlight all search results, i.e. not only active (current) search result.
options.printOptions Object? The print options of the viewer.
options.printOptions.resolution Number (default 150) A value in percentage that specifies the resolution (quality level) used when printing. The default level ensures excellent quality but may cause slow printing for some documents, you can decrease the level to increase the printing speed while maintaining an acceptable quality for your case.
options.printOptions.autoRotate Boolean (default true) A value that specifies whether to enable automatic rotation of landscape pages upon printing. Note that most browsers may already auto-rotate pages when printing.
options.translations Object? A value that specifies the custom translations for the viewer. The viewer has about 111 language files, however for some few custom text which are not inside those language files, this property is used to override. For example, you can override the default "Rotation Mode" message for localization purpose. 
translations: {
  "en": {
    "preparing-document": "Preparing document...",
    "cover-sheet": "Cover Sheet",
    "rotation-mode": "Rotation Mode",
    "rotation-mode-title": "Rotation Mode (rotate current page or all pages)",
    "full-screen": "Full Screen",
    "download-original": "Download Original",
    "any-word": "Any Word"
  },
  "de": {
    "any-word": "Jedes Wort"
  }
}
Example
import PdfViewer from "pdfjskit";
 
var pdfViewer = new PdfViewer({
  documentUrl: "pdfjskit/sample.pdf",
  width: "80%",
  height: 720,
  resizable: true,
  language: "en-US",
  theme: "slate, classic-dark"
});

pdfViewer.render(document.getElementById("container"));
Instance Members
▸ zoomMode
▸ scrollMode
▸ spreadMode
▸ sidebarView
▸ cursorTool
▸ rotationMode
▸ pagesCount
▸ page
▸ pagesRotation
▸ pageRotation
▸ fileName
▸ theme
▸ language
▸ license
▸ element
▸ render(target?, position)
▸ show()
▸ hide()
▸ destroy()
▸ open(args, attachmentTreeNode?)
▸ close()
▸ save()
▸ saveAsBinary(discardEdits)
▸ saveAsBlob(discardEdits)
▸ downloadOriginal()
▸ rotateCurrentPage(delta)
▸ rotateAllPages(delta)
▸ toggleFullScreen()

PdfJs

PDF.js related type definitions.

PdfJs
Instance Members
▸ DocumentInitParameters