JS 之Blob 对象类型

时间 2019-11-17

原文原文链接

什么是Blob?

Blob 是什么？这里说的是一种Javascript的对象类型。web

oracle 中也有相似的栏位类型。浏览器

这一篇中用到了File对象，而实际上 file 对象只是 blob 对象的一个更具体的版本，blob 存储着大量的二进制数据，而且 blob 的 size 和 type 属性，都会被 file 对象所继承。app

因此，在大多数状况下，blob 对象和 file 对象能够用在同一个地方，例如，能够使用 FileReader 借口从 blob 读取数据，也能够使用 URL.createObjectURL() 从 blob 建立一个新的 URL 对象。函数

如何建立Blob

1. 使用旧方法建立 Blob 对象。ui

旧的方法使用 BlobBuilder 来建立一个Blob 实例，而且使用一个 append() 方法，将字符串（或者 ArrayBuffer 或者 Blob，此处用 string 举例）插入，一旦数据插入成功，就能够使用 getBlob() 方法设置一个 mime 。spa

  <script>
    var builder = new BolbBuilder();
    builder.append("Hello World!");
    var blob = builder.getBlob("text/plain");
  </script>

2. 新方法建立Blob 对象操作系统

在新的方法中直接能够经过 Blob() 的构造函数来建立了。
构造函数，接受两个参数，第一个为一个数据序列，能够是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers。第二个参数，是一个包含了两个属性的对象，其两个属性分别是：.net

type -- MIME 的类型。code

endings -- 决定 append() 的数据格式，（数据中的 \n 如何被转换）能够取值为 "transparent" 或者 "native"（t* 的话不变，n* 的话按操做系统转换；t* 为默认）。

  <script>
    var blob = new Blob(["Hello World!"],{type:"text/plain"});
  </script>

Blob的应用

1. 大文件分割 (slice() 方法)

slice() 方法接受三个参数，起始偏移量，结束偏移量，还有可选的 mime 类型。若是 mime 类型，没有设置，那么新的 Blob 对象的 mime 类型和父级同样。

当要上传大文件的时候，此方法很是有用，能够将大文件分割分段，而后各自上传，由于分割以后的 Blob 对象和原始的是独立存在的。

不过目前浏览器实现此方法尚未统一，火狐使用的是 mozSlice() ，Chrome 使用的是 webkitSlice() ，其余浏览器则正常的方式 slice()

能够写一个兼容各浏览器的方法：

    function sliceBlob(blob, start, end, type) {
      type = type || blob.type;
      if (blob.mozSlice) {
          return blob.mozSlice(start, end, type);
      } else if (blob.webkitSlice) {
          return blob.webkitSlice(start, end type);
      } else {
          throw new Error("This doesn't work!");
      }
    }

2. 在Chrome 中指定下载的文件名；

具体能够参考：Web 端 js 导出csv文件(使用a标签)

转: https://blog.csdn.net/oscar999/article/details/36373183