关于Blob链接的一些开发应用

一、什么是Blob链接

Blob链接是一种基于URL.createObjectURL(blob)生成的链接，可以将文件或数据的内容转换为URL的形式，方便进行下载或者展示。Blob链接可以是二进制数据、音频、视频、图像等。

二、Blob链接的生成方式

1. 创建Blob对象

// data为文件的内容，type为文件类型
const blob = new Blob([data], { type: 'text/plain' });

其有两个参数：

array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的，将会被放进 Blob；
options：可选的 BlobPropertyBag 字典，它可能会指定如下两个属性
- type：默认值为 ""，表示将会被放入到 blob 中的数组内容的 MIME 类型。
- endings：默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入，不常用。

2. 生成Blob URL

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。

const blobUrl = URL.createObjectURL(blob);

需要注意的是，即使是同样的二进制数据，每调用一次URL.createObjectURL方法，就会得到一个不一样的Blob URL。这个URL的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个Blob URL就失效。

3. 进行文件下载或展示

// 下载文件
const link = document.createElement('a');
link.href = blobUrl;
link.download = 'filename.txt';
document.body.appendChild(link);
link.click();

// 展示文件
const iframe = document.createElement('iframe');
iframe.src = blobUrl;
document.body.appendChild(iframe);

三、Blob链接的优点

Blob链接相比其他下载方式，有以下优点：

1. 不用向服务器发送请求，可以降低服务器的压力。

2. 可以通过JavaScript动态生成文件，方便进行个性化定制。

3. 可以展示或者下载内存中的二进制数据，避免了前后端多次数据交互的问题。

四、Blob链接的应用场景

Blob链接的应用场景比较广泛，在实际开发中可以用于以下方面：

1. 音频、视频的播放。

2. 图片的预览或下载。

3. Excel、CSV等格式的文件下载。

五、注意事项

1. 不要在Blob链接生成之后一直占用内存，需要及时进行释放，可以通过URL.revokeObjectURL(blobURL)进行释放。

2. 有时候Blob链接可能会被防火墙或者代理服务器所拦截，请在使用之前进行相应的测试。

六、使用案例

1、下载跨域图片

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);
         

            // a标签下载
            var addElement = document.createElement('a')
            addElement.innerHTML = '点击'
            addElement.href = fileUrl
            addElement.download = 'a.png'
            document.body.appendChild(addElement)
        }
}
    

// 调用下载跨域图片链接
download("https://xxx.png")

2、导出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.xxx.com/</td>
    </tr>
    <tr>
        <td>MDN</td>
        <td>https://developer.xxx.org/</td>
    </tr>
</table>

</body>

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";
}

3、canvas绘制跨域图片

export function blobDownload(url) {
  return new Promise((resolve, reject) => {
    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);
      resolve(fileUrl) 
    }

    // xhr.onerror = function (err) {
    //   reject(err)
    // }
  })
  
}

let url = '跨域的图片链接'

let blobUrl = ''

await blobDownload(url).then(_blobUrl => {

    blobUrl = _blobUrl

    let img = new Image()
    img.src = blobUrl
    
    img.onload = () => {
        this.ctx.drawImage(img, 0, 0, 100, 100)
    }
    
            
})


// 不用的时候要记得手动释放Blob链接
URL.revokeObjectURL(blobUrl)