一尘不染

如何在电子浏览器窗口中查看PDF?

node.js

因此,我有了这个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本身就支持此功能,但对我而言不起作用。

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


阅读 328

收藏
2020-07-07

共1个答案

一尘不染

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

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

npm update electron

您可以检查devDependenciespackage.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()}));
    }
    })

2020-07-07