Vue框架开发Electron9 - 文件dialog

dialog是node_module提供的一个可以打开文件对话框的模块，下面基于打开文件和保存文件讲解他的用法。

在Main主进程里面使用

1. 打开文件操作

import { dialog } from 'electron'     //导入dialog

//showOpenDialog打开文件操作
dialog.showOpenDialog({
    properties: [
        'openFile'    //允许选择文件
    ],
    filters: [    //文件筛选
        { name: 'Binary', extensions: ['bin'] },    //二进制文件
        { name: 'All Files', extensions: ['*'] }    //所有文件
    ]
 }, files => {
    if (files) {
        console.log(files)
        store.dispatch('AddFile', files[0])    //保存文件名称
        /* 以下是读取文件，转成二进制文件操作 */
        try {
            const fs = require('fs')

            var filestate = fs.statSync(store.state.SystemData.filename)
            FileData = Buffer.alloc(filestate.size)
            var fd = fs.openSync(store.state.SystemData.filename, 'r')
            fs.readSync(fd, FileData, 0, filestate.size, 0)
            fs.closeSync(fd)
        } catch (error) {
            console.log(error)
            SendMsg(APP_EVENT_FILE_OPEN_ERROR, error)
            return
        }
    }
})

 

2. 保存文件操作

import { dialog } from 'electron'     //导入dialog

//showSaveDialog保存文件操作
dialog.showSaveDialog({
    defaultPath: './' + xlsxTital +'--Data.csv',    //默认路劲的默认文件名
    title: '数据另存为',
    filters: [
        { name: 'CSV', extensions: ['csv'] }    //另存为的数据类型
    ]
    }, files => {
    if (files) {
        console.log(files)
        store.dispatch('SetCsvFilePath', files)    //另存为的文件名
    }
})

以上两种就是我总结用来打开和保存文件的dialog，结合上一篇的store可以一起使用。