1、创建Blob.js和Export2Excel.js文件放到src文件夹下
2、npm中安装三个依赖
npm install -S file-saver //用来生成文件的web应用程序 npm install -S xlsx //电子表格格式的解析器 npm install -D script-loader //将js挂在在全局下
3、修改Export2Excel.js文件中的路径(自己的路径)
4、 在main.js中引入Blob.js和Export2Excel.js文件
import Blob from '@/excel/Blob.js' import Export2Excel from '@/excel/Export2Excel.js'
5、在vue组件中使用
<Button :size="buttonSize" type="text" icon="md-add" @click="exportToExcel()">导出 </Button>
6、并且在该vue中 写入exportToExcel方法
exportToExcel() { let me = this var tableData=me.$refs.table.tableData; var title=me.tableInfo.columns; var tHeader=[]; //标题 var tHeaderId=[]; //id for(let i=0;i<title.length;i++){ if(title[i].key!=null && title[i].key!="action"){ tHeader.push(title[i].title); tHeaderId.push(title[i].key); } } var tableinfo=[]; for(let n=0;n<tableData.length;n++){ var obj={}; for(let j=0;j<tHeaderId.length;j++){ let id=tHeaderId[j]; let value=tableData[n][tHeaderId[j]]; obj[id]=value; } tableinfo.push(obj); } //excel数据导出 require.ensure([], () => { const { export_json_to_excel } = require('../../../..//excel/Export2Excel'); const excelTile="excel"+new Date().getTime(); //文件名字 const tHeaderTitle = tHeader; //列标题 const filterVal = tHeaderId; //id const list = tableinfo; //整合得到的数据 const data = this.formatJson(filterVal, list); export_json_to_excel(tHeaderTitle, data, excelTile); }) }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) } },
通过网上借鉴别人的,事实证明 简单又实用