前端由于安全方面的因素,不能直接对文件进行写操作。
但是在实际的业务需求中,难免会遇到各种各样文件的下载、预览。
如果服务端下载文件是以流的形式传递到前端,前端通常是将流转换为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