Electron23 文件和文件夹选择

文件选择

主进程

1
2
3
4
5
6
7
8
9
10
11
12
import { ipcMain, dialog } from "electron";

// 监听来自渲染进程的打开文件对话框请求
ipcMain.handle("open-file-dialog", async () => {
return dialog.showOpenDialog(win, {
properties: ["openFile"],
filters: [
{ name: "文本", extensions: ["txt"] },
{ name: "All Files", extensions: ["*"] },
],
});
});

如果允许多选

1
2
3
4
5
6
7
8
9
10
// 监听来自渲染进程的打开文件对话框请求
ipcMain.handle("open-file-dialog", async () => {
return dialog.showOpenDialog(win, {
properties: ["openFile", "multiSelections"],
filters: [
{ name: "文本", extensions: ["txt"] },
{ name: "All Files", extensions: ["*"] },
],
});
});

渲染进程

1
2
3
4
5
6
7
8
9
10
11
12
async selectFileClick() {
try {
const result = await ipcRenderer.invoke("open-file-dialog");
if (!result.canceled) {
console.log("选择的文件路径:", result.filePaths);
} else {
console.log("用户取消了选择");
}
} catch (error) {
console.error("选择文件时出错:", error);
}
},

注意

返回的路径是数组

文件夹选择

主进程

1
2
3
4
5
6
// 监听来自渲染进程的打开文件夹对话框请求
ipcMain.handle('open-folder-dialog', async () => {
return dialog.showOpenDialog(mainWindow, {
properties: ['openDirectory'] // 指定为选择文件夹
});
});

渲染进程

1
2
3
4
5
6
7
8
9
10
11
12
async selectFolderClick() {
try {
const result = await ipcRenderer.invoke('open-folder-dialog');
if (!result.canceled) {
console.log('选择的文件夹路径:', result.filePaths);
} else {
console.log('用户取消了选择');
}
} catch (error) {
console.error('选择文件夹时出错:', error);
}
},

文件弹窗保存

主进程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const { ipcMain } = require("electron");
const { dialog } = require("electron");
const path = require("path");

ipcMain.on("savefile", (event, arg) => {
dialog
.showSaveDialog({
defaultPath: path.join(
global.sharedObject.appBasePath,
arg ? arg : "filename.txt"
), // 保存文件的默认路径和名称
})
.then((result) => {
if (!result.canceled) {
const filePath = result.filePath;
// 在这里执行保存文件的逻辑
console.log("保存路径:", filePath);
event.reply("savefile-result", filePath);
} else {
console.log("取消保存文件");
}
})
.catch((err) => {
console.log("保存文件出错:", err);
});
});

渲染进程

1
2
3
4
5
6
const { ipcRenderer } = window.require("electron");

ipcRenderer.send("savefile", "新脑图.txt");
ipcRenderer.on('savefile-result', (event, arg) => {
console.log(arg)
})