From 8651716786e3ebe0d89bc53a0ee73bab32fabd9a Mon Sep 17 00:00:00 2001 From: Vadym Yatsyuk Date: Wed, 16 Aug 2017 22:48:46 +0200 Subject: [PATCH] Closes #94, added on-progress callback --- README.md | 19 +++++++++++++++ build/app/app.component.css | 23 ++++++++++++++++++- build/app/app.component.d.ts | 4 ++++ build/app/app.component.html | 8 +++++++ build/app/app.component.js | 11 ++++++++- build/app/app.component.js.map | 2 +- build/app/app.component.metadata.json | 2 +- build/pdf-viewer/pdf-viewer.component.d.ts | 1 + build/pdf-viewer/pdf-viewer.component.js | 8 ++++++- build/pdf-viewer/pdf-viewer.component.js.map | 2 +- .../pdf-viewer.component.metadata.json | 2 +- src/app/app.component.css | 23 ++++++++++++++++++- src/app/app.component.html | 8 +++++++ src/app/app.component.ts | 18 ++++++++++++++- src/pdf-viewer/pdf-viewer.component.ts | 9 +++++++- 15 files changed, 130 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 589c0b15f..4b152797f 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,7 @@ export class AppComponent { * [show-all](#show-all) * [after-load-complete](#after-load-complete) * [error](#error) +* [on-progress](#on-progress) #### [src] *accepts: string, object, UInt8Array* @@ -197,6 +198,24 @@ Then add it to `pdf-component` in component's template (error)="onError($event)" ``` +#### (on-progress) + +Loading progress callback - provides progress information `total` and `loaded` bytes. Is called several times during pdf loading phase. + +Define callback in your component's class + +```ts +onProgress(progressData: PDFProgressData) { + // do anything with progress data. For example progress indicator +} +``` + +Then add it to `pdf-component` in component's template + +```html +(on-progress)="onProgress($event)" +``` + ## Contribute Clone the project diff --git a/build/app/app.component.css b/build/app/app.component.css index e49202bbe..4f1f64739 100644 --- a/build/app/app.component.css +++ b/build/app/app.component.css @@ -35,4 +35,25 @@ pdf-viewer { .error { color: #ff4146; -} \ No newline at end of file +} + +#progress { + margin-top: 50px; + width: 100px; + text-align: center; + margin-left: auto; + margin-right: auto; +} +#progress .bar, +#progress .bg { + height: 20px; +} +#progress .bg { + background-color: #e3e3e3; +} +#progress .bar { + width: 0; + max-width: 100%; + background-color: #3f51b5; + transition: .5s width; +} diff --git a/build/app/app.component.d.ts b/build/app/app.component.d.ts index cf427d583..e6c21cc8b 100644 --- a/build/app/app.component.d.ts +++ b/build/app/app.component.d.ts @@ -9,10 +9,14 @@ export declare class AppComponent { showAll: boolean; pdf: any; renderText: boolean; + progressData: PDFProgressData; + isLoaded: boolean; incrementPage(amount: number): void; incrementZoom(amount: number): void; rotate(angle: number): void; onFileSelected(): void; afterLoadComplete(pdf: PDFDocumentProxy): void; onError(error: any): void; + onProgress(progressData: PDFProgressData): void; + getInt(value: number): number; } diff --git a/build/app/app.component.html b/build/app/app.component.html index a3d5c8919..9371b8b4a 100755 --- a/build/app/app.component.html +++ b/build/app/app.component.html @@ -109,6 +109,13 @@

Angular 2 PDF Viewer

+
+
+
+
+ {{ getInt(progressData.loaded / progressData.total * 100) }}% +
+ Angular 2 PDF Viewer [zoom]="zoom" [render-text]="renderText" (error)="onError($event)" + (on-progress)="onProgress($event)" > diff --git a/build/app/app.component.js b/build/app/app.component.js index 712dd4b16..b2370636a 100644 --- a/build/app/app.component.js +++ b/build/app/app.component.js @@ -10,6 +10,7 @@ var AppComponent = (function () { this.originalSize = false; this.showAll = true; this.renderText = true; + this.isLoaded = false; } AppComponent.prototype.incrementPage = function (amount) { this.page += amount; @@ -32,12 +33,20 @@ var AppComponent = (function () { } }; AppComponent.prototype.afterLoadComplete = function (pdf) { - this.error = null; this.pdf = pdf; + this.isLoaded = true; }; AppComponent.prototype.onError = function (error) { this.error = error; }; + AppComponent.prototype.onProgress = function (progressData) { + this.progressData = progressData; + this.isLoaded = false; + this.error = null; + }; + AppComponent.prototype.getInt = function (value) { + return Math.round(value); + }; return AppComponent; }()); AppComponent.decorators = [ diff --git a/build/app/app.component.js.map b/build/app/app.component.js.map index 9fe0fb808..20b292fb5 100644 --- a/build/app/app.component.js.map +++ b/build/app/app.component.js.map @@ -1 +1 @@ -{"version":3,"sources":["../../src/app/app.component.ts"],"names":[],"mappings":";;AAGA,sCAA0C;AAI1C;IAAA;QAEE,WAAM,GAAW,gBAAgB,CAAC;QAYlC,SAAI,GAAW,CAAC,CAAC;QACjB,aAAQ,GAAW,CAAC,CAAC;QACrB,SAAI,GAAW,GAAG,CAAC;QACnB,iBAAY,GAAY,KAAK,CAAC;QAC9B,YAAO,GAAY,IAAI,CAAC;QAExB,eAAU,GAAY,IAAI,CAAC;IA2D7B,CAAC;IAzDC,oCAAa,GAAb,UAAc,MAAc;QAC1B,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC;IACtB,CAAC;IAED,oCAAa,GAAb,UAAc,MAAc;QAC1B,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC;IACtB,CAAC;IAED,6BAAM,GAAN,UAAO,KAAa;QAClB,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;IACzB,CAAC;IAKD,qCAAc,GAAd;QAAA,iBAYC;QAXC,IAAI,IAAI,GAAQ,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAEhD,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC;YACxC,IAAI,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;YAE9B,MAAM,CAAC,MAAM,GAAG,UAAC,CAAM;gBACrB,KAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;YAChC,CAAC,CAAC;YAEF,MAAM,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAMD,wCAAiB,GAAjB,UAAkB,GAAqB;QACrC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IACjB,CAAC;IAOD,8BAAO,GAAP,UAAQ,KAAU;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAYH,mBAAC;AAAD,CA/EA,AA+EC;AAXM,uBAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC;gBACxB,QAAQ,EAAE,MAAM,CAAC,EAAE;gBACnB,QAAQ,EAAE,gBAAgB;gBAC1B,WAAW,EAAE,sBAAsB;gBACnC,SAAS,EAAE,CAAC,qBAAqB,CAAC;aACnC,EAAG,EAAE;CACL,CAAC;AAEK,2BAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AA9EW,oCAAY","file":"app.component.js","sourceRoot":"","sourcesContent":["/**\n * Created by vadimdez on 21/06/16.\n */\nimport { Component } from '@angular/core';\n\n\n\nexport class AppComponent {\n\n pdfSrc: string = './pdf-test.pdf';\n\n // or pass options as object\n // pdfSrc: any = {\n // url: './pdf-test.pdf',\n // withCredentials: true,\n //// httpHeaders: { // cross domain\n //// 'Access-Control-Allow-Credentials': true\n //// }\n // };\n\n error: any;\n page: number = 1;\n rotation: number = 0;\n zoom: number = 1.0;\n originalSize: boolean = false;\n showAll: boolean = true;\n pdf: any;\n renderText: boolean = true;\n\n incrementPage(amount: number) {\n this.page += amount;\n }\n\n incrementZoom(amount: number) {\n this.zoom += amount;\n }\n\n rotate(angle: number) {\n this.rotation += angle;\n }\n\n /**\n * Render PDF preview on selecting file\n */\n onFileSelected() {\n let $img: any = document.querySelector('#file');\n\n if (typeof (FileReader) !== 'undefined') {\n let reader = new FileReader();\n\n reader.onload = (e: any) => {\n this.pdfSrc = e.target.result;\n };\n\n reader.readAsArrayBuffer($img.files[0]);\n }\n }\n\n /**\n * Get pdf information after it's loaded\n * @param pdf\n */\n afterLoadComplete(pdf: PDFDocumentProxy) {\n this.error = null; // clear error\n this.pdf = pdf;\n }\n\n /**\n * Handle error callback\n *\n * @param error\n */\n onError(error: any) {\n this.error = error; // set error\n }\nstatic decorators: DecoratorInvocation[] = [\n{ type: Component, args: [{\n moduleId: module.id,\n selector: 'pdf-viewer-app',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.css']\n}, ] },\n];\n/** @nocollapse */\nstatic ctorParameters: () => ({type: any, decorators?: DecoratorInvocation[]}|null)[] = () => [\n];\n}\n\ninterface DecoratorInvocation {\n type: Function;\n args?: any[];\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../../src/app/app.component.ts"],"names":[],"mappings":";;AAGA,sCAA0C;AAI1C;IAAA;QAEE,WAAM,GAAW,gBAAgB,CAAC;QAYlC,SAAI,GAAW,CAAC,CAAC;QACjB,aAAQ,GAAW,CAAC,CAAC;QACrB,SAAI,GAAW,GAAG,CAAC;QACnB,iBAAY,GAAY,KAAK,CAAC;QAC9B,YAAO,GAAY,IAAI,CAAC;QAExB,eAAU,GAAY,IAAI,CAAC;QAE3B,aAAQ,GAAY,KAAK,CAAC;IAyE5B,CAAC;IAvEC,oCAAa,GAAb,UAAc,MAAc;QAC1B,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC;IACtB,CAAC;IAED,oCAAa,GAAb,UAAc,MAAc;QAC1B,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC;IACtB,CAAC;IAED,6BAAM,GAAN,UAAO,KAAa;QAClB,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;IACzB,CAAC;IAKD,qCAAc,GAAd;QAAA,iBAYC;QAXC,IAAI,IAAI,GAAQ,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAEhD,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC;YACxC,IAAI,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;YAE9B,MAAM,CAAC,MAAM,GAAG,UAAC,CAAM;gBACrB,KAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;YAChC,CAAC,CAAC;YAEF,MAAM,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAMD,wCAAiB,GAAjB,UAAkB,GAAqB;QACrC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAOD,8BAAO,GAAP,UAAQ,KAAU;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAMD,iCAAU,GAAV,UAAW,YAA6B;QACtC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAED,6BAAM,GAAN,UAAO,KAAa;QAClB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAYH,mBAAC;AAAD,CA/FA,AA+FC;AAXM,uBAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC;gBACxB,QAAQ,EAAE,MAAM,CAAC,EAAE;gBACnB,QAAQ,EAAE,gBAAgB;gBAC1B,WAAW,EAAE,sBAAsB;gBACnC,SAAS,EAAE,CAAC,qBAAqB,CAAC;aACnC,EAAG,EAAE;CACL,CAAC;AAEK,2BAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AA9FW,oCAAY","file":"app.component.js","sourceRoot":"","sourcesContent":["/**\n * Created by vadimdez on 21/06/16.\n */\nimport { Component } from '@angular/core';\n\n\n\nexport class AppComponent {\n\n pdfSrc: string = './pdf-test.pdf';\n\n // or pass options as object\n // pdfSrc: any = {\n // url: './pdf-test.pdf',\n // withCredentials: true,\n //// httpHeaders: { // cross domain\n //// 'Access-Control-Allow-Credentials': true\n //// }\n // };\n\n error: any;\n page: number = 1;\n rotation: number = 0;\n zoom: number = 1.0;\n originalSize: boolean = false;\n showAll: boolean = true;\n pdf: any;\n renderText: boolean = true;\n progressData: PDFProgressData;\n isLoaded: boolean = false;\n\n incrementPage(amount: number) {\n this.page += amount;\n }\n\n incrementZoom(amount: number) {\n this.zoom += amount;\n }\n\n rotate(angle: number) {\n this.rotation += angle;\n }\n\n /**\n * Render PDF preview on selecting file\n */\n onFileSelected() {\n let $img: any = document.querySelector('#file');\n\n if (typeof (FileReader) !== 'undefined') {\n let reader = new FileReader();\n\n reader.onload = (e: any) => {\n this.pdfSrc = e.target.result;\n };\n\n reader.readAsArrayBuffer($img.files[0]);\n }\n }\n\n /**\n * Get pdf information after it's loaded\n * @param pdf\n */\n afterLoadComplete(pdf: PDFDocumentProxy) {\n this.pdf = pdf;\n this.isLoaded = true;\n }\n\n /**\n * Handle error callback\n *\n * @param error\n */\n onError(error: any) {\n this.error = error; // set error\n }\n\n /**\n * Pdf loading progress callback\n * @param {PDFProgressData} progressData\n */\n onProgress(progressData: PDFProgressData) {\n this.progressData = progressData;\n this.isLoaded = false;\n this.error = null; // clear error\n }\n\n getInt(value: number): number {\n return Math.round(value);\n }\nstatic decorators: DecoratorInvocation[] = [\n{ type: Component, args: [{\n moduleId: module.id,\n selector: 'pdf-viewer-app',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.css']\n}, ] },\n];\n/** @nocollapse */\nstatic ctorParameters: () => ({type: any, decorators?: DecoratorInvocation[]}|null)[] = () => [\n];\n}\n\ninterface DecoratorInvocation {\n type: Function;\n args?: any[];\n}\n"]} \ No newline at end of file diff --git a/build/app/app.component.metadata.json b/build/app/app.component.metadata.json index a63919f96..e8af479bf 100644 --- a/build/app/app.component.metadata.json +++ b/build/app/app.component.metadata.json @@ -1 +1 @@ -[{"__symbolic":"module","version":3,"metadata":{"AppComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"pdf-viewer-app","templateUrl":"./app.component.html","styleUrls":["./app.component.css"]}]}],"members":{"incrementPage":[{"__symbolic":"method"}],"incrementZoom":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"onFileSelected":[{"__symbolic":"method"}],"afterLoadComplete":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"AppComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"pdf-viewer-app","templateUrl":"./app.component.html","styleUrls":["./app.component.css"]}]}],"members":{"incrementPage":[{"__symbolic":"method"}],"incrementZoom":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"onFileSelected":[{"__symbolic":"method"}],"afterLoadComplete":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}]}}}}] \ No newline at end of file +[{"__symbolic":"module","version":3,"metadata":{"AppComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"pdf-viewer-app","templateUrl":"./app.component.html","styleUrls":["./app.component.css"]}]}],"members":{"incrementPage":[{"__symbolic":"method"}],"incrementZoom":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"onFileSelected":[{"__symbolic":"method"}],"afterLoadComplete":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"getInt":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"AppComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"pdf-viewer-app","templateUrl":"./app.component.html","styleUrls":["./app.component.css"]}]}],"members":{"incrementPage":[{"__symbolic":"method"}],"incrementZoom":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"onFileSelected":[{"__symbolic":"method"}],"afterLoadComplete":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"getInt":[{"__symbolic":"method"}]}}}}] \ No newline at end of file diff --git a/build/pdf-viewer/pdf-viewer.component.d.ts b/build/pdf-viewer/pdf-viewer.component.d.ts index cb37ddca0..ab04c5a7d 100644 --- a/build/pdf-viewer/pdf-viewer.component.d.ts +++ b/build/pdf-viewer/pdf-viewer.component.d.ts @@ -13,6 +13,7 @@ export declare class PdfViewerComponent implements OnChanges { private resizeTimeout; afterLoadComplete: EventEmitter; onError: EventEmitter; + onProgress: EventEmitter; constructor(element: ElementRef); src: string | Uint8Array | PDFSource; page: any; diff --git a/build/pdf-viewer/pdf-viewer.component.js b/build/pdf-viewer/pdf-viewer.component.js index 1f595a011..c5616e038 100644 --- a/build/pdf-viewer/pdf-viewer.component.js +++ b/build/pdf-viewer/pdf-viewer.component.js @@ -14,6 +14,7 @@ var PdfViewerComponent = (function () { this._rotation = 0; this.afterLoadComplete = new core_1.EventEmitter(); this.onError = new core_1.EventEmitter(); + this.onProgress = new core_1.EventEmitter(); this.pageChange = new core_1.EventEmitter(true); } Object.defineProperty(PdfViewerComponent.prototype, "page", { @@ -95,7 +96,11 @@ var PdfViewerComponent = (function () { if (!this.src) { return; } - PDFJS.getDocument(this.src) + var loadingTask = PDFJS.getDocument(this.src); + loadingTask.onProgress = function (progressData) { + _this.onProgress.emit(progressData); + }; + loadingTask.promise .then(function (pdf) { _this._pdf = pdf; _this.afterLoadComplete.emit(pdf); @@ -175,6 +180,7 @@ PdfViewerComponent.ctorParameters = function () { return [ PdfViewerComponent.propDecorators = { 'afterLoadComplete': [{ type: core_1.Output, args: ['after-load-complete',] },], 'onError': [{ type: core_1.Output, args: ['error',] },], + 'onProgress': [{ type: core_1.Output, args: ['on-progress',] },], 'src': [{ type: core_1.Input },], 'page': [{ type: core_1.Input, args: ['page',] },], 'pageChange': [{ type: core_1.Output },], diff --git a/build/pdf-viewer/pdf-viewer.component.js.map b/build/pdf-viewer/pdf-viewer.component.js.map index fec394cf7..c7aecbb27 100644 --- a/build/pdf-viewer/pdf-viewer.component.js.map +++ b/build/pdf-viewer/pdf-viewer.component.js.map @@ -1 +1 @@ -{"version":3,"sources":["../../src/pdf-viewer/pdf-viewer.component.ts"],"names":[],"mappings":"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","file":"pdf-viewer.component.js","sourceRoot":"","sourcesContent":["/**\n * Created by vadimdez on 21/06/16.\n */\nimport {\n Component, Input, Output, ElementRef, EventEmitter, OnChanges, SimpleChanges\n} from '@angular/core';\nimport 'pdfjs-dist/build/pdf.combined';\nPDFJS.verbosity = (PDFJS).VERBOSITY_LEVELS.errors;\n\n\n\nexport class PdfViewerComponent implements OnChanges {\n private _showAll: boolean = false;\n private _renderText: boolean = true;\n private _originalSize: boolean = true;\n private _pdf: PDFDocumentProxy;\n private _page: number = 1;\n private _zoom: number = 1;\n private _rotation: number = 0;\n private resizeTimeout: NodeJS.Timer;\n\n afterLoadComplete = new EventEmitter();\n onError = new EventEmitter();\n\n constructor(private element: ElementRef) {}\n\n \n src: string | Uint8Array | PDFSource;\n\n \n set page(_page) {\n _page = parseInt(_page, 10);\n\n if (this._pdf && !this.isValidPageNumber(_page)) {\n _page = 1;\n }\n\n this._page = _page;\n this.pageChange.emit(_page);\n }\n\n pageChange: EventEmitter = new EventEmitter(true);\n\n \n set renderText(renderText: boolean) {\n this._renderText = renderText;\n }\n\n \n set originalSize(originalSize: boolean) {\n this._originalSize = originalSize;\n }\n\n \n set showAll(value: boolean) {\n this._showAll = value;\n }\n\n \n set zoom(value: number) {\n if (value <= 0) {\n return;\n }\n\n this._zoom = value;\n }\n\n get zoom() {\n return this._zoom;\n }\n\n \n set rotation(value: number) {\n if (!(typeof value === 'number' && value % 90 === 0)) {\n console.warn('Invalid pages rotation angle.');\n return;\n }\n\n this._rotation = value;\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if ('src' in changes) {\n this.loadPDF();\n } else if (this._pdf) {\n this.update();\n }\n }\n\n public onPageResize() {\n if (this.resizeTimeout) {\n clearTimeout(this.resizeTimeout);\n }\n\n this.resizeTimeout = setTimeout(() => {\n this.render();\n }, 100);\n }\n\n private loadPDF() {\n if (!this.src) {\n return;\n }\n\n PDFJS.getDocument(this.src)\n .then(pdf => {\n this._pdf = pdf;\n\n this.afterLoadComplete.emit(pdf);\n\n this.update();\n }, (error: any) => {\n this.onError.emit(error);\n });\n }\n\n private update() {\n this.page = this._page;\n\n this.render();\n }\n\n private render() {\n if (!this._showAll) {\n this.renderPage(this._page);\n } else {\n this.renderMultiplePages();\n }\n }\n\n private renderMultiplePages() {\n let container = this.element.nativeElement.querySelector('div');\n\n this.removeAllChildNodes(container);\n\n // render pages synchronously\n const render = (page: number) => {\n this.renderPage(page).then(() => {\n if (page < this._pdf.numPages) {\n render(page + 1);\n }\n });\n };\n\n render(1);\n }\n\n private isValidPageNumber(page: number): boolean {\n return this._pdf.numPages >= page && page >= 1;\n }\n\n private renderPage(pageNumber: number): PDFPromise {\n return this._pdf.getPage(pageNumber).then( (page: PDFPageProxy) => {\n let viewport = page.getViewport(this._zoom, this._rotation);\n let container = this.element.nativeElement.querySelector('div');\n\n if (!this._originalSize) {\n viewport = page.getViewport(this.element.nativeElement.offsetWidth / viewport.width, this._rotation);\n }\n\n if (!this._showAll) {\n this.removeAllChildNodes(container);\n }\n\n return (page).getOperatorList().then(function (opList) {\n let svgGfx = new (PDFJS).SVGGraphics((page).commonObjs, (page).objs);\n\n return svgGfx.getSVG(opList, viewport).then(function (svg) {\n let $div = document.createElement('div');\n\n $div.classList.add('page');\n $div.setAttribute('data-page-number', `${ page.pageNumber }`);\n\n $div.appendChild(svg);\n container.appendChild($div);\n });\n });\n });\n }\n\n private removeAllChildNodes(element: HTMLElement) {\n while (element.firstChild) {\n element.removeChild(element.firstChild);\n }\n }\nstatic decorators: DecoratorInvocation[] = [\n{ type: Component, args: [{\n selector: 'pdf-viewer',\n template: `\n
\n `,\n styles: [`\n.ng2-pdf-viewer--zoom {\n overflow-x: scroll;\n}\n\n:host >>> .ng2-pdf-viewer-container .page {\n background-color: #fff;\n}\n `]\n}, ] },\n];\n/** @nocollapse */\nstatic ctorParameters: () => ({type: any, decorators?: DecoratorInvocation[]}|null)[] = () => [\n{type: ElementRef, },\n];\nstatic propDecorators: {[key: string]: DecoratorInvocation[]} = {\n'afterLoadComplete': [{ type: Output, args: ['after-load-complete', ] },],\n'onError': [{ type: Output, args: ['error', ] },],\n'src': [{ type: Input },],\n'page': [{ type: Input, args: ['page', ] },],\n'pageChange': [{ type: Output },],\n'renderText': [{ type: Input, args: ['render-text', ] },],\n'originalSize': [{ type: Input, args: ['original-size', ] },],\n'showAll': [{ type: Input, args: ['show-all', ] },],\n'zoom': [{ type: Input, args: ['zoom', ] },],\n'rotation': [{ type: Input, args: ['rotation', ] },],\n};\n}\n\ninterface DecoratorInvocation {\n type: Function;\n args?: any[];\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../../src/pdf-viewer/pdf-viewer.component.ts"],"names":[],"mappings":"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","file":"pdf-viewer.component.js","sourceRoot":"","sourcesContent":["/**\n * Created by vadimdez on 21/06/16.\n */\nimport {\n Component, Input, Output, ElementRef, EventEmitter, OnChanges, SimpleChanges\n} from '@angular/core';\nimport 'pdfjs-dist/build/pdf.combined';\nPDFJS.verbosity = (PDFJS).VERBOSITY_LEVELS.errors;\n\n\n\nexport class PdfViewerComponent implements OnChanges {\n private _showAll: boolean = false;\n private _renderText: boolean = true;\n private _originalSize: boolean = true;\n private _pdf: PDFDocumentProxy;\n private _page: number = 1;\n private _zoom: number = 1;\n private _rotation: number = 0;\n private resizeTimeout: NodeJS.Timer;\n\n afterLoadComplete = new EventEmitter();\n onError = new EventEmitter();\n onProgress = new EventEmitter();\n\n constructor(private element: ElementRef) {}\n\n \n src: string | Uint8Array | PDFSource;\n\n \n set page(_page) {\n _page = parseInt(_page, 10);\n\n if (this._pdf && !this.isValidPageNumber(_page)) {\n _page = 1;\n }\n\n this._page = _page;\n this.pageChange.emit(_page);\n }\n\n pageChange: EventEmitter = new EventEmitter(true);\n\n \n set renderText(renderText: boolean) {\n this._renderText = renderText;\n }\n\n \n set originalSize(originalSize: boolean) {\n this._originalSize = originalSize;\n }\n\n \n set showAll(value: boolean) {\n this._showAll = value;\n }\n\n \n set zoom(value: number) {\n if (value <= 0) {\n return;\n }\n\n this._zoom = value;\n }\n\n get zoom() {\n return this._zoom;\n }\n\n \n set rotation(value: number) {\n if (!(typeof value === 'number' && value % 90 === 0)) {\n console.warn('Invalid pages rotation angle.');\n return;\n }\n\n this._rotation = value;\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if ('src' in changes) {\n this.loadPDF();\n } else if (this._pdf) {\n this.update();\n }\n }\n\n public onPageResize() {\n if (this.resizeTimeout) {\n clearTimeout(this.resizeTimeout);\n }\n\n this.resizeTimeout = setTimeout(() => {\n this.render();\n }, 100);\n }\n\n private loadPDF() {\n if (!this.src) {\n return;\n }\n\n let loadingTask: any = PDFJS.getDocument(this.src);\n\n loadingTask.onProgress = (progressData: PDFProgressData) => {\n this.onProgress.emit(progressData);\n };\n\n (>loadingTask.promise)\n .then(pdf => {\n this._pdf = pdf;\n\n this.afterLoadComplete.emit(pdf);\n\n this.update();\n }, (error: any) => {\n this.onError.emit(error);\n });\n }\n\n private update() {\n this.page = this._page;\n\n this.render();\n }\n\n private render() {\n if (!this._showAll) {\n this.renderPage(this._page);\n } else {\n this.renderMultiplePages();\n }\n }\n\n private renderMultiplePages() {\n let container = this.element.nativeElement.querySelector('div');\n\n this.removeAllChildNodes(container);\n\n // render pages synchronously\n const render = (page: number) => {\n this.renderPage(page).then(() => {\n if (page < this._pdf.numPages) {\n render(page + 1);\n }\n });\n };\n\n render(1);\n }\n\n private isValidPageNumber(page: number): boolean {\n return this._pdf.numPages >= page && page >= 1;\n }\n\n private renderPage(pageNumber: number): PDFPromise {\n return this._pdf.getPage(pageNumber).then( (page: PDFPageProxy) => {\n let viewport = page.getViewport(this._zoom, this._rotation);\n let container = this.element.nativeElement.querySelector('div');\n\n if (!this._originalSize) {\n viewport = page.getViewport(this.element.nativeElement.offsetWidth / viewport.width, this._rotation);\n }\n\n if (!this._showAll) {\n this.removeAllChildNodes(container);\n }\n\n return (page).getOperatorList().then(function (opList) {\n let svgGfx = new (PDFJS).SVGGraphics((page).commonObjs, (page).objs);\n\n return svgGfx.getSVG(opList, viewport).then(function (svg) {\n let $div = document.createElement('div');\n\n $div.classList.add('page');\n $div.setAttribute('data-page-number', `${ page.pageNumber }`);\n\n $div.appendChild(svg);\n container.appendChild($div);\n });\n });\n });\n }\n\n private removeAllChildNodes(element: HTMLElement) {\n while (element.firstChild) {\n element.removeChild(element.firstChild);\n }\n }\nstatic decorators: DecoratorInvocation[] = [\n{ type: Component, args: [{\n selector: 'pdf-viewer',\n template: `\n
\n `,\n styles: [`\n.ng2-pdf-viewer--zoom {\n overflow-x: scroll;\n}\n\n:host >>> .ng2-pdf-viewer-container .page {\n background-color: #fff;\n}\n `]\n}, ] },\n];\n/** @nocollapse */\nstatic ctorParameters: () => ({type: any, decorators?: DecoratorInvocation[]}|null)[] = () => [\n{type: ElementRef, },\n];\nstatic propDecorators: {[key: string]: DecoratorInvocation[]} = {\n'afterLoadComplete': [{ type: Output, args: ['after-load-complete', ] },],\n'onError': [{ type: Output, args: ['error', ] },],\n'onProgress': [{ type: Output, args: ['on-progress', ] },],\n'src': [{ type: Input },],\n'page': [{ type: Input, args: ['page', ] },],\n'pageChange': [{ type: Output },],\n'renderText': [{ type: Input, args: ['render-text', ] },],\n'originalSize': [{ type: Input, args: ['original-size', ] },],\n'showAll': [{ type: Input, args: ['show-all', ] },],\n'zoom': [{ type: Input, args: ['zoom', ] },],\n'rotation': [{ type: Input, args: ['rotation', ] },],\n};\n}\n\ninterface DecoratorInvocation {\n type: Function;\n args?: any[];\n}\n"]} \ No newline at end of file diff --git a/build/pdf-viewer/pdf-viewer.component.metadata.json b/build/pdf-viewer/pdf-viewer.component.metadata.json index 629c4d3db..9c6ca0626 100644 --- a/build/pdf-viewer/pdf-viewer.component.metadata.json +++ b/build/pdf-viewer/pdf-viewer.component.metadata.json @@ -1 +1 @@ -[{"__symbolic":"module","version":3,"metadata":{"PdfViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"pdf-viewer","template":"\n
\n ","styles":["\n.ng2-pdf-viewer--zoom {\n overflow-x: scroll;\n}\n\n:host >>> .ng2-pdf-viewer-container .page {\n background-color: #fff;\n}\n "]}]}],"members":{"afterLoadComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["after-load-complete"]}]}],"onError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["error"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["page"]}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"renderText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["render-text"]}]}],"originalSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["original-size"]}]}],"showAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["show-all"]}]}],"zoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["zoom"]}]}],"rotation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["rotation"]}]}],"ngOnChanges":[{"__symbolic":"method"}],"onPageResize":[{"__symbolic":"method"}],"loadPDF":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}],"renderMultiplePages":[{"__symbolic":"method"}],"isValidPageNumber":[{"__symbolic":"method"}],"renderPage":[{"__symbolic":"method"}],"removeAllChildNodes":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PdfViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"pdf-viewer","template":"\n
\n ","styles":["\n.ng2-pdf-viewer--zoom {\n overflow-x: scroll;\n}\n\n:host >>> .ng2-pdf-viewer-container .page {\n background-color: #fff;\n}\n "]}]}],"members":{"afterLoadComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["after-load-complete"]}]}],"onError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["error"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["page"]}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"renderText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["render-text"]}]}],"originalSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["original-size"]}]}],"showAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["show-all"]}]}],"zoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["zoom"]}]}],"rotation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["rotation"]}]}],"ngOnChanges":[{"__symbolic":"method"}],"onPageResize":[{"__symbolic":"method"}],"loadPDF":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}],"renderMultiplePages":[{"__symbolic":"method"}],"isValidPageNumber":[{"__symbolic":"method"}],"renderPage":[{"__symbolic":"method"}],"removeAllChildNodes":[{"__symbolic":"method"}]}}}}] \ No newline at end of file +[{"__symbolic":"module","version":3,"metadata":{"PdfViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"pdf-viewer","template":"\n
\n ","styles":["\n.ng2-pdf-viewer--zoom {\n overflow-x: scroll;\n}\n\n:host >>> .ng2-pdf-viewer-container .page {\n background-color: #fff;\n}\n "]}]}],"members":{"afterLoadComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["after-load-complete"]}]}],"onError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["error"]}]}],"onProgress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["on-progress"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["page"]}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"renderText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["render-text"]}]}],"originalSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["original-size"]}]}],"showAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["show-all"]}]}],"zoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["zoom"]}]}],"rotation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["rotation"]}]}],"ngOnChanges":[{"__symbolic":"method"}],"onPageResize":[{"__symbolic":"method"}],"loadPDF":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}],"renderMultiplePages":[{"__symbolic":"method"}],"isValidPageNumber":[{"__symbolic":"method"}],"renderPage":[{"__symbolic":"method"}],"removeAllChildNodes":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PdfViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"pdf-viewer","template":"\n
\n ","styles":["\n.ng2-pdf-viewer--zoom {\n overflow-x: scroll;\n}\n\n:host >>> .ng2-pdf-viewer-container .page {\n background-color: #fff;\n}\n "]}]}],"members":{"afterLoadComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["after-load-complete"]}]}],"onError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["error"]}]}],"onProgress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["on-progress"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["page"]}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"renderText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["render-text"]}]}],"originalSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["original-size"]}]}],"showAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["show-all"]}]}],"zoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["zoom"]}]}],"rotation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["rotation"]}]}],"ngOnChanges":[{"__symbolic":"method"}],"onPageResize":[{"__symbolic":"method"}],"loadPDF":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}],"renderMultiplePages":[{"__symbolic":"method"}],"isValidPageNumber":[{"__symbolic":"method"}],"renderPage":[{"__symbolic":"method"}],"removeAllChildNodes":[{"__symbolic":"method"}]}}}}] \ No newline at end of file diff --git a/src/app/app.component.css b/src/app/app.component.css index e49202bbe..4f1f64739 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -35,4 +35,25 @@ pdf-viewer { .error { color: #ff4146; -} \ No newline at end of file +} + +#progress { + margin-top: 50px; + width: 100px; + text-align: center; + margin-left: auto; + margin-right: auto; +} +#progress .bar, +#progress .bg { + height: 20px; +} +#progress .bg { + background-color: #e3e3e3; +} +#progress .bar { + width: 0; + max-width: 100%; + background-color: #3f51b5; + transition: .5s width; +} diff --git a/src/app/app.component.html b/src/app/app.component.html index a3d5c8919..9371b8b4a 100755 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -109,6 +109,13 @@

Angular 2 PDF Viewer

+
+
+
+
+ {{ getInt(progressData.loaded / progressData.total * 100) }}% +
+ Angular 2 PDF Viewer [zoom]="zoom" [render-text]="renderText" (error)="onError($event)" + (on-progress)="onProgress($event)" > diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 58dc53e35..9e8777955 100755 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -31,6 +31,8 @@ export class AppComponent { showAll: boolean = true; pdf: any; renderText: boolean = true; + progressData: PDFProgressData; + isLoaded: boolean = false; incrementPage(amount: number) { this.page += amount; @@ -66,8 +68,8 @@ export class AppComponent { * @param pdf */ afterLoadComplete(pdf: PDFDocumentProxy) { - this.error = null; // clear error this.pdf = pdf; + this.isLoaded = true; } /** @@ -78,4 +80,18 @@ export class AppComponent { onError(error: any) { this.error = error; // set error } + + /** + * Pdf loading progress callback + * @param {PDFProgressData} progressData + */ + onProgress(progressData: PDFProgressData) { + this.progressData = progressData; + this.isLoaded = false; + this.error = null; // clear error + } + + getInt(value: number): number { + return Math.round(value); + } } diff --git a/src/pdf-viewer/pdf-viewer.component.ts b/src/pdf-viewer/pdf-viewer.component.ts index e745ba865..049f56ef5 100644 --- a/src/pdf-viewer/pdf-viewer.component.ts +++ b/src/pdf-viewer/pdf-viewer.component.ts @@ -38,6 +38,7 @@ export class PdfViewerComponent implements OnChanges { @Output('after-load-complete') afterLoadComplete = new EventEmitter(); @Output('error') onError = new EventEmitter(); + @Output('on-progress') onProgress = new EventEmitter(); constructor(private element: ElementRef) {} @@ -119,7 +120,13 @@ export class PdfViewerComponent implements OnChanges { return; } - PDFJS.getDocument(this.src) + let loadingTask: any = PDFJS.getDocument(this.src); + + loadingTask.onProgress = (progressData: PDFProgressData) => { + this.onProgress.emit(progressData); + }; + + (>loadingTask.promise) .then(pdf => { this._pdf = pdf;