前端下载文件

辰九九
121 阅读3分钟

Situation

前端下载远程文件

Task

请求接口下载zip文件，携带 token 进行用户身份认证

Action

发送请求时定义config如下

image.png 响应数据为 blob 格式，Blob（Binary Large Object）是一个表示二进制数据的对象。它可以存储和操作任意类型的二进制数据，例如文件内容、图像数据、音频数据等。

Blob 对象可以包含一个或多个数据块，每个数据块都有自己的数据和相关元数据。数据块可以是任意长度，它们按顺序组合成 Blob 对象。

Blob 对象常用于以下场景：

  1. 文件下载：将文件内容存储在 Blob 对象中，通过下载链接或其他方式提供给用户下载。

  2. 图片上传：将图片数据存储在 Blob 对象中，将其上传到服务器或进行其他图像处理操作。

  3. 音频/视频处理：将音频或视频数据存储在 Blob 对象中，通过媒体元素播放或传输。

要创建一个 Blob 对象，使用 new Blob() 构造函数，并传递一个包含数据的数组作为参数。例如：

let blob = new Blob([data], { type: 'mime_type' });

其中，data 是包含二进制数据的数组，mime_type 是数据的 MIME 类型。MIME 类型指定了数据的类型和格式，例如 image/jpeg、application/pdf 等。

通过 Blob 对象，可以执行一些常见操作，例如获取数据大小、切割数据块、将数据转换为数据 URL 等。

Blob 对象通常在浏览器环境中使用，对于后端服务器环境，需要使用其他方式处理二进制数据。

请求接口我们的后端返回数据如下图

image.png

当接口返回的数据类型为 "application/octet-stream" 时，表示返回的是通用的二进制流数据，而不是具体的文件类型。在前端处理这种情况时，使用 Blob 对象来创建文件，并通过下载链接或其他方式提供给用户进行下载。

      // response是请求接口返回的数据
      const blob = new Blob([response.resultData], { type: 'application/octet-stream' });
      // 创建一个临时的下载链接
      const downloadUrl = URL.createObjectURL(blob);
      // 创建一个 <a> 元素
      const linkElement = document.createElement('a');
      linkElement.href = downloadUrl;

      // 设置下载的文件名（可选），此处根据项目需求是zip后缀文件，不写的话，下载的文件就是没有后缀的
      linkElement.download = 'file_name.zip';

      // 模拟用户点击下载链接
      linkElement.click();

      // 清除临时的下载链接
      URL.revokeObjectURL(downloadUrl);

URL.createObjectURL() 用于创建一个包含指定数据的 URL。通常用于以下场景：

  1. 文件下载：创建包含文件内容的 Blob 对象，使用 URL.createObjectURL() 将其转换为临时的下载链接。将该链接指定给 <a> 元素的 href 属性，实现文件的下载操作。

  2. 媒体元素：使用 URL.createObjectURL() 创建一个 URL，将其赋值给 <video>、<audio> 或 <img> 等媒体元素的 src 属性，以在页面上显示或播放媒体文件。

  3. 对象引用：URL.createObjectURL() 还可以创建指向 JavaScript 对象的 URL，以便在不同的上下文中传递引用。例如，可以将对象的引用转换为 URL，并在不同的窗口或标签页中传递该 URL，以便在其他上下文中访问和操作该对象。

使用 URL.createObjectURL() 创建的 URL 是临时的，它在文档卸载时会被自动释放。调用 URL.revokeObjectURL() 可以手动释放该 URL，避免资源泄露。

每个浏览器对 URL.createObjectURL() 的支持和行为可能略有不同，请根据具体的浏览器兼容性情况进行测试和适配

Result

报错

 Error: TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

确保浏览器支持 URL.createObjectURL() 函数。大多数现代浏览器都支持该函数，但某些旧版浏览器可能不支持。 另外，确保传递给 URL.createObjectURL() 的参数是正确的 Blob 对象。可以尝试使用 new Blob([response.data], { type: 'application/octet-stream' }) 来创建 Blob 对象

解决以上问题后，我们就能下载正确格式的文件了~

avatar
文章
阅读
粉丝