JavaScript 入门：从多个 div 中获取数据并保存为 txt 文件

2024-03-11 09:23:50

从多个 div 中提取数据并保存到 txt 文件：JavaScript 教程

导言

在网页开发中，从网页元素中提取数据并将其保存以供日后使用是一项常见任务。本文将指导你如何使用 JavaScript 从多个 div 元素中收集数据并将其保存到 txt 文件中。

问题

我们的目标是创建一个 JavaScript 函数，从 HTML 文件中提取一组优惠券代码，这些代码分布在多个 div 元素中。这些元素使用 JavaScript 生成了唯一的代码，并以适合打印的格式显示在页面上。我们需要编写一个脚本，将这些代码从 div 中提取出来，并以 txt 文件的形式进行保存。

解决方案

步骤 1：获取所有 div 元素

使用 document.querySelectorAll() 方法获取页面中包含目标代码的 div 元素。

步骤 2：创建一个数组来存储代码

创建一个空数组来存储从 div 元素中提取的代码。

步骤 3：循环遍历 div 元素并提取代码

使用 forEach() 循环遍历每个 div 元素，并使用 textContent 属性提取包含代码的文本内容。

步骤 4：将代码添加到数组中

将提取的代码添加到前面创建的数组中。

步骤 5：将数组内容转换为文本

使用 join() 方法将数组中的代码连接成一个字符串，以保存到 txt 文件中。

步骤 6：创建文件并写入内容

使用 FileSaver.js 库创建一个文件，并使用 saveAs() 方法将代码字符串写入该文件。

代码示例

以下代码演示了如何实现这些步骤：

// 获取所有包含优惠券代码的 div 元素
const elements = document.querySelectorAll('.createcode');

// 创建一个空数组来存储代码
const codes = [];

// 循环遍历 div 元素并提取代码
elements.forEach((element) => {
  const code = element.textContent;
  codes.push(code);
});

// 将数组内容转换为文本
const codeString = codes.join('\n');

// 创建文件并写入内容
const file = new File([codeString], 'coupon_codes.txt', {type: 'text/plain'});
saveAs(file);