vue前端下载Excel文档配置流程

项目中不可避免出现需要下载的情况,大公司内部开发的工具,多数具有报表的导出功能,所以如何实现呢?

需要的相关插件和准备工作:

1,从npm中下载3个插件:

npm install file-saver xlsx>

2,另外需要再去找到两个js插件放到项目文件夹:

Blob.js和Export2Excel.js两个js

本例放到:assets下新建js文件夹内

3,在Export2Excel.js源码内顶部引入:

require('script-loader!file-saver');

require('script-loader!../../assets/js/Blob');

require('script-loader!xlsx/dist/xlsx.core.min');

4,在需要使用下载的地方引入:

import {export_json_to_excel} from './../assets/js/Export2Excel'

注意:Export2Excel导出方式为default ,需要以{}导出变量读取

5,使用:

表格数据如下:

data(){

return{

tableData:[{index:"123",provinces:"123", orderMoney:"123", incomeMoney:"123",}]

}

},

methods:{

exportToExcel() {

//excel数据导出

//表格标题

const tHeader = ['序号','支出', '收入', '收益总额'];

//表格数据字段

const filterVal = ['index','provinces', 'orderMoney', 'incomeMoney'];

//表格整个数据组

const list = this.tableData;

const data = this.formatJson(filterVal, list);

export_json_to_excel(tHeader, data, '列表');

},

formatJson(filterVal, jsonData) {

return jsonData.map(v => filterVal.map(j => v[j]))

}

}

多数项目是数据加图表结合的,目前暂时实现图表的下载,图表的写入有待研究,如果有比较熟练度小伙伴们可以一起交流啊!