最近在使用 Electron 做一个手写字体生成图片的工具。 不可避免的，遇到了通过Electron 往本地存文件的问题。
在Electron 中，存取本地文件，有很多种办法。本文介绍最常用的一种办法。 通过 Electron 框架提供的能力，和 Node.js 的 fs 文件管理模块实现本地文件的存取。
使用 app.getPath 和 fs 模块存储文件
首先，我们可以通过 app.getPath 来获取当前用户的 data 存放目录。
app.getPath(’userData’) 返回一个字符串，该字符串表示应用程序的用户数据目录的路径。这个目录通常是用来存储用户相关的数据，例如配置文件、缓存等。具体路径会根据操作系统而变化。
-
windows 系统中， 会返回类似（
C:\Users\<username>\AppData\Roaming\<YourAppName>）这样的结果。 -
Mac 系统中，会返回（
/Users/<username>/Library/Application Support/<YourAppName>） 这种结果。 -
linux 系统中 则会返回 （
/home/<username>/.config/<YourAppName>） 这种结果。
我们通过 node.js 的path 模块， 使用 path.join(app.getPath('userData'), 'myFile.txt') 就能得到一个完整的文件路径。 接着使用 fs 模块的 来写入内容即可。
示例代码如下：
const {
app
} = require('electron');
const fs = require('fs');
const path = require('path');
const filePath = path.join(app.getPath('userData'),'/myfile.txt'); // Example file path
try {
fs.writeFileSync(filePath, 'hello world', 'utf-8');
} catch (e) {
console.error('Failed to save the file!');
}
这种做法，有一个问题。那就是，用户不能在保存的时候，主动选择文件存放目录。
使用 Dialog API 和 fs 模块配合
Electron 提供了一个 Dialog API 来处理文件对话框。您可以专门调用一个保存对话框，让用户选择保存文件的位置。
下面是一个简单的，示例代码：
const {
dialog
} = require('electron').remote;
const fs = require('fs');
const options = {
title: 'Save file',
defaultPath: 'my_filename',
buttonLabel: 'Save',
filters: [{
name: 'txt',
extensions: ['txt']
},
{
name: 'All Files',
extensions: ['*']
},
],
};
dialog.showSaveDialog(null, options).then(({
filePath
}) => {
if (filePath) {
fs.writeFileSync(filePath, 'hello world', 'utf-8');
}
});
需要注意的点：
因为 fs 模块 和 Dialog 只能在，主进程中被调用。 但是我们的应用程序交互逻辑是在渲染进程，所以这段示例代码，只是演示了，如何去调用 Dialog 并手动选择文件存储位置。 并没有实际应用场景的参考意义。
实际应用场景封装 调整
对存取图片的封装想法跟之前的采集桌面思路基本一致（如果，没看过可以翻一下以前的文章）。 我们利用 Electron 的 ipcmain 模块在主进程中注册方法。 然后，在渲染进程去调用。 整理实现流程大概如下图所示。
实例代码：
// 主进程 -> main.js
// .... ohter code
// ... 在主进程注册我们封装后的 SaveFile 方法
const { app, BrowserWindow, ipcMain, dialog} = require("electron");
const path = require("path");
const fs = require('fs');
/**
* @param options: { title: String, defaultPath: String, buttonLabel: String, filters: area}
* @param content: String
* @returns Promise
*/
ipcMain.handle('saveFile', async (event, content, options) => {
let path;
try {
const { filePath } = await dialog.showSaveDialog(null, options);
path = filePath;
} catch(e) {
return Promise.reject({error: e, success: false});
}
if(path) {
try {
fs.writeFileSync(path, content, 'utf-8');
return Promise.resolve({error: null, success: true});
} catch(e) {
return Promise.reject({error: e, success: false});
}
}
return Promise.reject({error: e, success: false, canceled: true});
});
// 其他代码 ....
// Vue 文件、
// 在我们，的Vue 业务中。直接通过 ipc 调用
<script setup>
import {reactive, ref, onMounted} from "vue";
const textContent = ref('hello world');
const { ipcRenderer } = require('electron');
const exportImg = async () => {
try {
// 注意-> 第一个参数，为 主进程注册进来的方法名称。
// 其他参数为， 主进程注册的函数参数。
await ipcRenderer.invoke('saveFile', 'hello', {
title: '导出图片',
buttonLabel: '导出',
defaultPath: 'text.txt',
filters: [{
name: 'All Files',
extensions: ['*']
}]
})
} catch(e) {
console.error('出错了！', e)
}
}
</script>
<template>
<a-config-provider :csp="{ nonce: 'YourNonceCode' }">
<a-button type="primary" @click="exportImg">导出</a-button>
</a-config-provider>
</template>
总结
在Electron 中，向本地存储和读取文件（文本或者是图片）， 都离不开 node.js 的 fs 模块， 这个是文件系统处理的核心模块。
然后，我们搭配， path 模块。 dialog 模块，可以实现，用户主动选择存放位置。 或者 直接存到默认软件系统的 data 目录中。
当然，这些模块都只能在主进程中使用。 所以，我们不可避免的用到了， 之前的老朋友， ipc 进程间通讯方式。
本文，基于我在做一个手写照片 模拟器中遇到存储问题而来。 软件正在书写中。 后续会开源，并放出使用的视频。
请关注我的后续文章。
