electron——dialog(实现导出excel)
程序员文章站
2022-04-15 15:28:07
背景 前端点击导出excel按钮后,请求完需要导出的数据后发送给主进程electron,由主进程保存到本地 dialog 显示用于打开和保存文件、警报等的本机系统对话框。 模块提供了api来展示原生的系统对话框,例如打开文件框,alert框,所以web应用可以给用户带来跟系统应用相同的体验. 前端代 ......
背景
前端点击导出excel按钮后,请求完需要导出的数据后发送给主进程electron,由主进程保存到本地
dialog
显示用于打开和保存文件、警报等的本机系统对话框。
dialog
模块提供了api来展示原生的系统对话框,例如打开文件框,alert框,所以web应用可以给用户带来跟系统应用相同的体验.
let win = ...; // browserwindow in which to show the dialog const dialog = require('electron').dialog; console.log(dialog.showopendialog({ properties: [ 'openfile', 'opendirectory', 'multiselections' ]}));
前端代码(渲染进程)
// 引入ipcrenderer模块 const { ipcrenderer } = require('electron') // 表格数据拟定为 data let excelmodel = new blob([data], { type: "application/octet-stream" })
// 创建一个filereader的实例 let reader = new filereader() // 开始读取指定的blob中的内容。一旦完成,result属性中将包含一个data: url格式的base64字符串以表示所读取文件的内容。 reader.readasdataurl(excelmodel) // 处理 load 事件。该事件在读取操作完成时触发 reader.addeventlistener("loadend", function() { // reader.result 包含被转化为类型数组 typed array 的 blob // 向主进程发送下载excel消息 ipcrenderer.send("savedialog", { basecode: reader.result, filetype: 'excel', filename: '封神榜' }) // 接收主进程发送回来的下载成功回调 ipcrenderer.once('succeeddialog', event => { // 成功回调 }) // 接收主进程发送回来的下载失败回调 ipcrenderer.once('defeateddialog', event => { // 失败回调 }) })
electron代码(主进程)
// 创建browserwindow实例 let win = new browserwindow(browser) // 引入dialog、ipcmain、fs模块 const { dialog, ipcmain } = require('electron') const fs = require('fs') // 定义文件下载扩展名选择 const extensiontype = { // 图片 images: [ { name: '.jpg', extensions: ['jpg'] }, { name: '.png', extensions: ['png'] }, { name: '.gif', extensions: ['gif'] }, ], // excel excel: [ { name: '.xlsx', extensions: ['xlsx'] }, { name: '.xls', extensions: ['xls'] }, ] } //在主线程下,通过ipcmain对象监听渲染线程传过来的savedialog事件 ipcmain.on('savedialog', (event, arg) => { // 打开弹窗 dialog.showsavedialog(win, { // 在 windows 和 linux 上, 打开对话框不能同时是文件选择器和目录选择器, 因此如果在这些平台上将 properties 设置为["openfile"、"opendirectory"], 则将显示为目录选择器。 properties: ['openfile', 'opendirectory'], // 默认情况下使用的绝对目录路径、绝对文件路径、文件名 defaultpath: arg.filename, // 文件下载扩展名 filters: [ ...extensiontype[arg.filetype] ], // 点击保存回调 }, filepath =>{ // filepath存在则为保存路径 否为undefined // 去掉头部无用字段并将base64转码成buffer let databuffer = buffer.from(arg.basecode.split('base64,')[1], 'base64') // 检测文件扩展名是否正确 let typeflag = extensiontype[arg.filetype].some(item => { if(filepath) { return item.extensions[0] === filepath.split('.')[1] } else { return false } }) if(typeflag){ fs.writefile(filepath, databuffer, err => { // 失败 if (err) { // 向渲染进程发送消息通知失败 win.webcontents.send('defeateddialog') } }) // 成功 向渲染进程发送消息通知成功 win.webcontents.send('succeeddialog') // 判断是否存在保存路径 } else if(filepath !== undefined){ dialog.showmessagebox({ type: 'error', title: '系统提示', message: '系统检测出文件类型异常,请检查并重新选择或填写' }) } }) })
之所以在确定后再次对文件的扩展名进行判断,是因为传入excel的文件扩展名仍然可以保存其他扩展名,如.jpg,具体原因作者也不太清楚>﹏<,以后知道后会更新的。。。
以上仅供参考,如有问题欢迎指出,但我不一定改(~ ̄▽ ̄)~