Pdf.js: Running pdf.js with electron

[hp011235]

Hello,
I am trying to integrate pdf.js library with the electron app. The main reason behind doing that is to have a pdf viewer in the app and to print the document.

First of all, I tried to integrate the library in two ways:

1. Cloning pdf.js in separate directory and running _gulp generic_ and whatever I got under build directory, I copied to the src directory in my project.
2. By including the node module in my project from here: https://www.npmjs.com/package/pdfjs-dist-for-node

I have following questions:

• Following the first route, I am able to show (basically render) the pdf file (without the viewer controls) in the canvas on my html page through this code:

</div> <canvas id="theCanvas"></canvas> <div>

     PDFJS.getDocument(pdfPath).then(function getPdfHelloWorld(pdf) {
            pdf.getPage(1).then(function getPageHelloWorld(page) {
              var scale = 1.5;
              var viewport = page.getViewport(scale);

              var canvas = document.getElementById('theCanvas');
              var context = canvas.getContext('2d');
              canvas.height = viewport.height;
              canvas.width = viewport.width;

              var renderContext = {
                canvasContext: context,
                viewport: viewport
              };
              page.render(renderContext);
            });
          });

However, this is just part of the thing I want. I want the viewer controls like in viewer.html. So, I tried to open a new window with directly viewer.html like this:

var pdfPath = __dirname + '/pdfs/trial.pdf'; mainWindow.loadURL('file://' + __dirname + '/generic/web/viewer.html?file=' + pdfPath);

I was able to see the viewer, but while loading the pdf file, it throws this error in console:

Uncaught (in promise) TypeError: PDFJS.getDocument is not a function
at Object.pdfViewOpen as open
at webViewerInitialized (file:///.../src/generic/web/viewer.js:7686:26)

I am not able to figure out what am I doing wrong here. Is this the recommended way? Also, if I want to embed that whole viewer in some canvas or some iframe, how can I do that? It would be nice to have an API list in the project for doing certain common tasks like what I am trying. Sorry, if it is already there and I am not able to find it.

• Following the second route, I was able to include the node module; but the concern I have here is it is not updated often as this project gets updated. The last release was a year ago. And there was no API there again. So, I dropped the plan for now.

It would be greatly appreciated if someone could help me out here.

Thanks in advance...

Configuration:

• Web browser and its version: Electron
• Operating system and its version: OSX 10.10.5
• PDF.js version: 0.8.0

[yurydelendik]

PDF.js version: 0.8.0

That's really old version. Already pre-built version from our releases (or gulp generic one) shall work fine, with exception that you may load pdf into Uint8Array by yourself.

PDFJS.getDocument is not a function

That indicates that core PDF.js library ('./build/pdf.js' file) was not loaded.

[hp011235]

Thanks for your prompt reply Yury.

That's really old version.

I am not sure how did I get that old version. I didn't do anything special than git clone git://github.com/mozilla/pdf.js.git to get the project. However, if I see here, the package.json still shows 0.8.0. Am I missing something here?

Already pre-built version from our releases (or gulp generic one) shall work fine, with exception that you may load pdf into Uint8Array by yourself.

Are you talking about this pre-built zip? .

That indicates that core PDF.js library ('./build/pdf.js' file) was not loaded.

After doing gulp generic, I got pdf.js and pdf.worker.js at two places. One outside the generic directory and one inside of generic/build/ directory. I am currently pointing to the outside one. Can you please let me know if I am pointing to the wrong one?

Again thank you for the help!

[yurydelendik]

the package.json still shows 0.8.0.

package.json does not contain the built library version, see pdf.js file or PDFJS.version property for right version number.

Can you please let me know if I am pointing to the wrong one?

Both of them shall be identical. You have to use entire "generic/" folder, so you will have pdf.js in right place.

[hp011235]

see pdf.js file or PDFJS.version property

It says version:1.4.174

Also, I figured out the problem. I copied the right stuff from the generic directory; however when I open a window with the viewer.html url; the window property should have this:

webPreferences: { nodeIntegration: false }

And it is able to load fine now.

Thanks for your help Yury!