PDF LIVE
'PDF LIVE' is a PDF viewer that extends the open source 'mozilla/pdf.js'. You can start the PDF viewer with toolbar right away with 'PDF LIVE'.
npm i pdf-liveCurrently v1.0.19 • Install • Quick Start • Usage • PDFLiveElement API • GitHub repo • Changelog
Demo
Quickly start a project from a demo, ranging from partial use of a PDF live to an event or theme.
Light theme
A light theme is a hight-light UI that displays mostly light surfaces.
Dark theme
A dark theme is a low-light UI that displays mostly dark surfaces.
Password protected
If you are working with sensitive information, you need to protect it. Password protect PDFs to prevent unauthorized access.
The correct password for the demo is "password".
Password protection with async listener
Check for correct passwords on the server side.
The correct password for the demo is "password".
Various Events
Demonstration of various PDF Live events.
Install
Install with npm:
npm i pdf-liveQuick Start
CSS
Copy-paste the stylesheet <link> into your <head> to load our CSS.
<link rel="stylesheet" href="node_modules/pdf-live/dist/pdf-live.css">HTML
Copy-paste the icon <link> into your <head> to load our Favicon.
This step is not required. If you do not wish to set a favicon, skip this step.
<link rel="icon" type="image/svg+xml" href="node_modules/pdf-live/dist/favicon.svg">Copy-paste the <pdf-live> into your <body> to load our PDF live.
<pdf-live src="sample.pdf" lang="en" worker="node_modules/pdf-live/dist/pdf.worker.js"></pdf-live>JS
For ES6
To use PDF Live in ES6, simply import the PDF Live ESM module.
<script type="module">
import './node_modules/pdf-live/dist/pdf-live.esm.js';
</script>For ES5
To use PDF Live in ES5, please load the UMD module of PDF Live with <script> tag.
<script src="node_modules/pdf-live/dist/pdf-live.js"></script>Usage
The following example references a PDF live element from within the JS code and sets the event.
// Find the PDFLive node.
const pdflive = document.querySelector('pdf-live');
// Set event listener for PDF Live.
pdflive
.on('documentLoaded', () => {
// PDF document loaded.
console.log('Loaded PDF document');
})
.on('pageChange', pageNum => {
// Page change event.
console.log(`Opened page ${pageNum}`);
});PDFLiveElement API
The PDFLiveElement interface provides special properties and methods for manipulating PDF objects. It also inherits properties and methods of HTMLElement.
Properties
This interface also inherits properties from its ancestors HTMLElement, Element, Node, and EventTarget.
-
srcrequiredURL of the PDF document. -
workerrequiredThe path of the web walker to handle time-consuming tasks such as parsing and rendering PDF documents.
Set the path to "node_modules/pdf-live/dist/pdf.worker.js" installed by npm. -
langLanguages used within PDF Live.
You can use any of de, en, es, fr, it, ja, ko, nl, pt_br, ru, zh_cn, zh_tw.
If omitted, en is used (default). -
protectedThe protected attribute password-protects PDF documents.
If this attribute is added, a password prompt will be raised before loading the document.When using the protected attribute, the PDF live node must have apasswordEnterevent. -
titleThe title name of the document.
This is used as the title to display on the page, browser tab name, print file name, and download file name.
If the title attribute is not used, the file name contained in the document URL is used. -
cmapFor PDFs using special fonts such as Japanese, specify "node_modules/pdf-live/dist/cmaps" as an absolute path in the cmap attribute to prevent garbled characters.
Examples
<pdf-live src="sample.pdf" worker="node_modules/pdf-live/dist/pdf.worker.js" cmap="/node_modules/pdf-live/dist/cmaps"></pdf-live>
Methods
This interface also inherits methods from its ancestors HTMLElement, Element, Node, and EventTarget.
-
on()The on() method sets up a function that will be called whenever the specified event is delivered to the target.
Syntax
on(type, listener);Parameters
-
typeThe type of event to listen for.
Can be one of pageChange, documentLoaded, or passwordEnter. -
listenerThe function that receives a notification when an event of the specified type occurs.
Return value
PDFLiveElement.
-
-
getCurrentPageNumber()Returns the current page number.
Syntax
getCurrentPageNumber();Parameters
None.
Return value
Current page number.
-
print()Print Documentation.
Syntax
print();Parameters
None.
-
download()Download Documentation.
Syntax
download();Parameters
None.
Events
Inherits methods from its parent, HTMLElement , defined in the GlobalEventHandlers mixin.
Listen to these events using on() or addEventListener().
-
documentLoadedFired when the PDF document has been loaded.
Examples
const pdflive = document.querySelector('pdf-live'); pdflive.on('documentLoaded', () => { console.log('Loaded PDF document'); }); -
pageChangeFired when the page number being viewed is changed.
Examples
const pdflive = document.querySelector('pdf-live'); pdflive.on('pageChange', pageNum => { console.log(`Opened page ${pageNum}`); }); -
passwordEnterFired when user enters password.
To password protect a PDF, the PDF live node must have theprotectedattribute.Examples
const pdflive = document.querySelector('pdf-live'); pdflive.on('passwordEnter', password => { // Returns true if the password entered is correct. return password === 'password'; });If you want to check for correct passwords server-side, return Promise in the listener.
const pdflive = document.querySelector('pdf-live'); pdflive.on('passwordEnter', async password => { // Request correct password. const correctPassword = await (await fetch('Correct Password.txt')).text(); // Returns true if the password entered is correct. return correctPassword === password; });
Changelog
Changelog is available here.