JS 保存文件 - JavaScript

在 JavaScript 中，我们可以使用File和Blob对象来保存文件到本地或服务器。

保存为文本文件

const text = "这是一段文本内容。";

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

// 创建 a 标签
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = "file.txt";
link.click();

以上代码将创建一个名为file.txt的文本文件，里面的内容是text字符串。

保存为 JSON 文件

const data = {
  name: "张三",
  age: 23,
  address: "北京市朝阳区"
};

// 将对象转为 JSON 字符串
const json = JSON.stringify(data);

// 创建 Blob 对象
const blob = new Blob([json], { type: "application/json" });

// 创建 a 标签
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = "data.json";
link.click();

以上代码将创建一个名为data.json的 JSON 文件，里面的内容是data对象转化的 JSON 字符串。

保存为图片文件

const canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;

const ctx = canvas.getContext("2d");
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, 100, 100);

// 将 Canvas 转为 data URL
const url = canvas.toDataURL("image/png");

// 创建 a 标签
const link = document.createElement("a");
link.href = url;
link.download = "image.png";
link.click();

以上代码将创建一个名为image.png的图片文件，内容是 100 x 100 的红色矩形。

总结

以上代码使用Blob和URL.createObjectURL()方法来创建文件和文件链接，使用download属性来指定文件名，并使用click()方法触发下载文件。这些代码可以帮助你在 JavaScript 中实现保存各种类型文件的功能。