electron 调用本地文件对话框

最新推荐文章于 2024-05-18 12:00:00 发布

老朱自强不息

最新推荐文章于 2024-05-18 12:00:00 发布

阅读量2.3k

点赞数 1

分类专栏： electron 文章标签： electron openfile savefile dialog

本文链接：https://blog.csdn.net/moyebaobei1/article/details/104408463

版权

electron 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用electron 调用本地的文件对话框。详细说明，可以参考https://www.electronjs.org/docs/api/dialog#dialogshowsavedialogbrowserwindow-options。

我这里提供我的实现，亲测可用。

打开文件

 open_file() {
        const { dialog } = require('electron').remote;
        dialog.showOpenDialog({
            title: "打开文件",
            defaultPath: "",
            properties: ['openFile', 'multiSelections'],
            filters: [
                { name: 'Text', extensions: ['html', 'js', 'json', 'md'] },
                { name: 'Custom File Type', extensions: ['as'] },
                { name: 'All Files', extensions: ['*'] }
            ]
        }).then(result => {
            console.log(result.filePaths);
            const fs = require('fs');

            // _this.fs.readFile(result.filePaths[0], 'utf-8', (err, data) => {
            //     if (err) {
            //         alert("An error ocurred reading the file :" + err.message)
            //         return
            //     }
            //     // handle the file content
            //     event.sender.send('fileData', data)
            // })
            return result.filePaths[0];

        }).catch(err => {
            console.log(err)
        })
    }

保存文件

save_file(info) {
        var _this = this;
        const { dialog } = require('electron').remote;
        dialog.showSaveDialog({
            title: "保存文件",
            defaultPath: "",
            properties: ['saveFile'],
            filters: [
                { name: 'Text', extensions: ['json'] },
                { name: 'Custom File Type', extensions: ['as'] },
                { name: 'All Files', extensions: ['*'] }
            ]
        }).then(result => {
            const fs = require('fs');

            var fd = fs.openSync(result.filePath, 'w');
            fs.writeSync(fd, info);
            fs.closeSync(fd);
        }).catch(err => {
            console.log(err)
        })
    }

信息提示框

/**
     * 
     * @param {_title} _title : 消息框抬头
     * @param {_type} _type : 消息类型，比如error，none, info, warnning等
     * @param {_msg} _msg: 消息内容 
     */
    show_message(_title, _type, _msg) {
        const { dialog } = require('electron').remote;

        if (_title == "" || _title == null || _title == undefined) _title = "错误";
        if (_type == "" || _type == null || _type == undefined) _type = "error";
        if (_msg == "" || _msg == null || _msg == undefined) _msg = "This is a message.";
        dialog.showMessageBox({
            title: _title,
            type: _type,
            message: _msg
        })
    }

最后附上一张截图

整个文件操作实现，使用了ES6中的class特性。完整代码如下

/**
 * @description: 集成node模块，调用electron 使用系统资源
 * @author: zy
 * @field: 2020.2.20
 * @param: 具体参数可以参考https://cloud.tencent.com/developer/section/1116149
 */

class Dialog_Mgr {
    constructor() {
        var _this = this;
        _this.fs = require('fs');
    }

    open_file() {
        const { dialog } = require('electron').remote;
        dialog.showOpenDialog({
            title: "打开文件",
            defaultPath: "",
            properties: ['openFile', 'multiSelections'],
            filters: [
                { name: 'Text', extensions: ['html', 'js', 'json', 'md'] },
                { name: 'Custom File Type', extensions: ['as'] },
                { name: 'All Files', extensions: ['*'] }
            ]
        }).then(result => {
            console.log(result.filePaths);
            const fs = require('fs');

            // _this.fs.readFile(result.filePaths[0], 'utf-8', (err, data) => {
            //     if (err) {
            //         alert("An error ocurred reading the file :" + err.message)
            //         return
            //     }
            //     // handle the file content
            //     event.sender.send('fileData', data)
            // })
            return result.filePaths[0];

        }).catch(err => {
            console.log(err)
        })
    }

    save_file(info) {
        var _this = this;
        const { dialog } = require('electron').remote;
        dialog.showSaveDialog({
            title: "保存文件",
            defaultPath: "",
            properties: ['saveFile'],
            filters: [
                { name: 'Text', extensions: ['json'] },
                { name: 'Custom File Type', extensions: ['as'] },
                { name: 'All Files', extensions: ['*'] }
            ]
        }).then(result => {
            const fs = require('fs');

            var fd = fs.openSync(result.filePath, 'w');
            fs.writeSync(fd, info);
            fs.closeSync(fd);
        }).catch(err => {
            console.log(err)
        })
    }

    /**
     * 
     * @param {_title} _title : 消息框抬头
     * @param {_type} _type : 消息类型，比如error，none, info, warnning等
     * @param {_msg} _msg: 消息内容 
     */
    show_message(_title, _type, _msg) {
        const { dialog } = require('electron').remote;

        if (_title == "" || _title == null || _title == undefined) _title = "错误";
        if (_type == "" || _type == null || _type == undefined) _type = "error";
        if (_msg == "" || _msg == null || _msg == undefined) _msg = "This is a message.";
        dialog.showMessageBox({
            title: _title,
            type: _type,
            message: _msg
        })
    }
}