如何在电子浏览器窗口中查看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
    });
}

因此，这应该使用集成的电子PDF查看器（使用Chromium）在新窗口中打开PDF。我使用了臭名昭著的plugins: true，我尝试了可以为BrowserWindow定义的成千上万的首选项，但是它总是打开窗口，然后开始下载文件而不显示它。

我三重检查了文件路径，“导入”等，更新了所有内容，但似乎找不到问题。自1.6.4起，Electron本身就支持此功能，但对我而言不起作用。

帮助我，堆栈溢出，您是我唯一的希望。

Answer 1

@karthick正确地指出，尽管存在，这是一个禁用插件的错误plugins: true。该问题自3.0.0（2018年9月18日）开始存在，并且 有待解决的今天 终于在版本9中得到修复！

使用以下命令将电子版本更新为9.XX或更高版本以启用功能：

npm update electron

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

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

由于长期存在的GitHub问题趋于令人困惑，因此我将根据开发的要点更新此答案。您还可以在答案的末尾找到三种解决方法。

更新：

1. 3月19日：正在进行修复。
2. 5月19日：上述修补程序目前处于等待状态，以等待更好的扩展支持。
3. 6月28日：预计很快不会有更好的扩展支持。
4. 7月16日：该修复程序将不再有效。开发商报价：

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

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

2. 8月28日：目前没有人在解决此问题。你可以把一个赏金对这一问题在上BountySource如果你想看到这个解决得更快。

3. 11月19日：修补程序已关闭，分支已删除。开发商报价：

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

1. 1月2日：尽管在BountySource上获得了1600美元的赏金，但仍然没有人在处理这个问题

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

3. 2月13日：新的修复程序已合并，问题已解决。 看来这将在Electron 10中解决！ 开发商报价：

应该准备在接下来的10.x每晚进行测试。我希望也能移植到9.x，尽管如果它引起问题，它可能最终不会粘滞。

解决方法：

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

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

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

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

   shell.openItem(fullPath);
   

只需确保路径（fullPath）始终使用诸如path.resolve(app.getAppPath(), filePath)在构建应用程序时可能会更改的方式正确解析即可。

1. 另一个解决方法是使用类似PDF.js的工具，该工具不能完全提供Chrome PDF Viewer的全部功能（例如缺少字段补全），但对于大多数应用程序来说可能已经足够了。这是一个示例实现，捕获下载事件并将其路由到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()}));
   }
   })