如何在 Electron BrowserWindow 中查看 PDF?

2022-11-28 01:00:32 other 阅读：673
本文介绍了如何在 Electron BrowserWindow 中查看 PDF?的处理方法，对大家解决问题具有一定的参考价值

问题描述

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

function openPDF(filePath){让 pdfWindow = 新电子.remote.BrowserWindow({图标:'./build/icon.png',宽度:1200，高度:800，网络首选项:{插件:真的}});pdfWindow.loadURL(url.format({路径名:文件路径，协议:'文件:'，斜线:真的}));pdfWindow.setMenu(null);pdfWindow.on(关闭"，函数(){pdfWindow = 空});}

所以这应该使用 Electron 的集成 PDF 查看器(使用 Chromium)在新窗口中打开 PDF.我使用了臭名昭著的plugins: true，我尝试了大部分您可以为 BrowserWindow 定义数以千计的首选项，但它总是打开窗口，然后开始下载文件而不是显示它.

我三重检查了文件路径、导入"等，更新了所有内容，但似乎找不到问题所在.自 1.6.4 以来，Electron 本身就支持这一点，但它不适用于我.

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

解决方案

2020 年更新:

@karthick 正确地指出，尽管 plugins: true，这是一个禁用插件的错误.问题存在自 3.0.0(2018 年 9 月 18 日)和 今天仍有待修复 终于已在第 9 版中修复！

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

npm 更新电子

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

devDependencies":{电子":^9.0.0"},

旧答案:

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

更新:

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

<块引用>

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

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

  2. 8 月 28 日:现在没有人致力于修复.如果您愿意，您可以在 BountySource 上悬赏此问题以更快地解决此问题.

  3. 11 月 19 日:修复已关闭，分支已删除.开发商报价:

<块引用>

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

  1. 1 月 2 日:尽管 a在 BountySource 上悬赏 1,600 美元以上

  2. 1 月 21 日:正在不断改进扩展支持(跟踪问题) 并且引入了新修复.

  3. 2 月 13 日:新修复已合并，问题已经被关了.看起来这将在 Electron 10 中得到解决！ 开发者的报价:

<块引用>

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

解决方法:

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

     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 查看器的完整功能集(例如缺少字段完成)，但对于大多数应用程序来说可能已经足够了.这是一个捕获下载事件并将其路由到 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()}`));}})

So I have this Electron app and in one of the .html-files I link another script that provides some utility-functions to the program and one of those is this one:

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
    });
}

So this should use the integrated PDF-Viewer of Electron (which uses Chromium) to open the PDF in a new window. I used the infamous plugins: true, I tried through most of the thousands of preferences you can define for a BrowserWindow but it always opens the window and then starts to download the file instead of displaying it.

I triple checked the file path, the "imports" etc., updated everything but I can't seem to find the problem. Electron natively supports this since 1.6.4 but it doesn't work for me.

Help me, Stack Overflow, you are my only hope.

解决方案

Update 2020:

@karthick correctly pointed out that this is a bug that disables the plugins despite plugins: true. The Issue exists since 3.0.0 (September 18, 2018) and remains to be fixed today has finally been fixed in Version 9!

Update your electron version to 9.X.X or higher with this command to enable the functionality:

npm update electron

You can check the devDependencies in the package.json which should be found in your project folder. It should look something like this:

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

Old answer:

As long-lasting GitHub issues tend to get rather confusing I will update this answer with the gist of the development. You can also find three workarounds at the end of the answer.

Updates:

  1. March 19th: A fix is on the way.
  2. May 19th: The fix mentioned above is currently on hold waiting for better extension support.
  3. June 28th: Better extension support is not expected to be there any time soon.
  4. July 16th: The fix is no longer being actively worked on. Quote of the developer:

The main thing I ran into trying to port over Chromium's viewer was its dependency on the chromium extension system. Electron supports only a portion of that system which made it difficult to integrate the viewer.

  1. July 25th: There has been significant progress with the improvement of the extension support which was merged and a follow-up tracking issue was created. This increased the likeliness of a continuation of the work on the fix.

  2. August 28th: Right now no one is working on a fix. You can put a bounty on this issue over on BountySource if you want to see this solved more quickly.

  3. November 19th: The fix was closed and the branch deleted. Quote of the developer:

We're still intending to one day restore the PDF viewer, but it relies on us first migrating to use Chrome's extensions library instead of our own shim, as the PDF viewer in Chromium is implemented as an extension.

  1. January 2nd: Still no one is working on this despite a bounty of $1,600 over on BountySource

  2. January 21st: Extension support is being improved continuously (tracking issue) and a new fix has been introduced.

  3. February 13th: The new fix has been merged and the issue has been closed. Looks like this is going to be resolved in Electron 10! Quote of the developer:

This should be ready to test out in the next 10.x nightly. I'm hoping to backport to 9.x as well, though it may not end up sticking if it causes issues.

Workarounds:

  1. You can make it work by downgrading to the latest 2.X.X. To do that use the following command:

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

Keep in mind, however, that only the latest three stable major versions are supported by the Electron team which means 2.X.X is not receiving security patches anymore.

  1. Alternatively you could call on the system to open the file. It will choose the default program assigned to PDFs:

     shell.openItem(fullPath);

Just make sure that the path (fullPath) is always correctly resolved with something like path.resolve(app.getAppPath(), filePath) as it might change when you build the app.

  1. Another workaround would be to use something like PDF.js which doesn't quite offer the full feature set of the Chrome PDF Viewer (e.g. missing field completion) but is probably good enough for most applications. Here is a sample implementation which catches the download-event and routes it to the 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()}`));
     }
 })

这篇关于如何在 Electron BrowserWindow 中查看 PDF?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，WP2

admin_action_{$_REQUEST[‘action’]}

do_action( "admin_action_{$_REQUEST[‘action’]}" )动作钩子：：在发送“Action”请求变量时激发。Action Hook: Fires when an ‘action’ request variable is sent.目录锚点：#说明#源码说明（Description）钩子名称的动态部分$_REQUEST['action']引用从GET或POST请求派生的操作。源码（Source）更新版本源码位置使用被使用2.6.0 wp-admin/admin.php:...

日期：2020-09-02 17:44:16 浏览：1169

admin_footer-{$GLOBALS[‘hook_suffix’]}

do_action( "admin_footer-{$GLOBALS[‘hook_suffix’]}", string $hook_suffix )操作挂钩：在默认页脚脚本之后打印脚本或数据。Action Hook: Print scripts or data after the default footer scripts.目录锚点：#说明#参数#源码说明（Description）钩子名的动态部分，$GLOBALS['hook_suffix']引用当前页的全局钩子后缀。参数（Parameters）参数类...

日期：2020-09-02 17:44:20 浏览：1070

customize_save_{$this->id_data[‘base’]}

do_action( "customize_save_{$this-&gt;id_data[‘base’]}", WP_Customize_Setting $this )动作钩子：：在调用WP_Customize_Setting：：save（）方法时激发。Action Hook: Fires when the WP_Customize_Setting::save() method is called.目录锚点：#说明#参数#源码说明（Description）钩子名称的动态部分，$this->id_data...

日期：2020-08-15 15:47:24 浏览：806

customize_value_{$this->id_data[‘base’]}

apply_filters( "customize_value_{$this-&gt;id_data[‘base’]}", mixed $default )过滤器：：过滤未作为主题模式或选项处理的自定义设置值。Filter Hook: Filter a Customize setting value not handled as a theme_mod or option.目录锚点：#说明#参数#源码说明（Description）钩子名称的动态部分，$this->id_date['base']，指的是设置...

日期：2020-08-15 15:47:24 浏览：898

get_comment_author_url

过滤钩子：过滤评论作者的URL。Filter Hook: Filters the comment author’s URL.目录锚点：#源码源码（Source）更新版本源码位置使用被使用 wp-includes/comment-template.php:32610...

日期：2020-08-10 23:06:14 浏览：930

network_admin_edit_{$_GET[‘action’]}

do_action( "network_admin_edit_{$_GET[‘action’]}" )操作挂钩：启动请求的处理程序操作。Action Hook: Fires the requested handler action.目录锚点：#说明#源码说明（Description）钩子名称的动态部分$u GET['action']引用请求的操作的名称。源码（Source）更新版本源码位置使用被使用3.1.0 wp-admin/network/edit.php:3600...

日期：2020-08-02 09:56:09 浏览：876

network_sites_updated_message_{$_GET[‘updated’]}

apply_filters( "network_sites_updated_message_{$_GET[‘updated’]}", string $msg )筛选器挂钩：在网络管理中筛选特定的非默认站点更新消息。Filter Hook: Filters a specific, non-default site-updated message in the Network admin.目录锚点：#说明#参数#源码说明（Description）钩子名称的动态部分$_GET['updated']引用了非默认的...

日期：2020-08-02 09:56:03 浏览：864

pre_wp_is_site_initialized

过滤器：：过滤在访问数据库之前是否初始化站点的检查。Filter Hook: Filters the check for whether a site is initialized before the database is accessed.目录锚点：#源码源码（Source）更新版本源码位置使用被使用 wp-includes/ms-site.php:93910...

日期：2020-07-29 10:15:38 浏览：833

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

你想在WordPress 中添加关键字和meta 描述吗？关键字和meta 描述使你能够提高网站的SEO。在本文中，我们将向你展示如何在WordPress 中正确添加关键字和meta 描述。为什么要在WordPress 中添加关键字和Meta 描述？关键字和说明让搜寻引擎更了解您的帖子和页面的内容。关键词是人们寻找您发布的内容时，可能会搜索的重要词语或片语。而Meta Description则是对你的页面和文章的简要描述。如果你想要了解更多关于中继标签的资讯，可以参考Google的说明。Meta 关键字和描...

日期：2020-10-03 21:18:25 浏览：1725

谷歌的SEO是什么

SEO (Search Engine Optimization)中文是搜寻引擎最佳化，意思近于「关键字自然排序」、「网站排名优化」。简言之，SEO是以搜索引擎（如Google、Bing）为曝光媒体的行销手法。例如搜寻「wordpress教学」，会看到本站的「WordPress教学：12个课程…」排行Google第一：关键字：wordpress教学、wordpress课程…若搜寻「网站架设」，则会看到另一个网页排名第1：关键字：网站架设、架站…以上两个网页，每月从搜寻引擎导入自然流量，达2万4千：每月「有机搜...

日期：2020-10-30 17:23:57 浏览：1308