HTML 从 “blob” URL 中检索和下载文件

在本文中，我们将介绍如何通过 HTML 从 “blob” URL 检索并下载文件。

阅读更多：HTML 教程

“blob” URL 是什么？

“blob” URL 是一种特殊的URL，用于表示二进制数据。它通常与通过 JavaScript 创建的 Blob 对象一起使用，Blob 对象可以包含各种类型的数据，包括图像、音频、视频和其他文件。

“blob” URL 的格式类似于以下示例：

blob:https://example.com/1a2b3c4d-5678-90ef-ghij-klmnopqrstuv

如何从 “blob” URL 中检索文件

要从 “blob” URL 中检索文件，可以使用JavaScript的XMLHttpRequest对象或Fetch API。下面分别介绍这两种方法。

使用 XMLHttpRequest 检索 “blob” 文件

<script>
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'blob:https://example.com/1a2b3c4d-5678-90ef-ghij-klmnopqrstuv');
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      var blob = xhr.response;
      // 处理 blob 对象，例如保存到本地或显示在页面上
    }
  };

  xhr.send();
</script>

在上面的示例中，我们首先创建了一个 XMLHttpRequest 对象，并通过open方法指定了要检索的 “blob” URL。然后，我们将responseType属性设置为blob，以告诉浏览器我们期望获取一个 Blob 对象作为响应。最后，我们在onload事件处理程序中处理返回的 Blob 对象。

使用 Fetch API 检索 “blob” 文件

<script>
  fetch('blob:https://example.com/1a2b3c4d-5678-90ef-ghij-klmnopqrstuv')
    .then(function(response) {
      if (response.ok) {
        return response.blob();
      }
    })
    .then(function(blob) {
      // 处理 blob 对象，例如保存到本地或显示在页面上
    });
</script>

上面的代码使用了 Fetch API，它是一种更简单和现代的方法来发起网络请求。与 XMLHttpRequest 不同，Fetch API 使用了 Promises 和链式调用，使代码更加简洁和易读。

如何下载 “blob” 文件

一旦从 “blob” URL 中检索到文件，我们可以通过创建一个下载链接或将其保存到本地来下载文件。

创建一个下载链接

<script>
  function downloadBlob(blob, fileName) {
    var url = URL.createObjectURL(blob);

    var link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }

  // 使用方法
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'blob:https://example.com/1a2b3c4d-5678-90ef-ghij-klmnopqrstuv');
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      var blob = xhr.response;
      downloadBlob(blob, 'file.txt');
    }
  };

  xhr.send();
</script>

在上面的代码中，我们定义了一个名为 downloadBlob 的函数，该函数接受一个 Blob 对象和要下载的文件名作为参数。使用 URL.createObjectURL 方法，我们创建了一个临时的 URL，将其分配给 <a> 元素的 href 属性，然后通过调用 click() 方法触发了下载链接的点击操作。最后，我们使用 URL.revokeObjectURL 方法释放了创建的临时 URL。

将文件保存到本地

要将文件保存到本地，我们可以使用 HTML5 的 File API 和 FileReader 对象。

<script>
  function saveBlob(blob, fileName) {
    var reader = new FileReader();
    reader.onload = function(event) {
      var link = document.createElement('a');
      link.href = event.target.result;
      link.download = fileName;

      document.body.appendChild(link);
      link.click();

      document.body.removeChild(link);
    };

    reader.readAsDataURL(blob);
  }

  // 使用方法
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'blob:https://example.com/1a2b3c4d-5678-90ef-ghij-klmnopqrstuv');
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      var blob = xhr.response;
      saveBlob(blob, 'file.txt');
    }
  };

  xhr.send();
</script>

在上面的代码中，我们定义了一个名为 saveBlob 的函数，它将 Blob 对象和要保存的文件名作为参数。我们创建一个 FileReader 对象，并为其 onload 事件设置一个处理程序。在处理程序中，我们创建了一个链接元素，并将数据 URL 分配给其 href 属性。然后，我们通过调用 click() 方法触发了链接的点击操作。

总结

在本文中，我们介绍了如何使用 HTML 从 “blob” URL 中检索和下载文件。我们讨论了如何使用 XMLHttpRequest 和 Fetch API 检索 “blob” 文件，并分别演示了如何创建下载链接和将文件保存到本地。通过这些方法，您可以方便地处理和下载通过 “blob” URL 表示的二进制数据。

请记住，”blob” URL 只在其所属的页面有效，如果您将 “blob” URL 分享给其他用户，他们将无法使用它。此外，”blob” URL 仅在当前会话期间有效，一旦页面重新加载，”blob” URL 就会失效。