如何在Electron.js的WebView中实现任意内容下载？

步骤1：在HTML中添加WebView标签 #

先确保你的index.html里包含WebView元素，用于加载目标网页：

<!DOCTYPE html>
<html>
<head>
    <style>
        webview { width: 100%; height: 100vh; display: block; }
    </style>
</head>
<body>
    <webview id="mainWebview" src="https://example.com"></webview>
    <script src="./renderer.js"></script>
</body>
</html>

步骤2：编写渲染进程逻辑处理下载 #

在renderer.js中，获取WebView实例并监听下载相关事件，利用Electron的dialog模块处理保存路径选择：

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

// 获取webview元素
const webview = document.getElementById('mainWebview');

// 监听下载触发事件
webview.addEventListener('will-download', (event, item, webContents) => {
    // 弹出保存对话框，让用户选择保存路径
    dialog.showSaveDialog({
        defaultPath: item.getFilename(), // 默认使用文件原始名称
        filters: [
            { name: '所有文件', extensions: ['*'] } // 可按需设置文件类型过滤规则
        ]
    }).then(result => {
        if (!result.canceled) {
            // 设置下载保存路径
            item.setSavePath(result.filePath);
            
            // 可选：监听下载进度
            item.on('updated', (event, state) => {
                if (state === 'progressing') {
                    item.isPaused() ? console.log('下载已暂停') : console.log(`下载进度：${item.getReceivedBytes()}/${item.getTotalBytes()}`);
                }
            });
            
            // 监听下载完成状态
            item.once('done', (event, state) => {
                state === 'completed' ? console.log(`下载完成：${result.filePath}`) : console.log(`下载失败：${state}`);
            });
        }
    }).catch(err => {
        console.error('选择保存路径出错：', err);
    });
});

步骤3：确认主进程配置有效性 #

你现有的主进程配置已满足基础要求，确保以下关键配置项保持开启：

webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    webviewTag: true, // 必须开启才能使用webview标签
    // 其他配置保持不变
}

核心说明 #

• will-download是WebView触发下载的核心事件，会在文件开始下载时触发
• 通过dialog.showSaveDialog让用户自定义保存路径，替代默认下载目录
• 借助item对象可实现下载进度监听、暂停/恢复下载、获取文件元信息等操作

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