【JS】Blob对象使用：前端实现流文件下载

最新推荐文章于 2024-05-05 16:18:15 发布

卸载引擎

最新推荐文章于 2024-05-05 16:18:15 发布

阅读量2.6k

点赞数 3

分类专栏： javascript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_42960907/article/details/129243795

版权

javascript 专栏收录该内容

54 篇文章 12 订阅

订阅专栏

前端由于安全方面的因素，不能直接对文件进行写操作。
但是在实际的业务需求中，难免会遇到各种各样文件的下载、预览。
如果服务端下载文件是以流的形式传递到前端，前端通常是将流转换为objectURL,借用a标签的download属性，进行文件下载。

Bolb对象

定义

Blob表示二进制类型的大对象，通常是影像、声音或多媒体文件，在 javaScript中Blob表示一个不可变、原始数据的类文件对象。

其构造函数如下:

new Blob(blobParts, options);

blobParts:数组类型，可以存放任意多个ArrayBuffer, ArrayBufferView, Blob或者DOMString（会编码为UTF-8），将它们连接起来构成Blob对象的数据。
options:可选项，用于设置blob对象的属性，可以指定如下两个属性：
– type：存放到blob中数组内容的MIME类型（默认为""），例如image/png。
– endings: 是否转换换行符，用于指定包含行结束符\n的字符串如何被写入。值为native表示行结束符会被更改为适合宿主操作系统文件系统的换行符（默认值为transparent表示会保持blob中保存的结束符不变）

例如：（从字符串创建 Blob）

let blob = new Blob(["<html>…</html>"], {type: 'text/html'});

请注意：第一个参数必须是一个数组 [...]

属性

Blob对象有两个属性，参见下表

属性名	描述
size	Blob对象中所包含数据的大小。字节为单位。只读。
type	一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。只读。

例如：

const blob = new Blob(['<div>john</div>'], { type: 'text/xml' });
console.log(blob); // Blob {size: 15, type: "text/xml"}

前端实现流文件下载

const res = await axiosRequest({
	url: state.exportUrl,
	method: 'post',
	data: form,
    responseType: 'blob',  // 设置返回为二进制流
});
downloadSource(res);  // 调用此方法实现下载流文件

// 下载流
const downloadSource = (res: any) => {
  let url =(window.URL || window.webkitURL).createObjectURL(new Blob([res], { type:'application/zip'}));
  let link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', `${这里写文件名})`);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

new Blob的第二个参数可以按如下设置：

word文件：
.doc格式的设置为：application/vnd.msword;charset=utf-8
.docx格式的设置为：application/vnd.openxmlformats-officedocument.wordprocessingml.document

excel文件：
.xls格式的设置为：application/vnd.ms-excel
.xlsx格式的设置为：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

zip文件：
. zip格式的设置为：application/zip

https://juejin.cn/post/6844904183661854727
https://juejin.cn/post/6916675943343849479

卸载引擎

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS】Blob对象使用：前端实现流文件下载

前端由于安全方面的因素，不能直接对文件进行写操作。但是在实际的业务需求中，难免会遇到各种各样文件的下载、预览。如果服务端下载文件是以流的形式传递到前端，前端通常是将流转换为objectURL,借用a标签的download属性，进行文件下载。
复制链接

扫一扫