Vue中将列表数据导出为EXCEL表格
项目中刚好有个需求让前端在页面上增加一个按钮，用户点击就可以将列表中的数据导出为Excel表格，在网上查了一下方法，大体思路都是需要安装三个插件以及拷贝两个文件，然后在页面中写入逻辑代码，感觉挺复杂的，所以研究了一下，总结了一个简单版本的解决方案。
1.安装XLSX
npm安装
npm install xlsx --save
2.封装工具
可以在项目的utils文件夹中新建一个xlsx.js用来存放这个工具函数
// 下载excel功能
import XLSX from 'xlsx'
/**
* @param dataList 表格数据内容 array
* @param fileName 文件标题。必须以 .xlsx结尾
*/
export const downloadXlsx = (dataList, fileName) => {
// 参考数据
// dataList = [
// ['姓名', '性别', '年龄', '注册时间'],
// ['张三', '男', 18, new Date()],
// ['李四', '女', 22, new Date()]
// ];
const stringToBuff = str => {
var buf = new ArrayBuffer(str.length)
var view = new Uint8Array(buf)
for (var i = 0; i !== str.length; ++i) {
view[i] = str.charCodeAt(i) & 0xff
}
return buf
}
// 创建表格
let workbook = XLSX.utils.book_new()
let worksheet = XLSX.utils.aoa_to_sheet(dataList)
XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1')
// 创建二进制对象写入转换好的字节流
let xlsxBlob = new Blob(
[
stringToBuff(
XLSX.write(workbook, {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
})
)
],
{ type: '' }
)
const a = document.createElement('a')
// 利用URL.createObjectURL()方法为a元素生成blob URL
a.href = URL.createObjectURL(xlsxBlob) // 创建对象超链接
a.download = fileName
a.click()
}
3.绑定事件
首先需要在页面中引入这个工具
import { downloadXlsx } from "../../utils/xlsx";
将触发代码写到onClickDown方法中
onClickDown() {
let datalist = [];
datalist.push([
"Uin",
"总数",
"平均码率",
"码率<1k",
"码率1k-1.5k",
"码率1.5k-2k",
"码率2k-2.5k",
"码率2.5k-3k",
"码率>3k"
]);
this.list.forEach(item => {
datalist.push([
item.uin,
item.videoBitrateTotalCount,
item.videoBitrateTotalAverage,
item.videoBitrate1000Count,
item.videoBitrate1500Count,
item.videoBitrate2000Count,
item.videoBitrate2500Count,
item.videoBitrate3000Count,
item.videoBitrateMore3000Count
]);
});
downloadXlsx(datalist, "Uni数据统计.xlsx");
}
需要注意的一点是downloadXlsx的第二参数是导出文件的名字，这里的名字必须以.xlsx结尾才可以。
接下来就是测试效果，结果自然是完美实现。
发表评论 (审核通过后显示评论)：