赞
踩
Blob = Binary Large Object 的缩写,直译为二进制大对象,虽然在大多数前端开发中并不常见,但实际上在MYSQL数据库中,可以通过设置一个BLOB类型的数据来存储一个BLOB对象的内容
使用blob对象是在接受后台返回的数据流,导出数据,下载excel是用于处理后端返回的数据流,后端返回的是一个下载链接,类似这样的:
<a href="blob:http://172.168.0.110:10000/67d67b99-4996-4607-badb-22420af5b8d8" download="%E9%61%A8%E8%AF%8A%E6%97%A5%E5%BF%97%U1%88%97%A8%A1%A8.xlsx">Download file</a>
我们需要通过blob对象来处理,需要模拟一个<a>标签来提供下载链接
const link = document.createElement('a') // 创建一个a标签
link.style.display = 'none'
// 通过构造函数来实例化一个Blob对象
const blob = new Blob([res.data], {
type: 'application/vnd.ms-excel' // 数据类型
})
// res.data 一般为文件的 size, type, 所以blob值一般就是这些
// 创建一个url 对象,并将blob实例作为参数传入,这样href的值就是以blob开头的一个文件流下载链接
// "blob:http://127.0.0.1:8080/9b3e0266-9d56-4119-b3b9-38ccce875fd3"
// objectURL = URL.createObjectURL(object), object 参数是一个用于创建 URL 的 File
对象、Blob
对象或 者 MediaSource
对象。
link.href = URL.createObjectURL(blob)
const fileName = 'xxx.xlsx'
link.download = fileName
link.click()
创建一个Bolb对象 (构造函数来构建)
var blob = new Blob(array[optional], options[optional]);
构造函数,接受两个参数
第一个参数:为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。
第二个参数:用于指定将要放入Blob
中的数据的类型(MIME
)(后端可以通过枚举MimeType,获取对应类型:
MimeType mimeType = MimeType.toEnum(file.getContentType()))
<script>
var blob = new Blob(["Hello World!"],{type:"text/plain"})
</script>
Blob
对象的基本属性:
size :Blob
对象包含的字节数。(readonly)
type : Blob
对象包含的数据类型MIME
,如果类型未知则返回空字符串。
Blob
对象的基本方法:
大文件分割 (slice() 方法),slice
方法与数组的slice
类似。
Blob.slice([start, [end, [content-type]]])
type : Blob
对象包含的数据类型MIME
,如果类型未知则返回空字符串。
也可参考以下博客,写的很详细:
https://www.jianshu.com/p/75bfd7cd9e1b
https://blog.csdn.net/weixin_41888813/article/details/83858343
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。