PDF Plugin in Electron App


#1

This might be a very trivial question but, am i able to utilize this in an Electron and if so where do I implement it? Thanks for your time and understanding!

-Alec


PDF plugin support
Electron can not open pdf file,help me please
#2

Hi Alec,
I had the same kind of need and, as it seems it’s not to be possible, I have found a very acceptable workaround:

  • I have installed the pdf.js library in my project (https://mozilla.github.io/pdf.js/)

  • I’m using a webview object to render the target pdf document (this document is linked from a web page but it could be loaded locally).

The trick is:

  • You catch the did-get-response-details event on the webview. You will find the content-type in the headers object (see event structure).
    If the content-type is “application/pdf”, you load in the webview the viewer page provided in the pdf.js library (ex: webview.src="file://" + __dirname + "/pdfjs-dist/web/viewer.html?file=<url to pdf>")

  • The URL to the pdf is also given in the event (newUrl property) but you have to convert it with encodeURIComponent() as explained in pdfjs FAQ before passing it as an argument.

And it’s working as if you had a PDF viewer plug-in!

One detail: this is working only because the webview doesn’t try to save the target pdf file by opening the “save as” dialog (well, sometimes, it tries but it may be due to the web server providing the file).

And, by the way, if someone can add code to throw an event (that could be prevented) before opening this kind of dialog (save as, print, etc), this would be wonderful!

Best regards


#3

Sadly, the behavor of the webview has changed in version 0.30.4 : the did-get-response-details event is received twice (first when the pdf stream url is intercepted and the second time because it has been forwared to the viewer, which tries to load it also - this is logical indeed-). The drawback is that it is generating an endless loop if the viewer is open in the same window.

I had then to open the viewer with the target document in a new window.

But then, there is another side effect is : you have the “Couldn’t load plugin” message displayed on your main window. After opening the new window, the workaround is for example to start a goBack action with a short delay to return to the previous screen:

setTimeout(function(){ var webview = document.querySelector('webview'); webview.goBack(); }, 1000);

Here is the code (snippets)

function handleDidGetResponseDetails(event) {
    event.preventDefault();
    var webview = document.querySelector('webview');
    var newUrl=event.newUrl;
    
    var headers = event.headers;
    var contentTypeArray = headers["content-type"];
    if (typeof contentTypeArray != 'undefined') {
        var contentType = contentTypeArray[0];
        // Document is PDF: open wiewer
        if (contentType == "application/pdf") {    
                var pdfDocument = encodeURIComponent(newUrl);
                var url = 'file://' + __dirname + '/pdfjs-dist/web/viewer.html?file=' + pdfDocument;
                //navigateTo(url);
                var ipc = require('ipc');
                // The new window is open from the main script in a special viewer page
                ipc.send('new-window', url,true);
                setTimeout(function(){ var webview = document.querySelector('webview');
                    webview.goBack();
                    }, 1000);
        }
    }
}

In main script:

// In main process.
ipc.on('new-window', function(event, url, viewer) {
    viewer = typeof viewer !== 'undefined' ? viewer : false;
    console.log(url); // prints event
    openWindow(url, viewer);
});

#4

Armoret,

I want to thank you for your very detailed reply. I greatly appreciate all of your help and sorry I didn’t reply sooner! I will implement this and update you on any findings I might come across. Thanks again!

-Alec Dilanchian


#5

Good workaround! Is it possible for you to show us the code example?

Best regards,


#6

Can you tell me how were you able to hide the native save pdf file dialog when the application/pdf file is received?
Thanks!


#7

To be honest, since the behavior of Electron has changed, I was unable to keep it running so I switched back to NWJS that allowed me to do what I wanted by overriding webrequest object got from webview.

If you compare Electron and NWJS, Electron is more simple to use and understand but NWJS sticks better to Chrome apis and seems to be more powerful. Moreover, since v0.13 (stable now), Chromes apps are natively supported by NWJS and tons of Chrome apps samples can be reused without any modification. For my specific need, NWJS was better, that’s not a general judgment.


#8

@armoret Thanks for your reply. Even I am evaluating the options for NW.js.


#9

electron can not open pdf file,help me please.

i want to use “embed”,but not support. i want to cry.

who can help me


#12

My goal was to print a pdf. I just spent a day making a PDF print library based on pdf.js which worked well in Chrome, only to find out that it totally doesn’t print correctly in Electron. As far as I can tell, it is impossible to print landscape in Electron.

I ended up using lpr on the mac to print the pdf.

Honestly, I was able to display a pdf fine using pdf.js, but not print. Printing has to be the sorriest thing about electron. It’s basically useless in it’s current implementation.

Would love to help Electron get it together.