JavaScript生成.xls文件的代码

生成Excel文件是前端开发中常见的需求之一，可以通过JS库来实现。目前比较流行的库有两个：SheetJS和Handsontable，本文将以SheetJS为例来讲解如何使用JS生成Excel文件的完整攻略。

SheetJS库介绍

SheetJS是一组用于处理Excel文件的JS库，可读取、修改和写入Excel文件，支持XLS、XLSX等多种格式。同时SheetJS也支持导入导出到CSV、JSON等格式，支持数据定位、图表制作等功能。它十分轻量化，只有小于200K的文件大小，可大幅度缩短页面加载时间。

实现过程

第一步：引入SheetJS库

我们需要先引入SheetJS库，在HTML中添加以下代码：

<script src="https://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>

第二步：创建数据对象

我们需要将Excel中要填充的数据存在一个JS对象中。下面给出一个示例的JS数据对象：

let data = [
    ['姓名', '性别', '年龄', '职业'],
    ['张三', '男', '25', '程序员'],
    ['李四', '女', '24', '销售'],
    ['王五', '男', '28', '设计师'],
];

第三步：使用SheetJS库生成Excel文件

使用SheetJS库生成Excel文件非常简单，我们只需要调用几个API即可实现。下面给出一个完整的生成Excel文件的JS函数示例：

function generateExcelFile(data){
    // 创建Excel中使用的SheetJS工作薄中的数据矩阵对象
    const sheet = XLSX.utils.aoa_to_sheet(data);

    // 创建工作簿
    const workbook = XLSX.utils.book_new();

    // 将数据矩阵对象添加到工作薄中
    XLSX.utils.book_append_sheet(workbook, sheet, "Sheet1");

    // 生成Excel文件二进制流
    const buffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });

    // 保存Excel文件
    const blob = new Blob([buffer], {
        type: "application/octet-stream"
    });
    const fileName = "example.xlsx";
    saveAs(blob, fileName);
}

在上述代码中，我们通过XLSX.utils.aoa_to_sheet(data)创建了SheetJS工作薄中的数据矩阵对象，然后通过XLSX.utils.book_new()方法创建了一个工作簿，调用XLSX.utils.book_append_sheet(workbook, sheet, "Sheet1")将数据矩阵对象添加到工作簿中，最后使用XLSX.write(workbook, { bookType: "xlsx", type: "array" })生成Excel文件的二进制流，然后将二进制流保存为Excel文件。

示例一

我们可以基于上面的函数来实现一个按钮点击事件，具体代码如下：

document.getElementById('btn').addEventListener('click', function(){
    let data = [
        ['姓名', '性别', '年龄', '职业'],
        ['张三', '男', '25', '程序员'],
        ['李四', '女', '24', '销售'],
        ['王五', '男', '28', '设计师'],
    ];
    generateExcelFile(data);
})

示例二

如果要生成一个包含多个Sheet的Excel文件，可以按照如下代码实现（以data1、data2为例）：

function generateExcelFile(){
    let data1 = [
        ["学号", "姓名", "性别", "成绩"],
        [1, "张三", "男", 78],
        [2, "李四", "女", 88]
    ];
    let data2 = [
        ["学号", "姓名", "年龄", "班级"],
        [1, "张三", 18, "一班"],
        [2, "李四", 19, "二班"]
    ];
    const sheet1 = XLSX.utils.aoa_to_sheet(data1);
    const sheet2 = XLSX.utils.aoa_to_sheet(data2);
    const book = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(book, sheet1, "成绩单");
    XLSX.utils.book_append_sheet(book, sheet2, "学生信息");
    const buffer = XLSX.write(book, { bookType: "xlsx", type: "array" });
    const blob = new Blob([buffer], {
        type: "application/octet-stream"
    });
    const fileName = "example.xlsx";
    saveAs(blob, fileName);
}

总结

本文对使用JS生成Excel文件的过程进行了详细的介绍和说明，经过本文的学习，读者可以在自己的项目中轻松地使用JS生成Excel文件。