use viewer in atom package

[allefeld]

I'm developing an Atom package including a PDF viewer, and I'm trying to do that based on pdf.js. My package inserts an iframe into its view, and loads viewer.html into it.

As a first test, I loaded https://mozilla.github.io/pdf.js/web/viewer.html into the iframe, and that worked perfectly, both with the hardlinked pdf and with local files.

But I don't want to depend on Internet access, so I made my package depend on pdfjs-dist.

First problem: Unlike pdf.js, pdfjs-dist does not contain viewer.html under web/. I've read the remark

However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it.

and that that is the reason not to include it, but I honestly intend to reskin the viewer, that in itself is not a reason not to include it. Moreover, if that's the reason, then the viewer JavaScript and CSS should not be included either.

My solution was to download viewer.html from pdf.js. I had to adjust some paths in the HTML, and add a dependency on systemjs, and download systemjs.config.js.

Unfortunately, now I've run into a second problem I don't know how to fix:

pdfjs.js:23 Uncaught ReferenceError: require is not defined
    at Object.defineProperty.value (pdfjs.js:23)
    at __w_pdfjs_require__ (bootstrap:19)
    at Object.pdfjsLib (annotation_layer_builder.js:1)
    at __w_pdfjs_require__ (bootstrap:19)
    at Object.defineProperty.value (pdf_viewer.component.js:17)
    at __w_pdfjs_require__ (bootstrap:19)
    at Object.defineProperty.value (bootstrap:83)
    at bootstrap:83
    at webpackUniversalModuleDefinition (universalModuleDefinition:9)
    at universalModuleDefinition:10

Can you tell me how to fix this?

Or, is there something fundamentally wrong in how I approach this?

Configuration:

• Atom 1.41.0
• Debian GNU/Linux 10.2
• PDF.js version: pdfjs-dist 2.3.200
• Is a browser extension: no

[Snuffleupagus]

Moreover, if that's the reason, then the viewer JavaScript and CSS should not be included either.

The contents of the /web directory in the pdfjs-dist repository is included to support building of a custom viewer based upon the various viewer components (such as PDFViewer); please see the examples in /~https://github.com/mozilla/pdf.js/tree/master/examples/components and /~https://github.com/mozilla/pdf.js/tree/master/examples/mobile-viewer

My solution was to download viewer.html from pdf.js. I had to adjust some paths in the HTML, and add a dependency on systemjs, and download systemjs.config.js.

The mentions of SystemJS would suggest, at least to me, that you attempted to use the code as-is without actually building it first (using e.g. gulp generic).
A simpler solution would probably be to use official releases, as found at /~https://github.com/mozilla/pdf.js/releases (which are still including the default viewer).

[allefeld]

building of a custom viewer

I'm afraid building a custom viewer is a bit beyond my abilities, at least for the moment. Moreover, examples only get you so far if the API exposed by viewer.js is basically undocumented.

Is there a problem with me using viewer.html in my own project, as long as I re-skin it?

without actually building it first

As far as I understand, pdfjs-dist contains a pre-built version.

I got it working for now by a combination of scraping from https://mozilla.github.io/pdf.js/web/viewer.html and downloading select files from the official repository pdf.js. (Btw., does that mean that pdfjs-dist is unofficial?)

I ended up with the files

web/viewer.css
web/viewer.html
web/viewer.js
web/images/*
web/locale/locale.properties
web/locale/en-US/viewer.properties
build/pdf.worker.js
build/pdf.js

Is this actually everything I (could possibly) need? The two directories contain many more files...

It would be great if you could tell me which files exactly I would have to include from the repository in my code to be sure everything works.

[Snuffleupagus]

I got it working for now by a combination of scraping from https://mozilla.github.io/pdf.js/web/viewer.html and downloading select files from the official repository pdf.js.

The problem is when you're using pre-built files, e.g. from the pdfjs-dist repository, together with the raw files directly from this repository; that will simply not work well.

It would be great if you could tell me which files exactly I would have to include from the repository in my code to be sure everything works.

But #11358 (comment) already did mention simply using releases from /~https://github.com/mozilla/pdf.js/releases since they should contain everything that you need here :-)

[allefeld]

But #11358 (comment) already did mention simply using releases from /~https://github.com/mozilla/pdf.js/releases since they should contain everything that you need here :-)

I'd rather not build myself, and the releases aren't pre-built, are they? At least /~https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website#pre-built-pdfjs refers only to pdfjs-dist.

Another advantage of pdfjs-dist is that I can make it a dependency of my Atom package, so people using my package would have it installed automatically.

The disadvantage of pdfjs-dist is that it doesn't include viewer.html as well as supporting files. So, for me the solution looks to be to use pdfjs-dist, augmented by selected files from the repository. And that's why I was asking. :)

[Snuffleupagus]

[...] and the releases aren't pre-built, are they?

Of course they are, which is exactly why I suggested that you use them!

[timvandermeij]

I agree with the comments above, in particular #11358 (comment) should give you all that's necessary to work with. If there are clear things we can improve in the distributions, please open a dedicated issue for them.

[allefeld]

@timvandermeij, I think /~https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website#pre-built-pdfjs is misleading, because it only mentions pdfjs-dist as a source for a prebuilt version, but does not mention the pdf.js releases. OK, the release download files are also called "pdfjs-dist", but one doesn't know that unless one looks there, so the misunderstanding that this is only about the pdfjs-dist repository & derived npm package is easy.

If you like, I can open a new issue for that.

[timvandermeij]

@allefeld I think this is a good point. I have updated the page at /~https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website to also list the official releases. Thank you for your feedback!

[allefeld]

Thanks, the added text looks good!