vue3.0 + xlsx 实现纯前端生成excel表格
vue3.0 + xlsx 实现纯前端生成excel表格。
·
vue3.0 + xlsx 实现纯前端生成excel表格
1.安装依赖
npm install xlsx --save
2.导入依赖
import * as XLSX from 'xlsx' // Vue3 版本
代码示例
js部分
代码如下(示例):
<script>
import { ref, reactive } from "vue";
export default {
setup(props) {
// 模板下载
const downloadIpList = (isData)=> {
let title = "车辆信息模板.xlsx"
//设置表头
let aoa = [["序号序号","*VIN码","*车牌号","运营公司","品牌-车系-车型","动力类型","电池类型","电池容量(kWh)","满电续航里程(km)","备注"]];
//按二维数组顺序加入表格数据
if(isData) {
that.carErrList.forEach((item,index) => {
aoa.push([
index+1,
item.vinCode,
item.numberPlate,
item.operatCompany,
item.carShape,
item.forceType,
item.batteryType,
item.batteryCap,
item.totalKm,
item.remark,
]);
});
title = "异常数据列表.xlsx"
}
//创建表
let worksheet = XLSX.utils.aoa_to_sheet(aoa);
//创建表格文件
let workbook = XLSX.utils.book_new();
//插入表到表格第一页
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, title);//导出表格
}
return {
downloadIpList
};
};
</script>
## 效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/045a9ec7a7fb4d6e92344573de11676e.png#pic_center)
更多推荐
已为社区贡献3条内容
所有评论(0)