Electron不使用原生对话框如何修改文件保存弹窗的标题与保存类型

解决方案 #

修正文件保存类型 #

保存类型识别异常通常由两个前端可修复的问题导致，不需要修改Electron配置：

• 构造Blob对象时必须传入和文件类型匹配的MIME类型参数，示例写法：

// 例如下载xlsx格式的Excel文件
const file = new Blob([接口返回的文件流数据], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// 下载PDF示例
// const file = new Blob([fileData], { type: 'application/pdf' });

• 传给download属性的fileName必须携带正确的文件扩展名，比如下载zip文件时文件名要写为XXX.zip，后缀名会被用来自动匹配保存类型。

修正保存对话框标题为Save As #

仅靠前端<a>标签没有提供修改系统保存对话框标题的配置属性，这个行为由Electron的默认下载逻辑控制。在不使用自定义原生对话框的前提下，只需要在Electron主进程加一段轻量的全局配置，修改默认下载对话框的参数即可，不需要自己调用dialog相关API弹框：

// Electron主进程代码，在创建窗口后添加
win.webContents.session.on('will-download', (event, downloadItem) => {
  // 直接修改默认保存对话框的标题
  downloadItem.setSaveDialogOptions({
    title: 'Save As'
  })
})

现有代码优化 #

你当前的前端代码缺少Blob内存释放逻辑，建议补充避免内存泄漏：

const handleSaveFiles = (file: Blob, fileName: string): void => {
  const fileDownloadUrl = window.URL.createObjectURL(file);
  if (downloadRef.current) {
    downloadRef.current.href = fileDownloadUrl;
    downloadRef.current.download = fileName;
    downloadRef.current.click();
    // 点击下载后释放blob地址占用的内存
    window.URL.revokeObjectURL(fileDownloadUrl);
  }
};

内容的提问来源于stack exchange，提问作者tuan.tran