如何使用JavaScript保存文件（在线演示）

JavaScript 是最流行的编程语言之一，主要是因为它在浏览器中运行时处理网站的前端。随着 Web 标准的进步，我们越来越多地使用它来完成越来越多的任务，这些任务在以前很难或不可能仅用 JavaScript 完成。

在本教程中，您将学如何使用 JavaScript 创建和保存文件。我们将讨论您可以使用的三种不同技术。

使用数据 URL 保存文件

保存文件的最简单方法是使用包含所有相关信息的数据 URL。这些数据 URL 是以data:方案为前缀的特殊 URL。它们非常适合在 HTML 文档中嵌入小文件。这些 URL 遵循以下语法：

data:[<mediatype>][;base64],<data>

mediatype令牌实际上是一种 MIME 类型，用于指定文档或文件的性质和格式。它的默认值为text/plain;charset=US-ASCII. 令牌是可选的base64，仅当您想要以文本方式存储二进制数据时才需要。我们在所有这些标记之后指定我们的实际数据。

我们可以使用该download属性来指定下载后要放置所有内容的文件的名称。以下是一起使用所有这些属性的示例：

<a download="monty.txt" href="data:text/plain;charset=utf-8,My name is Monty.">Download Text File with Name</a>

当你想让整个事情变得动态时，JavaScript 会非常方便。这是一个例子：

const link = document.querySelector('a.dynamic');

let name = 'Monty';

let text = `My name in ${name}.

I love writing tutorials.`;

link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));

link.setAttribute('download', `${name.toLowerCase()}.txt`);

我们首先使用该querySelector()方法选择我们的链接，然后创建一堆变量来存储文件名及其内容。模板文字的使用使我们能够轻松地处理多行字符串。

我们通过将元数据与使用该encodeURIComponent()函数编码的实际内容连接起来来创建我们的数据 URL。下面的 CodePen 演示展示了这种使用 JavaScript 保存文本文件的方法。

See the Pen  Saving Files with JavaScript by Monty (@Shokeen)  on CodePen.

使用 Blob 创建和保存文件

Blob 是 JavaScript 中包含原始数据的类似文件的对象。该原始数据可以作为文本或二进制数据读取。在本教程中，我们将使用 blob 在 JavaScript 中创建和保存文件。

我们可以使用构造函数创建自己的 blob，该Blob()构造函数接受要放入 blob 中的特定对象数组。您可以将数据的 MIME 类型作为键值对传递到作为Blob()构造函数的第二个参数的对象中。默认为空字符串。

我们可以修改上一节中的最后一个示例，以使用带有以下 JavaScript 代码的 blob：

const link = document.querySelector('a.simple');

let name = 'Monty';

let text = `My name in ${name}.

I love writing tutorials.`;

var textBlob = new Blob([text], {type: 'text/plain'});

link.setAttribute('href', URL.createObjectURL(textBlob));

link.setAttribute('download', `${name.toLowerCase()}.txt`);

我们textBlob通过调用Blob()构造函数并将text变量作为数组元素传递给它来创建我们的。之后，我们简单地设置href和download属性的值。在这种情况下，URL 是通过调用createObjectURL()函数创建的，该函数返回一个字符串，该字符串包含我们传递给它的对象的 URL。

让我们更进一步，创建一个 blob，其中的文本是从textarea网页上的元素动态获取的。您将能够在其中写入任何您喜欢的内容textarea，然后单击“保存文件”按钮将其保存为文件。

const saveBtn = document.querySelector('button.save-file');

let name = 'Monty';

saveBtn.addEventListener('click', function(){

  var tempLink = document.createElement("a");

  let textArea = document.querySelector("textarea");

  var taBlob = new Blob([textArea.value], {type: 'text/plain'});

  tempLink.setAttribute('href', URL.createObjectURL(taBlob));

  tempLink.setAttribute('download', `${name.toLowerCase()}.txt`);

  tempLink.click();

  URL.revokeObjectURL(tempLink.href);

});

我们首先获取对按钮的引用，然后监听它的点击事件。单击按钮后，我们将获取textarea元素的值并将其转换为 blob。之后，我们创建一个引用我们的 blob 的 URL，并将其分配给href我们创建的锚标记的属性。

您可以在下面的 CodePen 演示中尝试一下。作为练习，尝试修改代码，以便它使用用户输入的名称而不是静态的名称保存文件。

See the Pen  Saving Files with JavaScript (Blob) by Monty (@Shokeen)  on CodePen.

如何使用 JavaScript 将文件保存在特定文件夹中？

让我们首先解决这个问题。简而言之，你不可能在 JavaScript 中随意选择文件保存的目录。只有用户可以控制文件的保存位置。

不允许 Web 开发人员完全控制浏览器保存文件的位置的原因与安全性有关。如果每个网站都可以访问您设备上的文件系统，那么互联网的安全性就会大大降低。他们可以简单地将恶意代码注入您的系统或查看私人信息。

早些时候，除了由浏览器设置而不是单个网站规定的默认下载文件夹之外，不可能将文件保存在任何地方。但是，文件系统访问 API允许开发人员在用户授予访问权限后建议可以将文件保存在何处。请记住，该 API目前缺乏更广泛的浏览器支持，并且支持它的浏览器只是部分支持它。

让我们修改上一节中的最后一个示例，使用文件系统访问 API 在 JavaScript 中创建和保存文件。

const saveBtn = document.querySelector('button.save-file');

let name = 'Monty';

saveBtn.addEventListener('click', async function(){  

  let textArea = document.querySelector("textarea");

  var taBlob = new Blob([textArea.value], {type: 'text/plain'}); 


  const pickerOptions = {

    suggestedName: `${name.toLowerCase()}.txt`,

    types: [

      {

        description: 'Simple Text File',

        accept: {

          'text/plain': ['.txt'],

        },

      },

    ],

  };

  const fileHandle = await window.showSaveFilePicker(pickerOptions);

  const writableFileStream = await fileHandle.createWritable();

  await writableFileStream.write(taBlob);

  await writableFileStream.close();

});

像往常一样，我们首先创建元素text内部的blob。textarea我们创建一个对象，其中包含我们调用showFilePicker()方法时显示的文件选择器的不同选项。我们可以在这里建议一个名称来保存文件，还可以传递一个允许的文件类型数组来保存。这个方法返回一个FileSystemFileHandle我们可以调用该createWritable()方法的。

该createWritable()方法创建一个可写流，我们将之前创建的 blob 写入该流。最后，我们关闭我们的可写流。此时，流中的内容将保存到文件中。

尝试在textarea下面的 CodePen 中写一些东西，然后单击Save File按钮。该演示不适用于 Firefox，因此您应该尝试使用 Chrome 或 Edge。

See the Pen  Saving Files with JavaScript (File System Access API) by Monty (@Shokeen)  on CodePen.

最后的想法

在本教程中，我们学了三种在 JavaScript 中创建和保存文件的不同技术。前两种技术要求我们创建锚标记并为其href和download属性分配值。最后一种技术涉及使用文件系统访问 API，使我们能够更好地控制过程的不同方面，例如在用户许可的情况下更改默认下载位置。但是，它目前没有在实际项目中使用的重要浏览器支持。