JS导出表单数据到Excel|极客笔记

JS导出表单数据到Excel

在web开发过程中，有时候我们需要导出表单数据到Excel文件中，以便用户能够方便地保存和查看数据。本文将详细介绍如何使用JavaScript导出表单数据到Excel文件中。

原理

要实现将表单数据导出到Excel，通常有两种方式：

通过服务端生成Excel文件并提供下载链接
使用客户端JavaScript将表单数据动态生成Excel文件进行下载

本文将重点介绍第二种方式，即使用客户端JavaScript将表单数据导出到Excel文件中。

实现步骤

1. HTML表单

首先我们需要一个包含要导出的表单数据的HTML表单。比如下面这个示例：

<form id="exportForm">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" value="张三"><br>

    <label for="age">年龄：</label>
    <input type="text" id="age" name="age" value="25"><br>

    <label for="email">邮箱：</label>
    <input type="text" id="email" name="email" value="zhangsan@example.com"><br>
</form>

<button id="exportBtn">导出Excel</button>

这里我们有一个包含姓名、年龄和邮箱的表单，并且有一个按钮用于导出Excel文件。

2. JavaScript代码

接下来我们编写JavaScript代码，实现将表单数据导出到Excel文件中。代码如下：

document.getElementById('exportBtn').addEventListener('click', function() {
    const data = [];
    const headers = [];

    // 获取表单数据
    const form = document.getElementById('exportForm');
    const formData = new FormData(form);

    // 构造表头
    formData.forEach((value, key) => {
        headers.push(key);
    });

    // 构造表格数据
    data.push(headers);
    data.push(Object.values(formData));

    // 生成Excel文件
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.aoa_to_sheet(data);

    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, 'exported_data.xlsx');
});