vue 如何导出表格

vue 如何导出表格

1.安装npm install --save xlsx file-saver
2.封装一个xlsx.js文件
内容如下：
import fs from ‘file-saver’
import XLSX from ‘xlsx’

const xlsx={
xlsx(json, fields, filename = ‘.xlsx’) {//导出xlsx
json.forEach(item => {
for (let i in item) {
if (i in fields) {
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 (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
return buf
} else {
buf = new Array(s.length);
for (let i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
}
export default xlsx;

3.在main.js里面引入我们封装的xlsx.js文件
import xlsx from ‘./request/xlsx’
Vue.prototype.$xlsx = xlsx;//挂载全局

4.在需要使用的页面调用即可
<el-button type=“warning” @click=“handleExcel” style=“margin-left: 10px”>导出

handleExcel() {
let fields = {
title0: “ID”,
title1: “商家”,
title2: “商品名”,
title3: “数量”,
title4: “规格”,
title5: “赠送积分”,
title6: “易货额”,
title7: “易货现金”,
title8: “折扣现金”,
title9: “时间”,
title10: “入库员”,
};
let arry = [];
let params = {};
params.page = 1;
params.pageSize = 999; //这里也可以直接通过接口返回的total，拿值
this.$axios.post(this.$api.daogoods, {
title: this.input,
shop_id: this.sid,
start_time: this.start,
end_time: this.end,
})
.then((res) => {
console.log(res);
res.data.forEach((ele) => {
arry.push({
title0: ele.goods_id,
title1: ele.shop_name,
title2: ele.title,
title3: ele.num,
title4: ele.guige,
title5: ele.give_integral,
title6: ele.price,
title7: ele.xj,
title8: ele.zk_xj,
title9: ele.create_time,
title10: ele.nickname,
});
});
console.log(arry);
console.log(fields);
this.$xlsx.xlsx(arry, fields, “excel统计列表”);
});
},