如何使用 JavaScript 保存文件 |21xrx.com

如何使用 JavaScript 保存文件

2023-06-16 13:33:33 深夜i 13 0

JavaScript Blob 保存文件

在现代 Web 应用程序中，有许多情况需要将数据保存到本地文件中，而 JavaScript 是实现这一目标的常用方法之一。本文将介绍如何使用 JavaScript 保存文件，并提供一些代码示例。

1. 创建文件并写入内容

在 JavaScript 中，可以使用 Blob 对象创建文件并写入内容。以下是一个示例代码，展示如何创建一个文本文件并写入一些数据：

function saveTextAsFile(textToWrite, fileNameToSaveAs)
{
  var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  if (window.URL != null)
  {
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
  }
  else
  {
    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    downloadLink.click();
  }
}

在这个函数中，首先创建了一个 Blob 对象，它是一段文本数据的二进制表示。接下来，创建一个链接元素，将文件名和下载链接分别设置为函数的参数。最后，使用 URL.createObjectURL() 方法将 Blob 对象创建为可下载的 URL，并添加到新创建的链接元素中。

2. 保存 JSON 数据

除了文本文件外，还可以使用相同的技术保存 JSON 数据。以下是一个示例代码：

function saveJSONObjectAsFile(jsonObject, fileNameToSaveAs)
{
  var jsonString = JSON.stringify(jsonObject);
  var jsonFileAsBlob = new Blob([jsonString], {type:'application/json'});
  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  if (window.URL != null)
  {
    downloadLink.href = window.URL.createObjectURL(jsonFileAsBlob);
  }
  else
  {
    downloadLink.href = window.webkitURL.createObjectURL(jsonFileAsBlob);
    downloadLink.click();
  }
}

在这个函数中，使用 JSON.stringify() 方法将 JSON 对象转换为字符串，然后使用相同的方式创建一个 Blob 对象。

3. 保存 CSV 文件

CSV 文件是一种常用的数据格式，可以使用 JavaScript 保存为文件。以下是一个示例代码：

function saveCSVFile(csvString, fileNameToSaveAs)
{
  var csvFileAsBlob = new Blob([csvString], {type:'text/csv'});
  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  if (window.URL != null)
  {
    downloadLink.href = window.URL.createObjectURL(csvFileAsBlob);
  }
  else
  {
    downloadLink.href = window.webkitURL.createObjectURL(csvFileAsBlob);
    downloadLink.click();
  }
}

在这个函数中，相同的流程被用来创建 CSV 文件，并将数据写入 Blob 对象中。注意，这里的 MIME 类型被设置为 'text/csv'。

总结

本文介绍了如何使用 JavaScript 保存文件，并提供了一些代码示例。 Blob 对象提供了一种方便的方式来处理二进制数据，可以将其保存为文件并下载到本地磁盘上。除了保存文本文件外，还可以保存 JSON 和 CSV 数据文件，这可以帮助 Web 应用程序更好地处理数据。

上一篇: idea打包java可执行jar包

下一篇: Java文件读写A+B题解析

评论区

相似文章