Blob()对象
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
语法
var aBlob = new Blob( array, options );
参数
- array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings 会被编码为 UTF-8。
- options 是一个可选的
BlobPropertyBag
字典,它可能会指定如下两个属性:
type
,默认值为""
,它代表了将会被放入到 blob 中的数组内容的 MIME 类型。endings
,默认值为"transparent"
,用于指定包含行结束符\n
的字符串如何被写入。 它是以下两个值中的一个:"native"
,代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者"transparent"
,代表会保持 blob 中保存的结束符不变
一:下载跨域图片
在下载本地服务器图片的时候,利用a标签可以直接下载。但如果图片跨域,点击a标签会直接跳转到图片的网址
<a download="aa.jpeg" href="https://xx.png">图片(网络图片)跨域不可下载</a>
<br>
<a href="./img/duolaia.JPEG">图片(本地图片)</a>
那么我们就需要使用 BLOB URL
function download(url) {
var xhr = new XMLHttpRequest();
xhr.open("get", url)
xhr.responseType = 'blob'
xhr.send();
xhr.onload = function () {
var fileBlob = xhr.response;
console.log(fileBlob);
var fileUrl = URL.createObjectURL(fileBlob);
//document.querySelector("img").setAttribute('src',fileUrl)
var addElement = document.createElement('a')
addElement.innerHTML = '点击'
addElement.href = fileUrl
addElement.download = 'a.png'
document.body.appendChild(addElement)
}
}
download("https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500")
二:导出table表格为excel表
<body>
<a type="button" onclick="exportButton(this)">导出表格</a>
<table border="1">
<tr>
<td>学习前端网站</td>
<td>网址</td>
</tr>
<tr>
<td>菜鸟教程</td>
<td>https://www.runoob.com/</td>
</tr>
<tr>
<td>MDN</td>
<td>https://developer.mozilla.org/</td>
</tr>
</table>
</body>
Js代码
function exportButton(e) {
var tableHtml = "<html><head><meta charset='utf-8' /></head><body>" + document.querySelector('table').outerHTML + "</body></html>";
var blob = new Blob([tableHtml], {type: "application/vnd.ms-excel"});
//设置BLOB URL
e.href = URL.createObjectURL(blob);
// 设置文件名
e.download = "表.xls";
}
效果图
媒体类型(MIME 类型):MIME 类型 - HTTP | MDN