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

    一、什么是Blob链接

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

    二、Blob链接的生成方式

    1. 创建Blob对象

    1. // data为文件的内容，type为文件类型
    2. 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. 进行文件下载或展示

    1. // 下载文件
    2. const link = document.createElement('a');
    3. link.href = blobUrl;
    4. link.download = 'filename.txt';
    5. document.body.appendChild(link);
    6. link.click();
    7.  
    8. // 展示文件
    9. const iframe = document.createElement('iframe');
    10. iframe.src = blobUrl;
    11. 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、下载跨域图片

    1. function download(url) {
    2.         var xhr = new XMLHttpRequest();
    3.         xhr.open("get", url)
    4.         xhr.responseType = 'blob'
    5.         xhr.send();
    6.  
    7.         xhr.onload = function () {
    8.             var fileBlob = xhr.response;
    9.             console.log(fileBlob);
    10.             var fileUrl = URL.createObjectURL(fileBlob);
    11.          
    12.  
    13.             // a标签下载
    14.             var addElement = document.createElement('a')
    15.             addElement.innerHTML = '点击'
    16.             addElement.href = fileUrl
    17.             addElement.download = 'a.png'
    18.             document.body.appendChild(addElement)
    19.         }
    20. }
    21.     
    22.  
    23. // 调用下载跨域图片链接
    24. download("https://xxx.png")

    2、导出table表格为excel表

    1. <body>
    2.  
    3. <a type="button" onclick="exportButton(this)">导出表格a>
    4.  
    5. <table border="1">
    6.     <tr>
    7.         <td>学习网站td>
    8.         <td>网址td>
    9.     tr>
    10.     <tr>
    11.         <td>菜鸟教程td>
    12.         <td>https://www.xxx.com/td>
    13.     tr>
    14.     <tr>
    15.         <td>MDNtd>
    16.         <td>https://developer.xxx.org/td>
    17.     tr>
    18. table>
    19.  
    20. body>
    1. function exportButton(e) {
    2.  
    3.         var tableHtml = "" + document.querySelector('table').outerHTML + "";
    4.  
    5.         var blob = new Blob([tableHtml], {type: "application/vnd.ms-excel"});
    6.         
    7.         // 设置BLOB URL
    8.         e.href = URL.createObjectURL(blob);
    9.         
    10.         // 设置文件名
    11.         e.download = "表.xls";
    12. }

     3、canvas绘制跨域图片

    1. export function blobDownload(url) {
    2.   return new Promise((resolve, reject) => {
    3.     var xhr = new XMLHttpRequest();
    4.     xhr.open("get", url)
    5.     xhr.responseType = 'blob'
    6.     xhr.send();
    7.     xhr.onload = function () {
    8.       var fileBlob = xhr.response;
    9.       console.log(fileBlob);
    10.       var fileUrl = URL.createObjectURL(fileBlob);
    11.       resolve(fileUrl) 
    12.     }
    13.  
    14.     // xhr.onerror = function (err) {
    15.     //   reject(err)
    16.     // }
    17.   })
    18.   
    19. }
    1. let url = '跨域的图片链接'
    2.  
    3. let blobUrl = ''
    4.  
    5. await blobDownload(url).then(_blobUrl => {
    6.  
    7.     blobUrl = _blobUrl
    8.  
    9.     let img = new Image()
    10.     img.src = blobUrl
    11.     
    12.     img.onload = () => {
    13.         this.ctx.drawImage(img, 0, 0, 100, 100)
    14.     }
    15.     
    16.             
    17. })
    18.  
    19.  
    20. // 不用的时候要记得手动释放Blob链接
    21. URL.revokeObjectURL(blobUrl)

  • 相关阅读:
    IDEA 开发插件，插件依赖｜文件路径转VirtualFile 遇坑随笔
    ChatGPT在数据分析学习阶段的应用
    DAY5-深度学习100例-卷积神经网络（CNN）天气识别
    用selenium和xpath定位元素并获取属性值以及str字符型转json型
    [黑马程序员Pandas教程]——DataFrame查询数据
    Vue与TypeScript的配合：如何在Vue项目中使用TypeScript，利用静态类型提高代码的可维护性
    22/11/24
    Linux两条服务器实现相互免密登录
    vue模板语法（上集）
    StringUtils 工具类常用方法汇总 1(判空、转换、移除、替换、反转)
  • 原文地址：https://blog.csdn.net/qq_31851435/article/details/133384385