java下载blob类型文件_Js之Blob类型以及文件流下载流程

什么是blob？

以下是MDN的官方解释：Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

要从其他非blob对象和数据构造一个 Blob，请使用 Blob() 构造函数。

实际上 file 对象只是 blob 对象的一个更具体的版本，blob 存储着大量的二进制数据，并且 blob 的 size 和 type 属性，都会被 file 对象所继承。

所以， 在大多数情况下，blob 对象和 file 对象可以用在同一个地方，例如，可以使用 FileReader 借口从 blob 读取数据，也可以使用 URL.createObjectURL() 从 blob 创建一个新的 URL对象。

blob的创建

Blob() 构造函数允许通过其它对象创建 Blob 对象。比如，用字符串构建一个 blobvar debug = {hello: "world"};

var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

构造函数，接受两个参数，第一个为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers。第二个参数，是一个包含了两个属性的对象，其两个属性分别是：

type -- MIME 的类型。

endings -- 决定 append() 的数据格式，(数据中的 \n 如何被转换)可以取值为 "transparent" 或者 "native"(t的话不变，n 的话按操作系统转换；t* 为默认) 。

blob的应用

大文件分割(分片上传)

slice() 方法接受三个参数，起始偏移量，结束偏移量，还有可选的 mime 类型。如果 mime 类型，没有设置，那么新的 Blob 对象的 mime 类型和父级一样。

当要上传大文件的时候，此方法非常有用，可以将大文件分割分段，然后各自上传，因为分割之后的 Blob 对象和原始的是独立存在的。

不过目前浏览器实现此方法还没有统一，火狐使用的是 mozSlice() ，Chrome 使用的是 webkitSlice() ，其他浏览器则正常的方式 slice()

可以写一个兼容各浏览器的方法：function sliceBlob(blob, start, end, type) {

type = type || blob.type;

if (blob.mozSlice) {

return blob.mozSlice(start, end, type);

} else if (blob.webkitSlice) {

return blob.webkitSlice(start, end type);

} else {

throw new Error("This doesn't work!");

}

}

文件流下载

后端返回的数据是文件流的时候，需要在axios请求指定responseType：// 下载接口 文件下载

export function downloadRes(data) {

return request({

timeout: 30000,

responseType: 'blob', // 需要指定

baseURL: 'xxx',

method: 'post',

data

})

}

这是返回的data就是blob类型数据，但是我们下载的话还需要一个文件名，后端会默认指定把文件名放在content-disposition这个响应头：let fileName = '';

const contentDisposition = res.headers['content-disposition'];

if (contentDisposition) {

fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1], "UTF-8");

}

创建blob对象，创建reader，监听加载时间，创建a标签，模拟点击事件，移除a标签。这就是一个文件流下载的基本流程：const blob = new Blob([res.data]);

const reader = new FileReader();

reader.readAsDataURL(blob);

reader.onload = (e) => {

const a = document.createElement('a');

a.download = fileName;

a.href = e.target.result;

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

}