【vue】导出excel

vue导出excel表格

前端导出excel：就用 vue+XLSX（npm 包）
后端导出excel：就用 vue+POI（maven 包）

• 对比
  前端导出excel 相对来说简单一点，XLSX是前端 npm 包，但是如果数据量大的话，会卡顿，处理时间慢；当数据量多的时候 使用后端导出会好一点
  后端导出excel 相对来说麻烦一点，但是时间短、速度快；具体操作都放在后端，也节省了前端的操作。用户效果好。

方式一：前端导出

1. 安装
   npm install vue-json-excel -S

2. main.js中引入

       import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)
   

3. 在代码中使用

        <template>
   

导出


```

4. 修改配置参数

       title: "xx公司表格",json_fields: {"排查日期":'date',"整改隐患内容":'details',"整改措施":'measure',"整改时限":'timeLimit',"应急措施和预案":'plan',"整改责任人":'personInCharge',"填表人":'preparer',"整改资金":'fund',"整改完成情况":'complete',"备注":'remark',},DetailsForm: [{date: "2022-3-10",details: "卸油区过路灯损坏",measure: "更换灯泡",timeLimit: "2022-3-21",plan: "先使用充电灯代替,贴好安全提醒告示",personInCharge: "王xx",preparer: "王xx",fund: "20元",complete: "已完成整改",remark: "重新更换了灯泡",},],

   方式二：后端导出

   后端写好的 excel就直接write到 response里面
   1.按钮事件

<el-button size="small" type="primary" @click="exportAllExcel">导出全部</el-button>

2.网络请求封装
// 导出全部

export function exportExcelForMatchUser(data) {return fetch({url: '/xfx/matchUser/web/exportExcelForMatchUser',method: 'post',timeout: '120000',responseType: 'blob',data});
}

3.js方法：导出全部exportAllExcel

      // 导出 所有exportAllExcel() {this.$confirm("是否确认导出全部参赛人员数据?", "警告", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(response => {exportExcelForMatchUser().then(response => {const data = "参赛人员web.xlsx";console.log('1111111111111111111111111', JSON.stringify(response))let blob = new Blob([response.data], {type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8"});console.log('333333333333333333333333', JSON.stringify(blob))// for IEif (window.navigator && window.navigator.msSaveOrOpenBlob) {window.navigator.msSaveOrOpenBlob(blob, data);} else {console.log('chrome go here ')let downloadElement = document.createElement('a');let href = window.URL.createObjectURL(blob); // 创建下载的链接downloadElement.href = href;downloadElement.download = data; // 下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); // 点击下载document.body.removeChild(downloadElement); // 下载完成移除元素window.URL.revokeObjectURL(href); // 释放掉blob对象}}).catch(err => {console.log(err)this.loading = false;this.$message.warning("对不起，下载失败");});})},

参考博客