js 中的Blob类型

最新推荐文章于 2024-08-14 20:34:44 发布

原创最新推荐文章于 2024-08-14 20:34:44 发布 · 5.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#js #Blob #导出文件 #导出CSV

js 专栏收录该内容

7 篇文章

订阅专栏

部署运行你感兴趣的模型镜像

js 中的Blob类型

简单记录，以备不时之需，大佬勿喷，多谢！（づ￣3￣）づ╭❤～

Blob 是js 中的一种对象类型，主要用来存取二进制数据的。类似于File对象, File继承自Blob.

主要用途

最主要用途就是构建Blob对象,然后创建对象Url，然后赋值给标签或者使用xhr (XMLHttpRequest)进行下载

分片上传文件

这里主要说的是 File 对象，因为是继承自Blob，所以也可以算作是Blob对象特性

上传的例子：（来源于网络）使用slice属性进行分片上传

function uploadFile(file) {
  var chunkSize = 1024 * 1024; //每片1M大小
  var totalSize = file.size;
  var chunkQuantity = Math.ceil(totalSize/chunkSize); //分片总数
  var offset = 0; //偏移量

  var reader = new FileReader();
  reader.onload = function(e) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    xhr.overrideMimeType("application/octet-stream");
    
    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4 && xhr.status ===200) {
        ++offset;
        if(offset === chunkQuantity) {
          alert("上传完成");
        } else if(offset === chunkQuantity-1) {
          blob = file.slice(offset*chunkSize, totalSize);
          reader.readAsBinaryString(blob);
        } else {
          blob = file.slice(offset*chunkSize, (offset+1)*chunkSize);
          reader.readAsBinaryString(blob);
        }
      }else {
        alert("上传出错");
      }
    }

    if(xhr.sendAsBinary) {
      xhr.sendAsBinary(e.target.result);
    } else {
      xhr.send(e.target.result);
    }
  }
  var blob = file.slice(0, chunkSize);
  reader.readAsBinaryString(blob);
}

下载数据

可以通过创建Blob 对象的url 进行自定义数据的下载。

注意：建议在创建Blob 对象的时候指定文件类型

主要实现方式就是通过创建数据的Blob对象,并创建其Url然后赋值给相应的标签, 移除对应的url

可以根据具体需要，

赋值给a标签，通过点击操作可以下载文件数据。
赋值给img标签，可以为其添加图片数据。

例如下面的，通过将图片数据转换为Blob Url并赋值给img达到加载图片的目的

图片数据上传的时候是File对象，所以可以直接创建对象URL

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="file" accept="image/*" onchange="handleFile(this)">
        <br/>
        <img style="width:100%;height:100%;" src="" alt="">

        <script>
            function handleFile(e) {
                console.log(e.files);
                var file = e.files[0];
                var blob = URL.createObjectURL(file);
                var img = document.getElementsByTagName("img")[0];
                img.src = blob;
                img.onload = function (e) {
                    URL.revokeObjectURL(this.src); //释放createObjectURL创建得对象
                }
            }
        </script>
    </body>
</html>

下面是通过创建Blob Url 从而达到下载文件的目的。

function createDownloadFile() {
      let content = "Blob Data";
      let blob = new Blob([content], "text/plain");
      let link = document.getElementsByTagName('a')[0];
      link.download = "file";
      link.href = URL.createObjectURL(blob);
    }

获取源数据

let blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'}));
let xhr = new XMLHttpRequest();
//如果是指xhr.responseType = 'blob',将返回一个Blob对象，而不是文本；
//xhr.responseType = 'blob';
xhr.onload = function() {alert(xhr.responseText);}
xhr.open('get', blobUrl);
xhr.send();