当前位置: 首页 > Web前端 > vue.js

Vue中导出json数据到Excel表格

时间:2023-03-31 18:37:30 vue.js

可以导出echarts图表数据,table表格等json格式数据1.安装依赖npminstallfile-saver--savenpminstallxlsx--savenpminstallscript-loader--save-dev2.下载需要的两个js文件Blob.js和Export2Excel.js链接:https://pan.baidu.com/s/18Pafeozsaca0ylTVrZQlzg?pwd=t3pc提取码:t3pc3.在src目录下新建vendor文件夹,将Blob.js和Export2Excel.js放入其中4.更改webpack.base.conf.js中配置的aliasinresolve:'vendor':path.resolve(__dirname,'../src/vendor')5.在.vue文件中的脚本代码data(){return{list:[{name:'韩国设计时尚风衣大号',number:'MPM00112',salePrice:'¥999.00',stocknums:3423,salesnums:3423,sharenums:3423,},{name:'韩版时尚大风衣',number:'MPM00112',salePrice:'¥999.00',stocknums:3423,salesnums:3423,sharenums:3423,},]}methods:{formatJson(filterVal,jsonData){    returnjsonData.map(v=>filterVal.map(j=>v[j]))  },export2Excel(){    require.ensure([],()=>{const{export_json_to_excel}=require('../../../vendor/Export2Excel');      consttHeader=['产品名称','产品编号','Price','stock','sales','share',];      constfilterVal=['name','number','salePrice','stocknums','salesnums','sharenums',];      constlist=this.list;      constdata=this.formatJson(filterVal,list);      export_json_to_excel(tHeader,data,'商品管理列表');    }) }}模板代码export