pdf-viewer

PDF viewer for web base on pdf.js.

Usage

Step1

Copy node_modules/web-pdf-viewer/cmaps to public directory

Step2

import PDFViewer from 'web-pdf-viewer';

const pv = new PDFViewer({
  cmaps: {url from step1}
});
pv.addEventListener('load', (e) => {...});
pv.destroy();

PDFViewer Option

property	type	required	description
container	HTMLElement	N	Container
url	string	N	pdf file url
data	TypedArray,Array,String	N	pdf binary data
file	File	N	Local file
gap	number	N	Gap between container and content
cmaps	string	N	Chars url
isRenderText	boolean	N	Render text layer
containerBackground	string	N	Container background
borderStyle	string	N	Border style. '1px solid red'
logTitle	string	N	Log title for different files
pdfjsParams	Object	N	Same as parameter of pdfjsLib.getDocument

Method

• PDFViewer.prototype.addEventListener(eventName: string, handler: Function)Add event listener
• PDFViewer.prototype.removeEventListener(eventName: string, handler: Function)Remove event listener.
• PDFViewer.prototype.getPDFInfo(): ObjectPDF infomation
• PDFViewer.prototype.scrollTo(page: number, pageTop: number, cb?: Function)Scroll
• PDFViewer.prototype.highlight({page: number, x: number, y: number, w: number, h: number, highlightClass?: string', attrs: {[key: string]: string}}): StringSet highlight
• PDFViewer.prototype.removeHighlight(page: number, id: String)Delete highlight. Delete all while id is not passed
• PDFViewer.prototype.highlightFocus(page: number, id: string, highlightFocusClass?: string')Focus on highlight area
• PDFViewer.prototype.highlightBlur(page, id)Highlight area blur
• PDFViewer.prototype.renderPage(page: number, width: number, cb: (canvas) => {}, devicePixelCompatible = true)Render one page
• PDFViewer.prototype.resize(width?: number)Resize page width.
• PDFViewer.prototype.destroy()Destroy instance

Event

online - Rendered on page
offline - Rendered offline
both - Both online and offline

• loadPDFViewer is ready (both)

class PVLoadEvent {
    pv: PDFViewer;
}

• pagechangePage changed (online)

class PVPageChangeEvent {
    pv: PDFViewer;
    page: number;
    totalPages: number;
}

• highlightclickClick highlight area (online)

type highlightList = Array<{page: number, id: Symbol}>;

class PVHighlightClickEvent {
    pv: PDFViewer;
    highlights: highlightList;

    stopPropagation() {}
}

• pageresizePage size changed (online)

type pageSizes = {
    [prop: number]: {
        w: number
        h: number
    }
};

class PVPageResizeEvent {
    pv: PDFViewer;
    pageSizes: pageSizes;
}

• scrollScroll event (online)

class PVScrollEvent {
    pv: PDFViewer;
    scrollTop: number;
    scrollLeft: number;
}

Changelog

changelog