• 日常搜索
  • 端口查询
  • IP查询
  • 在线工具
  • 搜本站

如何使用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,使我们能够更好地控制过程的不同方面,例如在用户许可的情况下更改默认下载位置。但是,它目前没有在实际项目中使用的重要浏览器支持。

如何使用JavaScript保存文件(在线演示)  第1张

文章目录
  • 使用数据 URL 保存文件
  • 使用 Blob 创建和保存文件
  • 如何使用 JavaScript 将文件保存在特定文件夹中?
  • 最后的想法
  • 发表评论