JS写入文件到本地|极客笔记

JS写入文件到本地

在Web开发中，有时候我们需要让用户下载一些文件，比如生成的报表、日志文件等。在前端开发中，我们可以通过JavaScript来实现将文件写入到用户的本地。在本文中，我们将详细介绍如何使用JavaScript实现将文件写入到用户的本地。

使用Blob对象

在JavaScript中，我们可以使用Blob对象来表示一个文件对象。Blob对象可以包含任意类型的数据，如二进制数据、文本数据等。通过Blob对象，我们可以创建一个文件并将数据写入到该文件中。下面是一个简单的示例代码，演示如何使用Blob对象将数据写入到一个文件中：

// 创建一个Blob对象
const blob = new Blob(["Hello, world!"], { type: "text/plain" });

// 创建一个URL对象
const url = URL.createObjectURL(blob);

// 创建一个a标签
const a = document.createElement("a");
a.href = url;
a.download = "hello.txt";

// 触发点击事件，将文件保存到本地
a.click();

在上面的示例代码中，我们首先创建了一个Blob对象，它包含了一个字符串”Hello, world!”。然后我们使用URL.createObjectURL方法创建了一个URL对象，将Blob对象转化为URL。接着创建了一个a标签，并设置其href属性为URL对象的值，download属性为文件名。最后通过模拟点击事件，将文件保存到本地。

使用File对象

除了使用Blob对象，我们还可以使用File对象来表示一个文件。File对象继承自Blob对象，除了包含数据外，还可以包含文件名、文件类型等信息。下面是一个示例代码，演示如何使用File对象将数据写入到一个文件中：

// 创建一个File对象
const data = "Hello, world!";
const file = new File([data], "hello.txt", { type: "text/plain" });

// 创建一个URL对象
const url = URL.createObjectURL(file);

// 创建一个a标签
const a = document.createElement("a");
a.href = url;
a.download = file.name;

// 触发点击事件，将文件保存到本地
a.click();

在上面的示例代码中，我们首先创建了一个File对象，它包含了一个字符串”Hello, world!”、文件名”hello.txt”和文件类型”text/plain”。然后通过URL.createObjectURL方法将File对象转化为URL，并将URL赋值给a标签的href属性。最后通过模拟点击事件，将文件保存到本地。

使用Blob构建Excel文件

很多时候，我们需要将表格数据以Excel文件的形式导出到本地。在这种情况下，我们可以使用Blob对象将数据写入到一个Excel文件中。下面是一个示例代码，演示如何使用Blob对象将表格数据写入到一个Excel文件中：

// 构建Excel文件内容
const data = [
  ["Name", "Age", "Gender"],
  ["Alice", 28, "Female"],
  ["Bob", 32, "Male"],
  ["Charlie", 25, "Male"]
];

// 构建Excel文件
const csv = data.map(row => row.join(",")).join("\n");
const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });

// 创建一个URL对象
const url = URL.createObjectURL(blob);

// 创建一个a标签
const a = document.createElement("a");
a.href = url;
a.download = "data.csv";

// 触发点击事件，将文件保存到本地
a.click();

在上面的示例代码中，我们首先定义了一个表格数据data，然后将数据转化为CSV格式的字符串。接着使用Blob对象将CSV数据写入到一个文件中，并通过模拟点击事件将文件保存到本地。