Electron23 文件和文件夹选择

发表于 更新于 分类于
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
7
8
9
10
11
import {ipcMain, dialog} from "electron";

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

渲染进程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { ipcRenderer } = window.require("electron");

async function 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)
})