js导出excel文件的简洁方法(推荐)

下面是“js导出excel文件的简洁方法(推荐)”的完整攻略。

1. 前置知识

要实现js导出excel文件，需要了解以下知识：

• Blob对象：Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。文件类型的二进制数据也可以从一个 Blob 中读取。
• URL.createObjectURL()：该方法创建一个 DOMString，其中包含一个表示参数中给出对象的URL。
• js-xlsx库：一个 JavaScript 实现的电子表格文件读写工具，支持 xlsx、csv 等格式。

2. 实现方式

以下是实现js导出excel文件的简洁方法：

1. 引入 js-xlsx 库

首先，在页面中引入 js-xlsx 库。

<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>

2. 编写导出函数

然后，编写导出函数 exportExcel。

function exportExcel(headers, data, fileName = "export.xlsx", sheetName = "Sheet1") {
  const worksheet = XLSX.utils.json_to_sheet(data); // 将数据转化为 worksheet
  const workbook = {
    Sheets: { [sheetName]: worksheet }, // 添加 worksheet 到 workbook
    SheetNames: [sheetName], // 设置 workbook 的 sheetNames
  };
  const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" }); // 生成 excel 导出内容
  const blob = new Blob([excelBuffer], { type: "application/octet-stream" }); // 转换 excel 导出内容为 Blob
  const href = URL.createObjectURL(blob); // 创建下载链接
  const link = document.createElement("a"); // 创建 a 标签
  link.href = href;
  link.download = fileName; // 下载文件名
  document.body.appendChild(link); // 将 a 标签插入到body
  link.click(); // 模拟点击下载链接
  document.body.removeChild(link); // 下载完成后移除 a 标签
}

函数的参数说明：

• headers：导出的表格的表头，可以是一个数组或一个对象。
• data：导出的表格的数据，可以是一个数组或一个对象。
• fileName：导出的表格的文件名，默认为 "export.xlsx"。
• sheetName：导出的表格的 sheet 名称，默认为 "Sheet1"。

3. 调用导出函数

最后，在需要导出表格的地方调用 exportExcel 函数。

const headers = ["姓名", "年龄", "性别"];
const data = [
  { 姓名: "张三", 年龄: 18, 性别: "男" },
  { 姓名: "李四", 年龄: 20, 性别: "男" },
  { 姓名: "小红", 年龄: 16, 性别: "女" },
];

exportExcel(headers, data, "员工信息.xlsx");

以上代码在页面中生成一个下载链接，点击链接即可导出一个名为“员工信息.xlsx”的 excel 文件，文件格式为 xlsx。

3. 示例说明

示例一

如果要导出的表格数据为以下数据：

const headers = ["编号", "水果名称", "单价"];
const data = [
  { 编号: 1, 水果名称: "苹果", 单价: 6.5 },
  { 编号: 2, 水果名称: "香蕉", 单价: 2.5 },
  { 编号: 3, 水果名称: "葡萄", 单价: 9.8 },
  { 编号: 4, 水果名称: "橙子", 单价: 4.2 },
  { 编号: 5, 水果名称: "草莓", 单价: 15.6 },
];

exportExcel(headers, data, "水果价格.xlsx");

生成的 excel 文件中的内容为：

编号	水果名称	单价
1	苹果	6.5
2	香蕉	2.5
3	葡萄	9.8
4	橙子	4.2
5	草莓	15.6

示例二

如果要导出的表格数据为以下数据：

const headers = { a: "编号", b: "水果名称", c: "单价" };
const data = [
  { a: 1, b: "苹果", c: 6.5 },
  { a: 2, b: "香蕉", c: 2.5 },
  { a: 3, b: "葡萄", c: 9.8 },
  { a: 4, b: "橙子", c: 4.2 },
  { a: 5, b: "草莓", c: 15.6 },
];

exportExcel(headers, data, "水果价格.xlsx");

生成的 excel 文件中的内容与示例一相同。

4. 总结

以上就是实现js导出excel文件的简洁方法(推荐)的完整攻略。通过使用 js-xlsx 库，我们可以快速方便地实现 js 导出 excel 文件的功能。