如何在 Electron BrowserWindow 中查看 PDF？

Question

所以我有这个 Electron 应用程序，在其中一个 .html 文件中，我链接了另一个脚本，该脚本为程序提供了一些实用程序功能，其中之一就是这个：

function openPDF(filePath){
    let pdfWindow = new electron.remote.BrowserWindow({
        icon: './build/icon.png',
        width: 1200,
        height: 800,
        webPreferences: {
            plugins: true
        }
    });

    pdfWindow.loadURL(url.format({
        pathname: filePath,
        protocol: 'file:',
        slashes: true
    }));

    pdfWindow.setMenu(null);

    pdfWindow.on("closed", function () {
        pdfWindow = null
    });
}

所以这应该使用 Electron 的集成 PDF 查看器（使用 Chromium）在新窗口中打开 PDF。我使用了臭名昭著的plugins: true，我尝试了大部分thousands of preferences you can define for a BrowserWindow，但它总是打开窗口，然后开始下载文件而不是显示它。

我三重检查了文件路径、“导入”等，更新了所有内容，但我似乎找不到问题所在。自 1.6.4 以来，Electron 原生支持此功能，但它对我不起作用。

帮助我，Stack Overflow，你是我唯一的希望。

Answer 1

2020 年更新：

@karthick 正确地指出，尽管有plugins: true，但这是一个禁用插件的错误。 The Issue 存在 since 3.0.0（2018 年 9 月 18 日），今天仍有待修复 终于在版本 9 中修复了！

使用此命令将您的电子版本更新到 9.X.X 或更高版本以启用该功能：

npm update electron

您可以在项目文件夹中的package.json 中查看devDependencies。它应该看起来像这样：

"devDependencies": {
    "electron": "^9.0.0"
},

---

旧答案：

由于长期存在的 GitHub 问题往往会变得相当混乱，我将根据开发的要点更新此答案。您还可以在答案末尾找到三种解决方法。

更新：

1. 3 月 19 日：A fix is on the way。
2. 5 月 19 日：上述修复目前处于暂停状态 等待better extension support。
3. 6 月 28 日：Better extension support 预计不会很快出现。
4. 7 月 16 日：The fix 不再积极工作。引用 开发者：

我在尝试移植 Chromium 的查看器时遇到的主要问题是它对 chromium 扩展系统的依赖。 Electron 仅支持该系统的一部分，这使得集成查看器很困难。

5. 7 月 25 日：improvement of the extension support 取得了重大进展，已合并并创建了 follow-up tracking issue。这增加了在the fix 上继续工作的可能性。

6. 8 月 28 日：目前没有人致力于修复。如果您想更快地解决这个问题，您可以put a bounty on this issue over on BountySource。

7. 11 月 19 日：The fix 已关闭，分支已删除。开发商报价：

我们仍然打算在某一天恢复 PDF 查看器，但它依赖于我们首先迁移以使用 Chrome 的扩展库而不是我们自己的 shim，因为 Chromium 中的 PDF 查看器是作为扩展实现的。

8. 1 月 2 日：尽管有 a bounty of $1,600 over on BountySource，但仍然没有人在做这件事

9. 1 月 21 日：扩展支持不断改进 (tracking issue) 并引入了 new fix。

10. 2 月 13 日：The new fix 已合并，问题已关闭。 看起来这将在 Electron 10 中解决！ 开发者的引述：

这应该可以在下一个 10.x 每晚进行测试。我也希望向后移植到 9.x，但如果它引起问题，它可能最终不会坚持下去。

解决方法：

1. 您可以通过降级到最新的 2.X.X 来使其工作。为此，请使用以下命令：

    npm install electron@"<3.0.0" --save-dev
   

但请记住，only the latest three stable major versions are supported by the Electron team 表示 2.X.X 不再接收安全补丁。

1. 您也可以调用系统打开文件。它将选择分配给 PDF 的默认程序：

    shell.openItem(fullPath);
   

只要确保路径 (fullPath) 始终使用 path.resolve(app.getAppPath(), filePath) 之类的东西正确解析，因为它可能会在您构建应用程序时发生变化。

1. 另一种解决方法是使用 PDF.js 之类的东西，它不能完全提供 Chrome PDF 查看器的完整功能集（例如缺少字段完成），但对于大多数应用程序来说可能已经足够了。这是一个捕获下载事件并将其路由到 PDF.js-viewer 的示例实现：

    const { BrowserWindow, session } = require('electron')
    session.defaultSession.on('will-download', (event, item, webContents) => {
        if (item.getMimeType() === 'application/pdf' && item.getURL().indexOf('blob:file:') != 0) {
            event.preventDefault();
            new BrowserWindow().loadFile(path.resolve(__dirname, `pdfjs/web/viewer.html?file=${item.getURL()}`));
        }
    })