PDF.js in Ionic: Where and how should I load the webworker?


#1

I am trying to implement Mozilla’s PDF.js into an Ionic 3 App, I installed pdfjs-dist and the typings from dt.

I can correctly import and call the library functions but It does not work because the web-worker is not found:

GET http://localhost:8100/build/main.worker.js 404 (Not Found)

PDFWorker_initialize	@	pdf.js:2842
PDFWorker	@	pdf.js:2815
getDocument	@	pdf.js:2266
PdfEditorPage	@	pdf-editor.ts:18
createClass	@	core.es5.js:10873
createDirectiveInstance	@	core.es5.js:10701
createViewNodes	@	core.es5.js:12064
createRootView	@	core.es5.js:11969
callWithDebugContext	@	core.es5.js:13184
debugCreateRootView	@	core.es5.js:12644
ComponentFactory_.create	@	core.es5.js:9890
ComponentFactoryBoundToModule.create	@	core.es5.js:3427
NavControllerBase._viewInit	@	nav-controller-base.js:564
(anonymous)	@	nav-controller-base.js:356
t.invoke	@	polyfills.js:3
onInvoke	@	core.es5.js:4128
t.invoke	@	polyfills.js:3
r.run	@	polyfills.js:3
(anonymous)	@	polyfills.js:3
t.invokeTask	@	polyfills.js:3
onInvokeTask	@	core.es5.js:4119
t.invokeTask	@	polyfills.js:3
r.runTask	@	polyfills.js:3
o	@	polyfills.js:3
invoke	@	polyfills.js:3

The only comment about I found is this one in other thread

But the OP does not responded.

Does anybody can point me out in the right direction? I am not sure where and how to import the web worker. I have not found any main.worker.js file.

Thanks


Ionic, Angular and Android PDFs
#2

Solution: In the page constructor:


import * as pdfjsLib from 'pdfjs-dist';
.
.
.

constructor(public navCtrl: NavController, public navParams: NavParams) {

        // Set the Worker Source file
        pdfjsLib.PDFJS.workerSrc = 'assets/pdf.worker.js';
.
.
.
.
}

#3

Can you please share, how you implemented pdf.js in ionic 3? If you could share tutorial code that would be very helpful to me.


#4

@zoha131 I am with a heavy work load this days but I will try to make a little tutorial in my blog this week about this.


#5

thanks in advance. I have solved the problem. BTW make a blog post it will help the community.


#6

Hello, I had implemented it as you were suggesting, While it is work great when it is tested within the browser when i test it on and android device it doesn;t load the pdf file.
note: when i use live-reload it works fine, any insights ? thanks


#7

I forgot to put the blog post! sorry! Here it is