如何在 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-Viewer（使用 Chromium）在新窗口中打开 PDF。 我使用了臭名昭著的plugins: true ，我尝试了您可以为 BrowserWindow 定义的数千个首选项中的大部分，但它总是打开窗口，然后开始下载文件而不是显示它。

我三重检查了文件路径、“导入”等，更新了所有内容，但似乎找不到问题所在。 Electron 从1.6.4 开始就支持这个，但它对我不起作用。

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

Answer 1

2020 年更新：

@karthick 正确地指出，尽管plugins: true ，这是一个禁用插件的错误。 该问题自 3.0.0 （2018 年 9 月 18 日）以来一直存在，今天仍有待修复，终于在第 9 版中修复了！

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

npm update electron

您可以在项目文件夹中的package.json检查devDependencies 。 它应该是这样的：

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

---

旧答案：

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

更新：

1. 3 月 19 日：修复正在进行中。
2. 5 月 19 日：上述修复目前处于暂停状态，等待更好的扩展支持。
3. 6 月 28 日：预计不会很快提供更好的扩展支持。
4. 7 月 16 日：不再积极进行修复。 开发商报价：

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

5. 7 月 25 日：已合并的扩展支持的改进取得了重大进展，并创建了后续跟踪问题。 这增加了继续修复工作的可能性。

6. 8 月 28 日：现在没有人致力于修复。 如果你想更快地解决 这个问题，你可以 在 BountySource 上悬赏这个问题。

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

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

8. 1 月 2 日：尽管 在 BountySource 上获得了 1,600 美元的赏金，但仍然没有人从事这项工作

9. 1 月 21 日：扩展支持正在不断改进（跟踪问题）并引入了新的修复程序。

10. 2 月 13 日：新修复已合并，问题已关闭。 看起来这将在 Electron 10 中得到解决！ 开发商报价：

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

解决方法：

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

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

但是请记住， Electron 团队仅支持最新的三个稳定的主要版本，这意味着2.XX 不再接收安全补丁。

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

    shell.openItem(fullPath);

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

3. 另一种解决方法是使用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()}`)); } })