Electron封装Ionic渐进式应用文件下载功能异常求助

我之前也碰到过类似的问题，Electron 对下载事件的处理逻辑和普通浏览器差异不小——默认情况下它不会自动完成文件保存的收尾工作，得我们在主进程里手动配置才能让下载功能正常跑起来。下面给你两种贴合需求的解决方案：

这个方案会直接把文件存到用户系统的默认下载目录，和浏览器的默认行为一致，不需要用户手动选择路径。

主进程代码（main.js/main.ts） #

在创建 BrowserWindow 的逻辑后面，给窗口的 webContents 添加 will-download 事件监听：

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 若你的Ionic应用需要访问Node API可开启，生产环境更推荐用preload脚本替代
      nodeIntegration: true,
      contextIsolation: false,
      // 若下载跨域资源且服务器未配置CORS，可临时设置webSecurity: false（生产环境不建议）
      // webSecurity: false
    }
  });

  // 加载Ionic应用（开发环境用loadURL，打包后换成loadFile加载本地index.html）
  mainWindow.loadURL('http://localhost:8100');

  // 监听下载请求事件
  mainWindow.webContents.session.on('will-download', (event, item) => {
    // 获取系统默认下载文件夹路径
    const downloadPath = path.join(app.getPath('downloads'), item.getFilename());
    
    // 设置文件保存路径
    item.setSavePath(downloadPath);

    // 监听下载完成状态
    item.on('done', (event, state) => {
      if (state === 'completed') {
        console.log(`文件已成功保存到: ${downloadPath}`);
        // 可选：自动打开下载文件夹
        // shell.openPath(app.getPath('downloads'));
      } else {
        dialog.showErrorBox('下载失败', `文件下载出错: ${state}`);
      }
    });
  });
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

渲染进程（Ionic应用） #

你原来的 <a> 标签可以完全保留，不需要修改：

<a href="http://myexternalserver.com/example.pdf" download>下载PDF</a>

用户点击链接后，主进程的 will-download 事件会自动捕获请求，把文件存到默认下载文件夹。

这个方案会弹出系统原生的“保存文件”对话框，让用户自主选择文件存储位置，灵活性更高。

主进程代码（main.js/main.ts） #

同样监听 will-download 事件，但通过 dialog.showSaveDialog 让用户选择路径：

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadURL('http://localhost:8100');

  mainWindow.webContents.session.on('will-download', async (event, item) => {
    // 阻止Electron默认的下载行为，我们手动处理
    event.preventDefault();

    // 弹出保存文件对话框
    const { filePath, canceled } = await dialog.showSaveDialog(mainWindow, {
      defaultPath: path.join(app.getPath('downloads'), item.getFilename()),
      filters: [
        { name: 'PDF文件', extensions: ['pdf'] } // 限制保存格式，可按需修改
      ]
    });

    if (!canceled && filePath) {
      // 设置保存路径并恢复下载
      item.setSavePath(filePath);
      item.resume();

      // 监听下载完成状态
      item.on('done', (event, state) => {
        if (state === 'completed') {
          dialog.showMessageBox(mainWindow, {
            type: 'info',
            title: '下载完成',
            message: `文件已保存到: ${filePath}`
          });
        } else {
          dialog.showErrorBox('下载失败', `文件下载出错: ${state}`);
        }
      });
    }
  });
}

// 剩余的app生命周期代码和方案1一致...

渲染进程（Ionic应用） #

同样不需要修改原来的 <a> 标签，点击后会自动触发保存对话框。

• 生产环境建议用 preload 脚本替代直接开启 nodeIntegration，避免安全风险，上述方案的主进程处理逻辑不受影响。
• 跨域资源下载：确保目标服务器配置了正确的CORS响应头，否则Electron可能拦截请求，临时设置 webSecurity: false 仅适合测试场景。
• 大文件下载：可以监听 item 的 updated 事件获取下载进度，在Ionic界面添加进度条，提升用户体验。

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