HTML 表单输入到 Excel 电子表格 [重复] - TypeScript

本文将介绍如何使用 TypeScript 将 HTML 表单的输入数据导出到 Excel 电子表格中。我们将使用一些流行的库和工具来实现这个目标。

准备工作

在开始之前，确保你已经安装了以下工具和库：

• TypeScript 编译器：用于将 TypeScript 代码编译为 JavaScript 代码。
• Node.js：我们将使用 Node.js 运行 TypeScript 代码。
• HTML 表单：一个包含输入字段的 HTML 表单。

第一步：安装依赖

我们需要安装一些库和工具来处理和导出数据。打开终端或命令提示符，导航到你的项目目录，并运行以下命令来安装这些依赖项：

npm install xlsx file-saver @types/file-saver

• xlsx：一个流行的库，可以用来创建和处理 Excel 文件。
• file-saver：用于在浏览器中保存文件的库。

第二步：编写 TypeScript 代码

在你的项目目录中创建一个新的 TypeScript 文件（例如 export-to-excel.ts）并打开它。在该文件中，我们将编写将表单数据导出到 Excel 文件的逻辑。以下是示例代码：

// 导入依赖项
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

// 选择表单元素
const form = document.querySelector('form') as HTMLFormElement;

// 添加表单提交事件监听器
form.addEventListener('submit', (event) => {
  event.preventDefault(); // 阻止表单默认提交行为

  // 获取表单数据
  const formData = new FormData(form);

  // 创建一个数组来保存数据
  const data: any[] = [];

  // 遍历表单数据
  formData.forEach((value, key) => {
    // 将数据作为对象添加到数组中
    data.push({ key, value });
  });

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

  // 创建一个工作表
  const worksheet = XLSX.utils.json_to_sheet(data);

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, '表单数据');

  // 将工作簿转换为二进制文件
  const excelFile = XLSX.write(workbook, { type: 'binary' });

  // 保存文件
  const buffer = new ArrayBuffer(excelFile.length);
  const view = new Uint8Array(buffer);
  for (let i = 0; i < excelFile.length; i++) {
    view[i] = excelFile.charCodeAt(i) & 0xFF;
  }
  const blob = new Blob([buffer], { type: 'application/octet-stream' });
  saveAs(blob, '表单数据.xlsx');
});

在上面的代码中，我们首先导入了 xlsx 和 file-saver 模块，并选择了我们的 HTML 表单元素。然后，我们添加了一个表单提交事件监听器，在事件处理程序中获取表单数据，创建一个包含数据的数组，以及创建一个工作簿和工作表来保存数据。最后，我们将工作簿转换为二进制文件并保存它。

第三步：编译和运行代码

在终端或命令提示符中，导航到包含 TypeScript 代码的项目目录，并运行以下命令来编译 TypeScript 代码：

tsc export-to-excel.ts

上述命令将生成一个 JavaScript 文件（export-to-excel.js）。

接下来，在 HTML 页面中引入编译后的 JavaScript 文件，并在表单元素的上方添加如下代码：

<script src="export-to-excel.js" defer></script>

最后，在浏览器中打开包含该 HTML 页面的链接，并提交表单，你将看到生成的 Excel 文件被下载到你的计算机中。

总结

通过这个教程，我们学会了如何使用 TypeScript 将 HTML 表单输入的数据导出到 Excel 电子表格中。我们使用了 xlsx 和 file-saver 这两个库帮助我们处理和保存数据。这个方法可以用于创建各种表格导出功能，为用户提供方便的数据导出选项。

希望本文能够帮助到你，祝你在开发中取得成功！