1.你需要安装 xlsx,flie-saver
使用npm :
npm install xlsx -save
npm install file-saver --save
2.对xlsx进行封装处理:
import fs from 'file-saver' import XLSX from 'xlsx' export function xlsx(json, fields, filename = '.xlsx') {//导出xlsx json.forEach(item => { for (let i in item) { if (fields.hasOwnProperty(i)) { item[fields[i]] = item[i]; } delete item[i]; //删除原先的对象属性 } }) let sheetName = filename //excel的文件名称 let wb = XLSX.utils.book_new() //工作簿对象包含一SheetNames数组,以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。 let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //将JS对象数组转换为工作表。 wb.SheetNames.push(sheetName) wb.Sheets[sheetName] = ws const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//设置表格的样式 let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false } //写入的样式 let wbout = XLSX.write(wb, wopts) let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' }) fs.saveAs(blob, filename + '.xlsx') } const s2ab = s => { var buf; if (typeof ArrayBuffer !== 'undefined') { buf = new ArrayBuffer(s.length) var view = new Uint8Array(buf) for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff return buf } else { buf = new Array(s.length); for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF; return buf; } }
3.在对应页面中,将接口返回数据,进行处理:
<a-button style="margin-left: 8px" type="primary" @click="handleExcel">导出</a-button>
handleExcel() { let fields = { title0: "序号", title1: "姓名", title2: "数量", }; let arry = []; let i = 0; let params = {}; params.page = 1; params.pageSize = 999; //这里也可以直接通过接口返回的total,拿值 memberasList(params).then(res=>{ console.log(res) res.list.forEach(ele => { i++; arry.push({ title0: i, title1: ele.name, title2: ele.num , }); }); xlsx(arry, fields, "excel统计列表"); }); },
这样,就可以实现,点击下载excel表的操作了