Electron/React应用自定义格式文件保存功能实现问题咨询

一、自定义扩展名报错的解决 #

你用window.showSaveFilePicker时出现的dyn.age80g55r报错，是因为macOS的UTType（统一类型标识符）对自定义扩展名的校验规则导致的。直接用application/octet-stream搭配自定义扩展名会触发这个问题，你可以换一种方式配置文件类型：

不用通过MIME类型指定，而是在types数组里直接声明扩展名，修改后的代码如下：

const get_file_name = async () => {
    try {
        return await window.showSaveFilePicker({
            types: [{
                name: "自定义项目文件",
                extensions: ["custom"]
            }],
        });    
    } catch(err) {
        // 捕获用户取消操作
        return null;
    }
}

这样就能正常使用专属的.custom扩展名，同时避开UTType的校验问题。如果需要兼容更多场景，也可以在accept里补充对应的自定义MIME类型，比如"application/x-custom-project": [".custom"]，不过直接用extensions字段更简单直接。

二、Blob内容无法下载的修复 #

你的代码里有个拼写错误：link.downlaod应该是link.download，这是导致下载失效的原因之一。但更适合Electron的方式是直接利用FileSystemFileHandle的写入API，不用依赖浏览器的a标签跳转，代码示例：

// 假设你已经有了要保存的blob数据
const saveProject = async (blob) => {
    const fileHandle = await get_file_name();
    if (!fileHandle) return; // 用户取消操作

    const writable = await fileHandle.createWritable();
    await writable.write(blob);
    await writable.close();
}

// 调用保存
saveProject(yourProjectBlob);

这种方式直接对用户选择的文件进行写入，不会出现打开新页面的问题，更符合桌面应用的体验。

三、更优的保存方案实现 #

对于Electron应用，更推荐使用Electron内置的dialog模块来获取保存路径，它比浏览器的showSaveFilePicker更适配桌面场景，支持跨平台的文件选择逻辑，结合Node.js的fs模块写入文件，示例代码：

主进程代码（main.js）：

const { app, BrowserWindow, dialog, ipcMain } = require('electron');
const fs = require('fs').promises;
const path = require('path');

// 监听渲染进程的保存请求
ipcMain.handle('save-project', async (event, blobData) => {
    const { filePath, canceled } = await dialog.showSaveDialog({
        title: '保存项目',
        filters: [
            { name: '自定义项目文件', extensions: ['custom'] }
        ]
    });

    if (canceled || !filePath) return false;

    // 将Blob转为Buffer写入文件
    const buffer = Buffer.from(await blobData.arrayBuffer());
    await fs.writeFile(filePath, buffer);
    return true;
});

渲染进程代码：

// 点击保存按钮时调用
async function handleSave() {
    // 假设yourProjectBlob是要保存的Blob数据
    const success = await window.electronAPI.saveProject(yourProjectBlob);
    if (success) {
        alert('保存成功');
    }
}

这种方案的优势：

• 跨平台兼容性更好，Electron的dialog会调用系统原生的文件选择器
• 主进程处理文件IO，更符合Electron的架构规范（渲染进程尽量少操作文件系统）
• 可以更灵活地处理文件写入的错误和进度提示

另外，还可以扩展以下功能提升用户体验：

• 自动保存：定时将项目数据保存到临时文件，防止意外丢失
• 版本备份：每次保存时生成备份文件，支持恢复历史版本
• 增量保存：只保存修改的部分，提升大文件的保存速度

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