vue前端下载Excel文档配置流程
项目中不可避免出现需要下载的情况 , 大公司内部开发的工具 , 多数具有报表的导出功能 , 所以如何实现呢?
【vue前端下载Excel文档配置流程】需要的相关插件和准备工作:
1 , 从npm中下载3个插件:
npm install file-saver xlsx script-loader -save
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 = http://kandian.youth.cn/index/this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表');
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
}
多数项目是数据加图表结合的 , 目前暂时实现图表的下载 , 图表的写入有待研究 , 如果有比较熟练度小伙伴们可以一起交流啊!
- 手把手教你用python编程写一款自己的音乐下载器
- 对微前端的11个错误认识
- API监控:你应该衡量什么?
- IntelliJ IDEA 如何设置自动下载源代码和文档
- Kibana安装
- 袁岳:前端政务够有扮演智能政务驱动力的条件
- 设置电脑桌面壁纸图文教程,下载图片设置计算机系统屏幕背景方法
- 后端程序员福音:vue-element-admin
- 《数字孪生体技术白皮书》重磅发布(附完整版下载)
- 如何让程序像人一样的去批量下载歌曲?Python爬取付费歌曲