electron: Native PDF Viewer not loading PDF from Blob

I’m sorry your issue isn’t getting the attention you think it deserves. Electron is an open source community project. I’m sure you’ve noticed that you didn’t pay anything for Electron and that all the people investing their hours into this project are either sponsored by companies that currently have different priorities or are themselves motivated by different goals.

A PR that closes this issue would be most welcome. If you need this issue to be fixed and you are unable to either do it yourself or sponsor someone to do it for you, I’d humbly offer the advice that “shaming” people isn’t the best way to motivate people to gift their time and effort to you.

My solution is to save the pdf file in the app’s temporary directory as temp.pdf so I can use ‘file:// …’(blob://… not work) in webview or new BrowserWindow. Work for me. (Users won’t feel that I saved a file)

// set temp.pdf path
const pdfPreviewFilePath =
  process.platform === 'darwin'
    ? `${homePath}/Library/Logs/${appName}/temp.pdf`
    : `${homePath}\\AppData\\Roaming\\${appName}\\temp.pdf`;

// save as temp.pdf
const reader = new FileReader();
reader.onload = function() {
    try {
        const fs = window.electron.remote.require('fs');
        fs.writeFileSync('${path}/temp.pdf', this.result, 'binary');
        window.electron.ipcRenderer.send('pdf-viewer');
    } catch (error) {
        console.error('write file error', error);
    }
}
reader.readAsBinaryString(blob);

// open pdf viewer
ipcMain.on('pdf-viewer', () => {
    const pdfViewerConfig = {
        webPreferences: {
            plugins: true,
        },
    };
    const pdfViewer = new BrowserWindow(pdfViewerConfig);
    pdfViewer.loadURL(`file://${pdfPreviewFilePath}`); // the path of temp.pdf
});

I haven’t heard anything yet. Still waiting. It’s holding up a major web to Electron switch over here at work.

For anyone who needs to do something with their PDFs in Blob form while we wait for Blob support in PDF Viewer, you can use this:

let a = document.createElement('a');
document.body.appendChild(a);
let aUrl = URL.createObjectURL(blob);
a.href = aUrl;
a.download = fileName;
a.click();
URL.revokeObjectURL(aUrl);

This will take the Blob you are getting back from your endpoint and prompt a save dialog so that your users can save it somewhere. They can then open it with Chrome, or any other PDF Viewer.

Yeah, I get that, but on the other hand, if you can’t take the fast ball, don’t come to the plate. You put something out like this, people will use it. They might even use it for mission-critical projects, and in the main, Electron works brilliantly. It’s doing the job–and then I try to capture a document from someone else’s web app, and it can’t get the job done. I would have no way of knowing that beforehand, so I committed time, resources, and the company’s cash on Electron as a way to produce what we were asked to produce.

I can’t even get a “yeah, here’s what I’d do in that situation,” and I’m not the only one begging here. There are tickets outstanding since 2016 on issues similar to this. I guess they’re pretty busy. I suppose I’ll have to fork pdf-viewer and try to sort it out myself as a first approximation. Yeah, no one forced me to use Electron, but it looked right as a way to frame the solution. I would think that more than an automated bot response to the OP’s ticket would be warranted.

It looks as if Electron doesn’t support loading ObjectUrls at all. The current workaround for this is to use File System and write your blob to the directory and then load the file, but that is not feasible at all. Overtime, you would end up with hundreds of random PDF files laying around in a user’s directory. Hopefully an Electron contributor who has the knowledge of this topic can comment with a more accurate explanation on why Electron won’t load ObjectUrls.

@weihong1028 Good thing they know what the issue is and know how to fix it.

Why are there still no repaired messages? 🤣🤣🤣

I have the same problem with a 3rd-party site my Electron shell has to run–the actual blob is buried to where I can’t capture the URL and use the method I would normally employ (download PDF and put it in a queue folder), so I’m depending on Electron to step in. The pop-up <object> tag just shows “can’t load plugin” and we stop there. Seems to work in Chrome, and probably in raw Chromium but I don’t have any live data with which to test that assumption right now.

I’ve spent the last 9 months working on this product and right now an international airport and a national airline are waiting for results. Admittedly, their printing method is a bit Byzantine, but if Chrome can handle it–why can’t an Electron-based app?