安装
一、安装依赖(根目录下)
npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev
二、下载两个所需要的js文件Blob.js和 Export2Excel.js。
GitHub下载地址:Blob.js&Export2Excel.js
三、src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js放进去。
四、添加webpack.base.conf.js配置
alias: {
'vendor': path.resolve(__dirname, '../src/vendor'),
}
template:
<button @click="export2Excel">导出</button>
methods:{
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../../vendor/Export2Excel');//引入文件
const tHeader = ['商品名称','商品货号','售价','库存','销量','分享',];//导出字段名
const filterVal = ['name', 'number', 'salePrice', 'stocknums', 'salesnums', 'sharenums', ];
const list = this.goodsItems;//将数据赋值给list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '自定义导出文件名');
})
}
}
五、可能的出错
npm run build
出错提示:module not found ‘…/…/Export2Excel.js’。个人路径不同,根据情况修改methods引入文件的路径。确认没有拼写及大小写错误。npm run build
出错提示:module not found ‘src/vendor/Blob’。同样是引入路径问题,修改Export2Excel.js:
将require('script-loader!src/vendor/Blob');
修改为require('script-loader!./Blob');
应用
功能实现:导出大量数据,并显示导出进度条
效果如下图:
<template>
<diV>
<Modal
v-model="isExport"
title="导出设置">
//进度条设计
<div style="width: 520px;position: relative;top: -21px;left: -16px;font-size: 10px" v-show="isProgress">
<Progress :percent="export_percentage" :stroke-color="['#108ee9', '#87d068']" text-inside :stroke-width="15" status="active" />
</div>
......//导出筛选项
<div slot="footer">
<Button type="primary" @click="isExport = false">取消</Button>
<Button type="primary" @click="exportData()" :disabled="isLoadingExport">确定</Button>
</div>
</Modal>
</div>
</template>
//分次请求,拼接数据,避免超时。(超时可根据报错信息,重新设置超时时间)
async exportData() {
this.isLoadingExport = true; //加锁,禁止在导出阶段二次触发导出按钮
this.isProgress = true;//控制进度条的显示和隐藏
let result_total = await this.exportReload();//获取导出数据条数 。exportReload()将根据筛选条件进行计算,返回int类型值
let request_times=Math.ceil(result_total/100); //计算分几次请求
let complete_count=0; //记录成功请求次数
this.export_percentage=0; //设置当前进度百分比为0
let exportData = [];
for (let i = 0; i < request_times; i++) {
let data = {
......//导出筛选项
size: 100,
current: i+1,
};
apiGetData(data).then(res => {
if (200 != res.code) {
this.$Message.error(res.msg);
} else {
for (let i = 0; i < res.user.data.length; i++) { //将后台返回中需要的字段取出
exportData.push(res.user.data[i])
}
complete_count++;
this.export_percentage=Math.ceil(100*complete_count/request_times); //设置当前进度百分比
// console.log(this.export_percentage);
if(complete_count==request_times){
// this.isLoadingExport = false;
this.exportExcel(exportData);//导出
this.isLoadingExport = false;//最好是等导出完毕再执行
}
}
});
}
},
async exportExcel(exportData) {
require.ensure([], () => {
const {export_json_to_excel} = require('../../vendor/Export2Excel'); //引入文件
const tHeader = ['所属项目', '工作日期', '提交人员', '提交日期', '备注']; //将对应的属性名转换成中文
const filterVal = ['projectName', 'time', 'subUserName', 'insert_time', 'remarks'];//table表格中对应的属性名
const data = this.formatJson(filterVal, exportData);
export_json_to_excel(tHeader, data, '导出文件名');
})
},
exportReload() {
if (this.loading) return;
this.loading = true;
let data = {
......//导出筛选项
size: 100, //大小不重要,获取的total不变
current: 1,
};
let p = new Promise(function (resolve,
) {
apiGetData(data).then(res => {
if (200 != res.code) {
this.$Message.error(res.msg);
} else {
resolve(res.user.total);
}
});
});
this.loading = false;
return p
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},