@kariudo/ng2-pdfjs-viewer
Version:
An angular component for displaying pdfs, wrapping the latest Mozilla PDF.js.
510 lines (505 loc) • 19.9 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
class PdfJsViewerComponent {
iframe;
static lastID = 0;
viewerId = `ng2-pdfjs-viewer-ID${++PdfJsViewerComponent.lastID}`;
onBeforePrint = new EventEmitter();
onAfterPrint = new EventEmitter();
onDocumentLoad = new EventEmitter();
onPageChange = new EventEmitter();
onScaleChange = new EventEmitter();
onRotationChange = new EventEmitter();
viewerFolder;
externalWindow = false;
target = '_blank';
showSpinner = true;
downloadFileName;
/** Display open file button in secondary toolbar menu. */
openFile = true;
/** Display annotations/editor controls on toolbar. */
annotations = false;
download = true;
startDownload;
viewBookmark = true;
print = true;
startPrint;
fullScreen = true;
//@Input() public showFullScreen: boolean;
find = true;
zoom;
nameddest;
pagemode;
lastPage;
rotatecw;
rotateccw;
cursor;
scroll;
spread;
locale;
useOnlyCssZoom = false;
errorOverride = false;
errorAppend = true;
errorMessage;
diagnosticLogs = false;
externalWindowOptions;
viewerTab;
_src;
_page;
set page(_page) {
this._page = _page;
if (this.PDFViewerApplication) {
this.PDFViewerApplication.page = this._page;
}
else {
if (this.diagnosticLogs)
console.warn("Document is not loaded yet!!!. Try to set page# after full load. Ignore this warning if you are not setting page# using '.' notation. (E.g. pdfViewer.page = 5;)");
}
}
get page() {
if (this.PDFViewerApplication) {
return this.PDFViewerApplication.page;
}
else {
if (this.diagnosticLogs)
console.warn("Document is not loaded yet!!!. Try to retrieve page# after full load.");
}
}
set pdfSrc(_src) {
this._src = _src;
}
get pdfSrc() {
return this._src;
}
get PDFViewerApplicationOptions() {
let pdfViewerOptions = null;
if (this.externalWindow) {
if (this.viewerTab) {
pdfViewerOptions = this.viewerTab.PDFViewerApplicationOptions;
}
}
else {
if (this.iframe.nativeElement.contentWindow) {
pdfViewerOptions = this.iframe.nativeElement.contentWindow.PDFViewerApplicationOptions;
}
}
return pdfViewerOptions;
}
get PDFViewerApplication() {
let pdfViewer = null;
if (this.externalWindow) {
if (this.viewerTab) {
pdfViewer = this.viewerTab.PDFViewerApplication;
}
}
else {
if (this.iframe.nativeElement.contentWindow) {
pdfViewer = this.iframe.nativeElement.contentWindow.PDFViewerApplication;
}
}
if (this.diagnosticLogs)
console.debug("PdfJsViewer: Viewer ->", pdfViewer);
return pdfViewer;
}
ngOnInit() {
// Load PDF for embedded views.
if (!this.externalWindow) {
this.loadPdf();
}
// Bind events.
this.bindToPdfJsEventBus();
}
/**
* Waits for the PDF.js viewer to be ready, and binds the the event bus.
*/
bindToPdfJsEventBus() {
document.addEventListener("webviewerloaded", () => {
if (this.diagnosticLogs)
console.debug("PdfJsViewer: webviewerloaded event received");
if (!this.PDFViewerApplication) {
if (this.diagnosticLogs)
console.debug("PdfJsViewer: Viewer not yet (or no longer) available, events can not yet be bound.");
return;
}
this.PDFViewerApplication.initializedPromise.then(() => {
// Configure the controls.
const app = this.configureVisibleFeatures();
const eventBus = app.eventBus;
// Once initialized, attach the events.
// Document Loaded.
eventBus.on("documentloaded", () => {
if (this.diagnosticLogs)
console.debug("PdfJsViewer: The document has now been loaded!");
this.onDocumentLoad.emit();
});
// Pages init.
eventBus.on("pagesinit", () => {
if (this.diagnosticLogs)
console.debug("PdfJsViewer: All pages have been rendered!");
});
// Before print.
eventBus.on("beforeprint", () => {
if (this.diagnosticLogs)
console.debug("PdfJsViewer: The document is about to be printed!");
this.onBeforePrint.emit();
});
// After print.
eventBus.on("afterprint", () => {
if (this.diagnosticLogs)
console.debug("PdfJsViewer: The document has been printed!");
this.onAfterPrint.emit();
});
// Page change.
eventBus.on("pagechanging", (event) => {
if (this.diagnosticLogs)
console.debug("PdfJsViewer: The page has changed:", event.pageNumber);
this.onPageChange.emit(event.pageNumber);
});
// Rotation change.
eventBus.on("rotationchanging", (event) => {
const newRotation = {
rotation: event.pagesRotation,
page: event.pageNumber
};
if (this.diagnosticLogs)
console.debug("PdfJsViewer: The rotation has changed!", event);
this.onRotationChange.emit(newRotation);
});
// Scale change.
eventBus.on("scalechanging", (event) => {
const newScale = event.scale;
if (this.diagnosticLogs)
console.debug("PdfJsViewer: The document has scale has changed!", newScale);
this.onScaleChange.emit(newScale);
});
});
});
}
configureVisibleFeatures() {
const app = this.PDFViewerApplication;
const toolbarElement = app.appConfig.secondaryToolbar.toolbar;
// Display of "open file" button.
app.appConfig.secondaryToolbar.openFileButton.hidden = !this.openFile;
// Hide the horizontal separator in the menu if the control is hidden.
toolbarElement.querySelector('.horizontalToolbarSeparator').hidden = !this.openFile;
// Display of annotations/editor controls.
app.appConfig.toolbar.editorFreeTextButton.hidden = !this.annotations;
app.appConfig.toolbar.editorStampButton.hidden = !this.annotations;
app.appConfig.toolbar.editorInkButton.hidden = !this.annotations;
app.appConfig.toolbar.editorHighlightButton.hidden = !this.annotations;
return app;
}
refresh() {
this.loadPdf();
}
relaseUrl; // Avoid memory leak with `URL.createObjectURL`
loadPdf() {
if (!this._src) {
return;
}
if (this.externalWindow && (typeof this.viewerTab === 'undefined' || this.viewerTab.closed)) {
this.viewerTab = window.open('', this.target, this.externalWindowOptions || '');
if (this.viewerTab == null) {
console.error("ng2-pdfjs-viewer: For 'externalWindow = true'. i.e opening in new tab to work, pop-ups should be enabled.");
return;
}
if (this.showSpinner) {
this.viewerTab.document.write(`
<style>
.loader {
position: fixed;
left: 40%;
top: 40%;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="loader"></div>
`);
}
}
this.relaseUrl?.();
let fileUrl;
if (this._src instanceof Blob) {
const url = URL.createObjectURL(this._src);
fileUrl = encodeURIComponent(url);
this.relaseUrl = () => URL.revokeObjectURL(url);
}
else if (this._src instanceof Uint8Array) {
let blob = new Blob([this._src], { type: "application/pdf" });
const url = URL.createObjectURL(blob);
this.relaseUrl = () => URL.revokeObjectURL(url);
fileUrl = encodeURIComponent(url);
}
else {
fileUrl = this._src;
}
let viewerUrl;
if (this.viewerFolder) {
viewerUrl = `${this.viewerFolder}/web/viewer.html`;
}
else {
viewerUrl = `assets/pdfjs/web/viewer.html`;
}
viewerUrl += `?file=${fileUrl}`;
if (typeof this.viewerId !== 'undefined') {
viewerUrl += `&viewerId=${this.viewerId}`;
}
if (typeof this.onBeforePrint !== 'undefined') {
viewerUrl += `&beforePrint=true`;
}
if (typeof this.onAfterPrint !== 'undefined') {
viewerUrl += `&afterPrint=true`;
}
if (typeof this.onDocumentLoad !== 'undefined') {
viewerUrl += `&pagesLoaded=true`;
}
if (typeof this.onPageChange !== 'undefined') {
viewerUrl += `&pageChange=true`;
}
if (this.downloadFileName) {
if (!this.downloadFileName.endsWith(".pdf")) {
this.downloadFileName += ".pdf";
}
viewerUrl += `&fileName=${this.downloadFileName}`;
}
if (typeof this.openFile !== 'undefined') {
viewerUrl += `&openFile=${this.openFile}`;
}
if (typeof this.download !== 'undefined') {
viewerUrl += `&download=${this.download}`;
}
if (this.startDownload) {
viewerUrl += `&startDownload=${this.startDownload}`;
}
if (typeof this.viewBookmark !== 'undefined') {
viewerUrl += `&viewBookmark=${this.viewBookmark}`;
}
if (typeof this.print !== 'undefined') {
viewerUrl += `&print=${this.print}`;
}
if (this.startPrint) {
viewerUrl += `&startPrint=${this.startPrint}`;
}
if (typeof this.fullScreen !== 'undefined') {
viewerUrl += `&fullScreen=${this.fullScreen}`;
}
// if (this.showFullScreen) {
// viewerUrl += `&showFullScreen=${this.showFullScreen}`;
// }
if (typeof this.find !== 'undefined') {
viewerUrl += `&find=${this.find}`;
}
if (this.lastPage) {
viewerUrl += `&lastpage=${this.lastPage}`;
}
if (this.rotatecw) {
viewerUrl += `&rotatecw=${this.rotatecw}`;
}
if (this.rotateccw) {
viewerUrl += `&rotateccw=${this.rotateccw}`;
}
if (this.cursor) {
viewerUrl += `&cursor=${this.cursor}`;
}
if (this.scroll) {
viewerUrl += `&scroll=${this.scroll}`;
}
if (this.spread) {
viewerUrl += `&spread=${this.spread}`;
}
if (this.locale) {
viewerUrl += `&locale=${this.locale}`;
}
if (this.useOnlyCssZoom) {
viewerUrl += `&useOnlyCssZoom=${this.useOnlyCssZoom}`;
}
if (this._page || this.zoom || this.nameddest || this.pagemode)
viewerUrl += "#";
if (this._page) {
viewerUrl += `&page=${this._page}`;
}
if (this.zoom) {
viewerUrl += `&zoom=${this.zoom}`;
}
if (this.nameddest) {
viewerUrl += `&nameddest=${this.nameddest}`;
}
if (this.pagemode) {
viewerUrl += `&pagemode=${this.pagemode}`;
}
if (this.errorOverride || this.errorAppend) {
viewerUrl += `&errorMessage=${this.errorMessage}`;
if (this.errorOverride) {
viewerUrl += `&errorOverride=${this.errorOverride}`;
}
if (this.errorAppend) {
viewerUrl += `&errorAppend=${this.errorAppend}`;
}
}
if (this.externalWindow) {
this.viewerTab.location.href = viewerUrl;
}
else {
this.iframe.nativeElement.contentWindow.location.replace(viewerUrl);
}
if (this.diagnosticLogs) {
console.debug(`PdfJsViewer: Viewer URL configuration:
pdfSrc = ${this.pdfSrc}
fileUrl = ${fileUrl}
externalWindow = ${this.externalWindow}
downloadFileName = ${this.downloadFileName}
viewerFolder = ${this.viewerFolder}
openFile = ${this.openFile}
download = ${this.download}
startDownload = ${this.startDownload}
viewBookmark = ${this.viewBookmark}
print = ${this.print}
startPrint = ${this.startPrint}
fullScreen = ${this.fullScreen}
find = ${this.find}
lastPage = ${this.lastPage}
rotatecw = ${this.rotatecw}
rotateccw = ${this.rotateccw}
cursor = ${this.cursor}
scrollMode = ${this.scroll}
spread = ${this.spread}
page = ${this.page}
zoom = ${this.zoom}
nameddest = ${this.nameddest}
pagemode = ${this.pagemode}
errorOverride = ${this.errorOverride}
errorAppend = ${this.errorAppend}
errorMessage = ${this.errorMessage}
`);
}
}
ngOnDestroy() {
this.relaseUrl?.();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: PdfJsViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: PdfJsViewerComponent, isStandalone: true, selector: "ng2-pdfjs-viewer", inputs: { viewerId: "viewerId", viewerFolder: "viewerFolder", externalWindow: "externalWindow", target: "target", showSpinner: "showSpinner", downloadFileName: "downloadFileName", openFile: "openFile", annotations: "annotations", download: "download", startDownload: "startDownload", viewBookmark: "viewBookmark", print: "print", startPrint: "startPrint", fullScreen: "fullScreen", find: "find", zoom: "zoom", nameddest: "nameddest", pagemode: "pagemode", lastPage: "lastPage", rotatecw: "rotatecw", rotateccw: "rotateccw", cursor: "cursor", scroll: "scroll", spread: "spread", locale: "locale", useOnlyCssZoom: "useOnlyCssZoom", errorOverride: "errorOverride", errorAppend: "errorAppend", errorMessage: "errorMessage", diagnosticLogs: "diagnosticLogs", externalWindowOptions: "externalWindowOptions", page: "page", pdfSrc: "pdfSrc" }, outputs: { onBeforePrint: "onBeforePrint", onAfterPrint: "onAfterPrint", onDocumentLoad: "onDocumentLoad", onPageChange: "onPageChange", onScaleChange: "onScaleChange", onRotationChange: "onRotationChange" }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true, static: true }], ngImport: i0, template: `<iframe title="ng2-pdfjs-viewer" [hidden]="externalWindow || (!externalWindow && !pdfSrc)" #iframe width="100%" height="100%"></iframe>`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: PdfJsViewerComponent, decorators: [{
type: Component,
args: [{
selector: 'ng2-pdfjs-viewer',
template: `<iframe title="ng2-pdfjs-viewer" [hidden]="externalWindow || (!externalWindow && !pdfSrc)" #iframe width="100%" height="100%"></iframe>`
}]
}], propDecorators: { iframe: [{
type: ViewChild,
args: ['iframe', { static: true }]
}], viewerId: [{
type: Input
}], onBeforePrint: [{
type: Output
}], onAfterPrint: [{
type: Output
}], onDocumentLoad: [{
type: Output
}], onPageChange: [{
type: Output
}], onScaleChange: [{
type: Output
}], onRotationChange: [{
type: Output
}], viewerFolder: [{
type: Input
}], externalWindow: [{
type: Input
}], target: [{
type: Input
}], showSpinner: [{
type: Input
}], downloadFileName: [{
type: Input
}], openFile: [{
type: Input
}], annotations: [{
type: Input
}], download: [{
type: Input
}], startDownload: [{
type: Input
}], viewBookmark: [{
type: Input
}], print: [{
type: Input
}], startPrint: [{
type: Input
}], fullScreen: [{
type: Input
}], find: [{
type: Input
}], zoom: [{
type: Input
}], nameddest: [{
type: Input
}], pagemode: [{
type: Input
}], lastPage: [{
type: Input
}], rotatecw: [{
type: Input
}], rotateccw: [{
type: Input
}], cursor: [{
type: Input
}], scroll: [{
type: Input
}], spread: [{
type: Input
}], locale: [{
type: Input
}], useOnlyCssZoom: [{
type: Input
}], errorOverride: [{
type: Input
}], errorAppend: [{
type: Input
}], errorMessage: [{
type: Input
}], diagnosticLogs: [{
type: Input
}], externalWindowOptions: [{
type: Input
}], page: [{
type: Input
}], pdfSrc: [{
type: Input
}] } });
class PdfJsViewerModule {
static forRoot() {
return {
ngModule: PdfJsViewerModule,
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: PdfJsViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: PdfJsViewerModule, imports: [CommonModule, PdfJsViewerComponent], exports: [PdfJsViewerComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: PdfJsViewerModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: PdfJsViewerModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, PdfJsViewerComponent],
exports: [PdfJsViewerComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PdfJsViewerComponent, PdfJsViewerModule };
//# sourceMappingURL=kariudo-ng2-pdfjs-viewer.mjs.map