一、需要安装三个依赖:
npm install -S file-saver xlsx
npm install -D script-loader
二、项目中新建文件夹(文件名excel)
里面放置两个文件Blob.js和 Export2Excel.js。
下载链接:https://pan.baidu.com/s/1fjSFq-XMLKFG2qVhhjSzGA
提取码:bo09
复制这段内容后打开百度网盘手机App,操作更方便哦
三、在vue的methods方法中:
页面添加导出按钮,加入方法
//导出书刊列表数据 exportData(){ this._getBookExport() }, _getBookExport(){ let exportBook = { libraryId:this.libraryId, isbnOrIssn:this.isbnOrIssn, category:this.category, bookSn:this.bookSn, status:this.status, } getBookExport(exportBook).then(res=>{ if(res.data.errcode === 0){ this.exportList = res.data.data this.export2Excel() } else if (res.data.errcode === 40190){ this.$Message.info('数据太多无法导出,请联系客服!') } }) }, export2Excel() { require.ensure([], () => { const { export_json_to_excel } = require('../../excel/Export2Excel'); const tHeader = ['书刊编号', '书刊名称', 'ISBN/ISSN', '索取号', '定价','类别']; const filterVal = ['bookSn', 'title', 'isbnOrIssn', 'callNumber', 'price','category']; const list = this.exportList; const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, '书刊数据'); }) }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }
四、假如项目有很多个导出,每个都写就太麻烦了
可以提取到一个js文件中
export function export2Excel(columns,list){ require.ensure([], () => { const { export_json_to_excel } = require('../../excel/Export2Excel'); let tHeader = [] let filterVal = [] columns.forEach(item =>{ tHeader.push(item.title) filterVal.push(item.key) }) const data = list.map(v => filterVal.map(j => v[j])) export_json_to_excel(tHeader, data, '数据列表'); }) }
在需要的页面import引入
import { export2Excel } from '@/common/js/util'
exportData(){
let info = {from: 0,size: 300}
getDonateList(info).then(res =>{
if(res.data.errcode === 0){
this.exportList = this.formatList(res.data.data.records)
export2Excel(this.columns1,this.exportList)
} else if (res.data.errcode === 40190){
this.$Message.info('数据太多无法导出,请联系客服!')
}
})
}