如何在 Electron BrowserWindow 中查看 PDF？

2024-04-16

所以我有这个 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，我尝试了大部分您可以为浏览器窗口定义数千个首选项 https://github.com/electron/electron/blob/master/docs/api/browser-window.md但它总是打开窗口，然后开始下载文件而不是显示它。

我三次检查了文件路径、“导入”等，更新了所有内容，但我似乎找不到问题。 Electron 本身就支持这一点，因为1.6.4 https://github.com/electron/electron/releases/tag/v1.6.4但这对我不起作用。

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

2020 年更新：

@karthick correctly pointed out that this is a bug that disables the plugins despite plugins: true. The Issue https://github.com/electron/electron/issues/12337 exists since 3.0.0 https://electronjs.org/blog/electron-3-0#other-notes (September 18, 2018) and ~~remains to be fixed today~~ has finally been fixed in Version 9!

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

npm update electron

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

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

旧答案：

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

Updates:

3 月 19 日：修复正在进行中 https://github.com/electron/electron/pull/17163.
5 月 19 日：上述修复目前处于搁置状态等待更好的扩展支持 https://github.com/electron/electron/pull/17440.
6 月 28 日：更好的扩展支持 https://github.com/electron/electron/pull/17440预计不会很快到达那里。
7 月 16 日：The fix https://github.com/electron/electron/pull/17163不再积极开展工作。引用开发商：

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

7月25日：项目取得重大进展改进扩展支持 https://github.com/electron/electron/pull/17440合并后的一个后续跟踪问题 https://github.com/electron/electron/issues/19447被创建。这增加了继续开展相关工作的可能性the fix https://github.com/electron/electron/pull/17163.
8 月 28 日：目前没有人致力于修复。你可以在 BountySource 上悬赏解决此问题 https://www.bountysource.com/issues/56240517-enable-pdf-viewer如果您想更快地解决这个问题。
11 月 19 日：The fix https://github.com/electron/electron/pull/17163已关闭并删除了分支。开发商报价：

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

1 月 2 日：尽管如此，仍然没有人在做这件事BountySource 上的赏金超过 1,600 美元 https://www.bountysource.com/issues/56240517-enable-pdf-viewer
1月21日：扩展支持持续完善（追踪问题 https://github.com/electron/electron/issues/19447) and a new fix https://github.com/electron/electron/pull/21794已被介绍。
2 月 13 日：新的修复 https://github.com/electron/electron/pull/21794已合并，问题已关闭。看起来这个问题将在 Electron 10 中得到解决！开发商报价：

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

解决方法：

您可以通过降级到最新的 2.X.X 来使其工作。为此，请使用以下命令：
```
 npm install electron@"<3.0.0" --save-dev
```

但请记住，Electron 团队仅支持最新的三个稳定主要版本 https://github.com/electron/electron/blob/master/docs/tutorial/support.md意思是2.X.X 不再接收安全补丁.

或者，您可以调用系统来打开文件。它将选择分配给 PDF 的默认程序：
```
 shell.openItem(fullPath);
```

只需确保路径 (fullPath）总是可以用类似的方法正确解决path.resolve(app.getAppPath(), filePath)因为当您构建应用程序时它可能会发生变化。

另一种解决方法是使用类似的东西PDF.js https://github.com/mozilla/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()}`));
     }
 })

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)