weixin_43995331 2025-05-05 15:59 采纳率: 0%
浏览 13

electron中显示本地pdf

1、有个小需求：在electron项目中展示一个本地pdf文档；

2、实现：根据网上资料，需要注册一个类似file://的协议来访问本地文件，界面使用iframe显示pdf文件，具体代码如下：
（1）注册app://协议，pdf文件放在项目的public目录下

    protocol.registerFileProtocol('app', (request, callback) => {
        const url = request.url.replace('app://', ''); // 移除协议前缀
        const filePath = path.join(app.getAppPath(), 'public', url); // 映射到项目内的 public 目录
        console.log('filePath', filePath);
        callback({ path: filePath });
    });

（2）前端显示: 1.pdf在项目根目录的public路径下

            {<iframe
              src="app://1.pdf"
              title="pdf文档"
              style={{ width: "100%", height: "500px", border: 'none' }}
              onError={(e) => console.error('pdf加载错误:', e)}
            />}

（3）electron-forge配置中增加策略

devContentSecurityPolicy = `xxx; frame-src 'self' app:`

3、结果：
（1）主进程log打印的pdf文件完整路径没问题；
（2）主进程报错如下:

[27620:0502/170320.052:ERROR:bad_message.cc(29)] Terminating renderer for bad IPC message, reason 1

(3)前端控制台和network也不报错，界面不显示pdf

img

(4)将pdf文件修改成图片或文本文件时，显示正常；

所以，pdf能这样显示吗，问题在哪？

  • 写回答

5条回答 默认 最新

  • 阿里嘎多学长 2025-05-05 16:00
    关注

    阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

    electron中显示本地pdf

    你想要在electron项目中展示一个本地pdf文档，这个需求可以通过注册一个类似file://的协议来访问本地文件，然后使用iframe显示pdf文件来实现。

    下面是一个简单的示例代码：

    const { app, BrowserWindow } = require('electron');
const path = require('path');

let win;

app.on('ready', () => {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadURL(`file://${path.join(__dirname, 'index.html')}`);
});

app.on('window-all-closed', () => {
  app.quit();
});

    <!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>PDF Viewer</title>
  </head>
  <body>
    <iframe src="file:///path/to/your/pdf/file.pdf" frameborder="0" width="100%" height="100%"></iframe>
  </body>
</html>

    在上面的代码中，我们首先创建了一个electron应用程序，然后在ready事件中创建了一个新的浏览器窗口，并加载了一个名为index.html的HTML文件。在index.html文件中，我们使用了一个iframe来显示pdf文件，iframe的src属性设置为pdf文件的路径。

    需要注意的是，在上面的代码中，我们使用了file:///协议来访问本地文件，这个协议可以让electron应用程序访问本地文件。但是，这个协议可能会受到浏览器的安全限制，如果你遇到问题，可以尝试使用其他协议或方法来访问本地文件。

    希望这个示例代码能够帮助你实现你的需求。如果你遇到其他问题，可以随时问我。

    评论

报告相同问题？

问题事件

  • 创建了问题 5月5日