Electron应用嵌入无工具栏全屏PDF的实现方案咨询

你遇到的缩放异常、工具栏无法隐藏问题，根源是直接调用loadFile加载PDF时，默认调用Chromium内置PDF查看器，该查看器默认显示工具栏、缩放逻辑优先适配PDF原始尺寸而非窗口尺寸，不需要复杂排查，下面两个方案都可以直接落地，优先选方案1，改造成本最低。

方案1：通过内置PDF查看器隐藏参数实现（零额外依赖） #

Chromium内置PDF查看器支持URL hash参数控制显示行为，不需要引入第三方依赖，只需要修改现有BrowserWindow配置和加载逻辑即可：

• 核心可用参数：
  • toolbar=0：完全隐藏PDF查看器顶部工具栏
  • view=FitH：强制PDF水平方向适配窗口宽度，也可替换为view=Fit实现整页适配窗口
  • zoom=XX：强制设置缩放百分比，比如zoom=100就是100%缩放，可根据你的设备显示效果微调数值，直到刚好撑满屏幕
• BrowserWindow配置补全：
  • 加autoHideMenuBar: true替代setMenu(null)，避免Windows平台下菜单栏残影
  • 直接开启fullscreen: true实现全屏，不需要硬编码宽高，避免系统显示缩放（比如125%系统缩放）导致的尺寸错位
  • 本地文件路径用path模块拼接绝对路径，避免打包后相对路径失效
• 改造后可直接运行的代码：

const path = require('path');
// Electron 14+版本需单独安装@electron/remote，老版本可直接从electron引入remote
const { BrowserWindow } = require('@electron/remote');

$('#btn_0-0').on('click', function(e) {
    e.stopPropagation()
    // 用绝对路径加载本地PDF，打包后路径不会出错
    const pdfPath = path.join(__dirname, "./app/assets/docs/TreatmentLandscape.pdf");
    openPDF(pdfPath)
})

function openPDF(filePath) {
    let pdfWindow = new BrowserWindow({
        fullscreen: true,
        autoHideMenuBar: true,
        frame: false, // 需要完全无边框则开启，需要系统窗口边框可删除该配置
        webPreferences: {
            // 新版本Electron不需要设置plugins: true即可加载内置PDF查看器，若加载失败可再开启
            contextIsolation: true,
            sandbox: true
        }
    });

    // 本地文件拼控制参数，远程PDF直接在原URL后拼接相同hash参数即可
    const pdfUrl = new URL(`file://${filePath}`);
    pdfUrl.hash = 'toolbar=0&view=FitH&zoom=100';
    pdfWindow.loadURL(pdfUrl.toString());

    pdfWindow.on('closed', function() {
        pdfWindow = null
    })
}

外部网站加载的PDF使用逻辑完全一致，直接在远程PDF的URL后拼接#toolbar=0&view=FitH&zoom=100即可实现相同效果。

方案2：自定义PDF渲染页实现（100%可控无默认UI） #

如果方案1在你的Electron版本上存在兼容问题，可使用PDF.js自定义渲染页面，完全抛弃Chromium默认PDF查看器：

• 新建一个空白HTML页面作为PDF渲染容器，页面内只保留一个全屏canvas元素，不添加任何其他UI
• 引入PDF.js渲染库，通过窗口参数传入要加载的PDF地址，将PDF内容渲染到canvas上，自行设置渲染缩放比例，让PDF刚好撑满整个canvas
• 打开PDF窗口时直接加载这个本地HTML页面，把PDF路径作为参数传入即可
• 该方案没有任何默认UI，渲染逻辑完全可控，不会出现工具栏残留、缩放不受控的问题，适合对显示精度要求极高的场景，缺点是需要额外编写几十行渲染逻辑。

原有代码的问题修正 #

• 不要用相对路径直接调用loadFile，Electron打包后应用运行路径会变化，相对路径大概率指向错误位置，必须用path模块结合__dirname拼接绝对路径
• setMenu(null)在部分Windows系统版本下会出现菜单栏残影，优先使用autoHideMenuBar: true配置隐藏菜单栏
• 硬编码窗口宽高适配全屏容易受系统显示缩放比例影响，直接使用fullscreen: true配置可以自动适配屏幕实际分辨率。

内容的提问来源于stack exchange，提问作者Andrea