前端导出/前端实现导出功能 && 调用接口导出
1.前端导出,不需要调用后台接口后台导出,前端直接实现导出功能
导出table数据
js 引入
import FileSaver from "file-saver";
import XLSX from "xlsx";
table id out-table
<el-table v-loading="dataLoading" ref="multipleTable" id="out-table" :data="tableData3" border tooltip-effect="dark" > <el-table-column label="序号" width="50"> <template slot-scope="scope">{{scope.$index+1}}</template> </el-table-column> <el-table-column width="200" prop="company" label="所属区域公司"> <template slot-scope="scope">{{scope.row.company.companyName}}</template> </el-table-column> <el-table-column width="200" prop="storeName" label="门店名称"></el-table-column> <el-table-column width="200" prop="storeSn" label="门店编码"></el-table-column> <el-table-column width="200" prop="amount" label="门店佣金余额(¥)"> <template slot-scope="scope">{{scope.row.amount | formatMoney}}</template> </el-table-column> <el-table-column width="200" prop="status" label="门店状态"> <template slot-scope="scope"> <span v-if="scope.row.status=='1'">合作中</span> <span v-if="scope.row.status=='9'">停业</span> </template> </el-table-column> <el-table-column width="200" prop="createTime" label="创建时间"></el-table-column> <!-- <el-table-column width="200" prop="licenseImg[0].imgUrl" label="营业执照照片"> <template slot-scope="scope"> <el-popover placement="left" trigger="hover"> <img :src="scope.row.licenseImg[0].imgUrl" width="700" v-if="scope.row.licenseImg"/> <img slot="reference" :src="scope.row.licenseImg[0].imgUrl" width="40" height="40" v-if="scope.row.licenseImg"/> </el-popover> </template> </el-table-column> --> <el-table-column label="操作" width="250"> <template slot-scope="scope"> <el-button size="mini" type="warning" @click="wareEdit(scope.$index, scope.row)" >查看佣金明细</el-button> <el-button size="mini" type="primary" @click="setRate(scope.$index, scope.row)" >佣金发放</el-button> </template> </el-table-column> </el-table>
js代码 table 的id 需要为 out-table
/** * 点击-导出 */ exportExcel() { this.loading=true; var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),{raw:true}); var wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" }); try { FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), "门店佣金流水-数据导出.xlsx" ); this.loading=false; } catch (e) { if (typeof console !== "undefined") console.log(e, wbout); this.loading=false; } return wbout; },
二 后台导出
download() { let obj = {} api.downloadTask(obj).then(res => { const content = res const blob = new Blob([content]) const fileName = '任务管理数据概览-数据导出.xlsx' if ('download' in document.createElement('a')) { // 非IE下载 const elink = document.createElement('a') elink.download = fileName elink.style.display = 'none' elink.href = URL.createObjectURL(blob) document.body.appendChild(elink) elink.click() URL.revokeObjectURL(elink.href) // 释放URL 对象 document.body.removeChild(elink) } else { // IE10+下载 navigator.msSaveBlob(blob, fileName) } }) },
//数据概览导出 export function downloadTask(obj) { return request({ url: '/admin/download/store/task', method: 'post', data: obj, responseType: 'arraybuffer' }) }