electron中表格导出excel使用XLSX.writeFile 更改写入位置方法

没有伞的孩子要学会努力奔跑！

已于 2023-03-30 14:17:35 修改

阅读量2.1k

点赞数

分类专栏： electron 文章标签： electron javascript 前端

于 2023-03-22 13:52:11 首次发布

本文链接：https://blog.csdn.net/wy17324808055/article/details/129708079

版权

electron 专栏收录该内容

2 篇文章

订阅专栏

在Vue项目中，使用XLSX.writeFile导出Excel文件时，默认保存在软件安装目录。在Electron环境下，通过引入os和path模块，自定义保存路径到桌面，并使用dialog.showOpenDialog选择自定义目录。这样解决了用户查找文件的不便。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题 Vue项目集成为exe程序使用electron，但是在web端可以使用的XLSX.writeFile会调用网页端保存文件API选择保存位置在electron环境下生成的文件自动保存在工作目录所以需要手动更改写入位置

web端表格导出excel代码

exportToExcel() { // 导出
            this.$nextTick(() => {
                let workbook = XLSX.utils.table_to_book(this.$refs.tableExport.$el)
                XLSX.writeFile(workbook, `${this.fileName || this.selectedLogic + '.csv'}`);
                
            })
        },

比较简单就是调用table_to_book方法把表格数据生成sheet表格数据然后调用writeFile导出，但是这种方法在electron中文件会自动生成在软件安装目录不方便用户查找，

所以本项目中我手动更改为放在桌面文件夹

如果需要自定义文件存放目录调用dialog.showOpenDialog去选择自定义目录在回调里面拿到地址替换即可

electron端代码

this.$nextTick(() => {
                let workbook = XLSX.utils.table_to_book(this.$refs.tableExport.$el)
                let fileName = this.fileName || this.selectedLogic + '.csv'
                let writePath = generatorPath(fileName)
                XLSX.writeFile(workbook, writePath);
                this.$message.success('已保存在桌面')
            })


//utils.js
export function generatorPath(fileName) {
    const os = require('os')
    const path = require('path')
    let writePath = path.join(os.homedir(), 'Desktop', `${timeFilter(new Date(), 1) + '-' + fileName}`)
    return writePath
}

XLSX API Writing Files | SheetJS Community Edition

有兴趣可以细致看一下