Vue+Element表格数据通过前端导出为Excel文件

最近在使用Vue2+Element开发，需要把表格中的数据导出并生成Excel文件，这里用到了xlsx和file-saver两个插件库。

首先安装这两个插件：

npm install xlsx

npm install file-saver

这里是我的版本，你可以自定义版本。

然后新建一个文件夹，用来存放Export2Excel.js，可以网上搜索这个，也可以直接下载我的。

链接：https://pan.baidu.com/s/1Hj-hW7bdhkVZVfC80Lo_Cg?pwd=andy

在你表格页面中，定义两个方法：

formatJson(filterVal, jsonData) {
    return jsonData.map(v =>
        filterVal.map(j => {
            if (j === "id") {  //此处如没有要格式化的列，可以不用此判断
                // return parseTime(v[j])
                return v[j];
            } else {
                return v[j];
            }
        })
    );
}

exportData(){
    import("../excel/Export2Excel").then(excel => {
        //tHeader是定义的excel头部字段
        const tHeader = [
            "商品ID", 
            "商品名称", 
            "商品价格", 
            "商品数量", 
            "商品类目",
            "商品图片",
            "商品卖点",
            "商品描述"
           ];
        //filterVal是定义的Element表格tableData数据字段
        const filterVal = [
            "id",
            "title",
            "price",
            "number",
            "category",
            "image",
            "sellPoint",
            "descs"
        ];
        const data = this.formatJson(filterVal, this.tableData)
        excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: "商品",  //导出文件的名，自定义就好
            bookType: this.bookType //bookType：xlsx
        });
    });
}

最后给你的按钮绑定上exportData方法，就可以愉快的导出Excel文件了！