vue3使用xlsx导出json数据为excel表格

表格"/>

vue3使用xlsx导出json数据为excel表格

官方文档可以看sheetjs

安装 xlsx

npm install xlsx

使用非常简单
在需要使用的页面引入

import * as XLSX from "xlsx";

要导出的数据需要是一个没有嵌套的对象数组

// 随便声明一个结果
let arr=[{name:"小红",age:18},{name:"小明",age:20}]
// 创建一个新的工作簿
const workbook = XLSX.utils.book_new();
// 创建一个新的工作表
const worksheet = XLSX.utils.json_to_sheet(arr);
// 将工作表附加到工作簿，并将工作表命名为students
XLSX.utils.book_append_sheet(workbook, worksheet, "students");
// 导出工作簿，并命名导出文件名为Presidents.xlsx
XLSX.writeFile(workbook, "Presidents.xlsx");

代码示例

导出文件结果，下面工作表名称就不截了，图片太长不好看，工作表名就是 students

可以看到虽然导出了，但是上面 name 和 age 显然不是我们想要的，我们想要的是“姓名”和“年龄”，使用XLSX.utils.sheet_add_aoa可以向工作表中添加 JS 数据的数组实现标题重命名

// 向woeksheet工作表中的A1位置添加数据的数组
XLSX.utils.sheet_add_aoa(worksheet, [["姓名", "年龄"]], { origin: "A1" });

更改标题后的结果，可以看到从 A1 开始数据改变成了刚刚写的数据

// 试试改成其他的
XLSX.utils.sheet_add_aoa(worksheet, [["姓名", "年龄"],["性别","爱好"]], { origin: "B5" });

可以看到从 B5 改变数据为上面添加的

也可以通过设置!cols工作表属性来设置列宽

// 改变A列的宽度为50，改变B列宽度为100
worksheet["!cols"] = [ { wch: 50 },{wch:100} ];

更改列宽后的结果

总的来说比之前写的乱七八糟的更简单易懂了