vue下载xlsx或xls表格

需求:

后台没有提供下载接口,就只能下载插件调用查询接口,把查询出来的数据通过插件生成xlsx或xls表格导出来

对应插件:

npm install --save xlsx-style

npm install file-saver --save

创建一个文件export2Excel.js

/* eslint-disable */
import { saveAs } from &＃39;file-saver&＃39;
import XLSX from &＃39;xlsx-style&＃39;function dataNum(v, date1904) {if (date1904) v &＃43;&＃61; 1462const epoch &＃61; Date.parse(v)return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}function sheetFromArrayOfArrays(headers, data) {const ws &＃61; {}const range &＃61; {s: {c: 10000000,r: 10000000},e: {c: 0,r: 0}}/*设置worksheet每列的最大宽度*/for (let R &＃61; 0; R !&＃61;&＃61; headers.length; &＃43;&＃43;R) {for (let C &＃61; 0; C !&＃61;&＃61; headers[R].length; &＃43;&＃43;C) {if (range.s.r > R) range.s.r &＃61; Rif (range.s.c > C) range.s.c &＃61; Cif (range.e.r R) range.s.r &＃61; Rif (range.s.c > C) range.s.c &＃61; Cif (range.e.r }function Workbook() {if (!(this instanceof Workbook)) return new Workbook()this.SheetNames &＃61; []this.Sheets &＃61; {}
}function s2ab(s) {const buf &＃61; new ArrayBuffer(s.length)const view &＃61; new Uint8Array(buf)for (let i &＃61; 0; i !&＃61;&＃61; s.length; &＃43;&＃43;i) view[i] &＃61; s.charCodeAt(i) & 0xFFreturn buf
}export function sheetMaker({headers &＃61; [],data,merges &＃61; [],autoWidth &＃61; true} &＃61; {}) {data &＃61; [...data]if (!headers.every(header &＃61;> header instanceof Array)) {headers &＃61; [headers]}const ws &＃61; sheetFromArrayOfArrays(headers, data)if (merges.length > 0) {if (!ws[&＃39;!merges&＃39;]) ws[&＃39;!merges&＃39;] &＃61; []merges.forEach(item &＃61;> {ws[&＃39;!merges&＃39;].push(XLSX.utils.decode_range(item))})}if (autoWidth) {/*设置worksheet每列的最大宽度*/if (headers.every(header &＃61;> header instanceof Array)) {for (let i &＃61; headers.length - 1; i > -1; i--) {data.unshift(headers[i])}} else {data.unshift(headers)}const colWidth &＃61; data.map(row &＃61;> row.map(val &＃61;> {/*先判断是否为null/undefined*/if (val &＃61;&＃61; null) {return {&＃39;wch&＃39;: 10}}/*再判断是否为中文*/else if (val.toString().charCodeAt(0) > 255) {return {&＃39;wch&＃39;: val.toString().length * 2 > 150 ? 150 : val.toString().length * 2}} else {return {&＃39;wch&＃39;: val.toString().length > 150 ? 150 : val.toString().length}}}))/*以Header最后一行为初始值*/let result &＃61; colWidth[headers.length - 1]for (let i &＃61; 1; i }export function json2Excel({ headers, data, keys, filter, sheetName &＃61; &＃39;Sheet 1&＃39;, fileName &＃61; &＃39;excel-list&＃39;, merges &＃61; [], autoWidth &＃61; true, bookType &＃61; &＃39;xlsx&＃39; }) {// 数据处理data &＃61; data.map(item &＃61;> keys.map(key &＃61;> {if (filter && filter instanceof Function) {const value &＃61; filter(key, item[key], item)return value &＃61;&＃61; null ? item[key] || &＃39;&＃39; : value} else {return item[key] &＃61;&＃61; null ? &＃39;&＃39; : item[key]}}))data &＃61; [...data]// 表格对象const wb &＃61; new Workbook()const ws &＃61; sheetMaker({ headers, data, merges, autoWidth })wb.SheetNames.push(sheetName)wb.Sheets[sheetName] &＃61; wsconst wbout &＃61; XLSX.write(wb, {bookType: bookType,bookSST: false,type: &＃39;binary&＃39;})saveAs(new Blob([s2ab(wbout)], {type: &＃39;application/octet-stream&＃39;}), &＃96;${fileName}.${bookType}&＃96;)
}


页面使用:

html:

导出

 methods:

import { json2Excel } from &＃39;&＃64;/utils/export2Excel&＃39;//js mothds// 导出clickExportSeatBtn() {if (&＃43;this.totalCount > 1000) {this.$message.warning(&＃39;每次最多导出1000条数据&＃39;)}const exportFilter &＃61; (key, keyValue, item) &＃61;> {if (key &＃61;&＃61;&＃61; &＃39;userCode&＃39;) {return item.groupUserCode || item.userCode}if (key &＃61;&＃61;&＃61; &＃39;landFlag&＃39;) {return keyValue || &＃39;0&＃39;}}const fileName &＃61; parseTime(new Date(), &＃39;{y}{m}{d}{h}{i}{s}&＃39;)const exportFn &＃61; (list) &＃61;> {json2Excel({data: list,keys: [&＃39;seatCode&＃39;, &＃39;userCode&＃39;, &＃39;lastLogonTime&＃39;, &＃39;insertTimeForHis&＃39;],headers: [[&＃39;坐席编码&＃39;, &＃39;用户代码&＃39;, &＃39;最后一次登录时间&＃39;, &＃39;插入时间&＃39;]],merges: [],filter: exportFilter,fileName: &＃39;SeatMain&＃39; &＃43; fileName.toString()})}const exportParams &＃61; {&＃39;currPage&＃39;: 1,&＃39;pageSize&＃39;: 1000,&＃39;currUserCode&＃39;: this.$store.state.user.info.userCode,}
//调用查询接口seatMainFindSeatMainByPage(exportParams).then(res &＃61;> {exportFn(res.result instanceof Array ? res.result : [res.result])}).catch(err &＃61;> {this.$message.error(err)})},