关于前端用Blob实现下载功能

Blob

一个 Blob对象表示一个不可变的, 原始数据的类似文件对象

创建Blob实例

第一种方法：构造函数new出一个Blob实例对象，第二种：根据已有的Blob用slice进行切分

构造函数

let blob=new Blob([],{})

注意：

Blob()[图片]的第一个参数必须为数组，即使只有一个字符串也必须用数组装起来
参数options是对这一Blob对象的配置属性{type:""}

Blob属性

blob.size //Blob大小（以字节为单位） 
blob.type //Blob的MIME类型，如果是未知，则是“ ”（空字符串）

URL.createObjectURL()

这个静态方法会创建一个DOMString，这个 URL 的生命周期和创建它的窗口中的 document 绑定。表示指定的 File 对象或 Blob 对象。 使用URL.createObjectURL()函数可以创建一个Blob URL，返回值格式是：blob://URL

最后贴上实例代码：

downFile (data, name) {
      let BLOB = new Blob([data]);

      let url = window.URL.createObjectURL(BLOB);//只能将一个blob文件变成url
      console.log(url, "url")
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', name);
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url)
      
    },

注意.`Bolb`、`URL`和`<a>` //配合下载\
`objectUrl = window.URL.createObjectURL(blob)`  //创建新的URL表示指定Blob对象\
`a = document.createElement('a')`  //创建a标签\
`a.href = objectUrl` //指定下载链接\
`a.download = fileName` //指定下载文件名\
`a.click() ` //触发下载\
`a.remove()` //除a标签\
`window.URL.revokeObjectURL(objectUrl)` //释放