前端下载文件

XYXYYDD

已于 2023-03-05 15:56:09 修改

阅读量592

点赞数

分类专栏：开发技巧文章标签：前端

于 2022-11-07 15:33:05 首次发布

本文链接：https://blog.csdn.net/XYXYYDD/article/details/127731087

版权

开发技巧专栏收录该内容

18 篇文章 0 订阅

订阅专栏

下载前先区分后端返回类型，二进制流和URL文件，ContentType是application/octet-stream;charset=utf-8，说明是文件。

1。URL文件下载

调用

请求

2. 二进制流文件下载

3.为什么下载文件需要使用URL.createObjectURL()方法来生成一个下载链接

使用URL.createObjectURL()方法可以将Blob、File、MediaSource等对象生成一个唯一的URL，可以用于指向这些对象的临时URL。这个URL是一个虚拟的URL，可以在浏览器中直接访问这些对象，而不需要将它们下载到本地。

在文件下载中，我们可以通过XMLHttpRequest或fetch获取文件数据，然后将数据生成一个Blob对象，再通过URL.createObjectURL()方法生成一个URL，最后将这个URL赋值给a标签的href属性，就可以实现文件下载。这样做的好处是，可以避免在本地存储大文件，节省硬盘空间，同时也可以提高文件下载的效率。

需要注意的是，使用完URL.createObjectURL()生成的URL后，需要及时调用URL.revokeObjectURL()方法来释放这个URL，以避免内存泄漏。

4.为什么下载文件需要创建一个Blob对象

在前端下载文件时，需要将文件数据转换为Blob对象。Blob（Binary Large Object）是一种二进制数据类型，可以表示各种类型的数据，包括图片、音频、视频、文本等等。

在下载文件时，我们可以通过XMLHttpRequest或fetch获取文件数据，然后将数据生成一个Blob对象，再通过URL.createObjectURL()方法生成一个URL，最后将这个URL赋值给a标签的href属性，就可以实现文件下载。

创建Blob对象时，需要传入一个数组或字符串作为参数，表示要创建的二进制数据。例如，下面的代码创建了一个包含字符串数据的Blob对象：

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

在创建Blob对象时，还可以指定对象的MIME类型，用于指示该对象的内容类型。MIME类型通常由文件扩展名或文件内容推断出来，不同类型的文件有不同的MIME类型，例如，文本文件的MIME类型是text/plain，图片文件的MIME类型是image/png或image/jpeg等等。

需要注意的是，Blob对象并不是一个文件，只是一个二进制数据对象，需要将其转换为文件才能下载。在前端下载文件时，可以通过创建一个a标签，将Blob对象生成的URL赋值给a标签的href属性，然后通过调用a标签的click()方法来实现文件下载。

5.使用XMLHttpRequest下载和使用fetch下载有什么区别

语法不同：XMLHttpRequest使用回调函数处理响应，而fetch使用Promise。
fetch支持跨域资源共享(CORS)：fetch API自动处理CORS，而XMLHttpRequest需要手动设置。
fetch返回一个Response对象，而XMLHttpRequest返回一个XMLHttpRequest对象。
fetch默认不会发送cookies，需要手动设置credentials属性，而XMLHttpRequest默认会发送cookies。
fetch可以使用ES6的async/await语法，而XMLHttpRequest不支持。
fetch可以取消请求，而XMLHttpRequest不支持。

总之，fetch更加现代化，易于使用，但是在某些情况下，XMLHttpRequest可能更加灵活和可靠。

6、responseType: "blob"

responseType: "blob"是XMLHttpRequest的一个属性，它用于指定响应的数据类型为二进制数据（Blob对象）。Blob对象是一种特殊的JavaScript对象，用于表示二进制数据，例如图像、音频、视频等。

当XMLHttpRequest的responseType属性设置为"blob"时，服务器返回的响应数据将被自动转换为Blob对象。可以通过response属性来访问Blob对象，然后可以将其用于创建URL、Blob URL、下载文件等操作。

以下是一个使用responseType: "blob"的例子：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/image.png');
xhr.responseType = 'blob';
xhr.onload = function() {
  var blob = xhr.response;
  var url = URL.createObjectURL(blob);
  var img = new Image();
  img.src = url;
  document.body.appendChild(img);
};
xhr.send();

在这个例子中，我们发送一个GET请求来获取一个图像文件，设置responseType为"blob"，并在onload回调函数中将响应数据转换为Blob对象。然后，我们使用createObjectURL方法将Blob对象转换为URL，创建一个Image对象，设置其src属性为URL，并将其添加到文档中。

拓展：来源：vue中文件下载的几种方式 - 秃头的铲屎官 - 博客园