Electron加载远程页面时内置PDF查看器下载按钮失效求助

问题场景 #

用Electron加载远程页面时，打开PDF会唤起系统默认查看器，但PDF内的下载按钮完全没反应，也没有任何报错信息。

项目依赖版本：

"dependencies": {
    "bonjour": "^3.5.0",
    "node-dns-sd": "^1.0.1",
    "request": "^2.88.2",
    "electron-squirrel-startup": "^1.0.1"
  },
  "devDependencies": {
    "@electron-forge/cli": "^7.9.0",
    "@electron-forge/maker-deb": "^7.9.0",
    "@electron-forge/maker-rpm": "^7.9.0",
    "@electron-forge/maker-squirrel": "^7.9.0",
    "@electron-forge/maker-zip": "^7.9.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.9.0",
    "@electron-forge/plugin-fuses": "^7.9.0",
    "@electron/fuses": "^1.8.0",
    "electron": "38.1.0"
  }

修复方案 #

1. 改用Electron内置PDF查看器 #

默认唤起系统PDF查看器会让下载请求脱离Electron控制，改成在窗口内加载PDF就能接管下载逻辑：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      plugins: true, // 启用内置PDF插件
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  // 拦截PDF导航请求，在当前窗口加载
  mainWindow.webContents.on('will-navigate', (event, url) => {
    if (url.endsWith('.pdf')) {
      event.preventDefault();
      mainWindow.loadURL(`data:text/html,<embed src="${url}" width="100%" height="100%" type="application/pdf">`);
    }
  });

  mainWindow.loadURL('你的远程页面地址');
}

app.whenReady().then(createWindow);

2. 监听下载事件强制处理 #

如果必须用系统PDF查看器，可通过will-download事件手动接管下载流程：

const { app } = require('electron');

// 在窗口创建后添加监听
mainWindow.webContents.session.on('will-download', (event, item) => {
  // 指定下载保存路径
  const savePath = `${app.getPath('downloads')}/${item.getFilename()}`;
  item.setSavePath(savePath);

  // 可选：监听下载状态
  item.on('done', (event, state) => {
    state === 'completed' ? console.log('下载完成') : console.log(`下载失败: ${state}`);
  });
});

3. 检查Web权限配置 #

确保webPreferences没有限制下载操作：

webPreferences: {
  webSecurity: true, // 保持安全默认，若有跨域下载需求可临时改为false
  allowRunningInsecureContent: false
}

验证步骤 #

1. 重启Electron应用，打开目标远程页面
2. 点击PDF内的下载按钮，检查系统下载目录是否有文件生成
3. 查看控制台日志，确认下载状态输出正常

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