文件下载---Blob对象

怎么解决不用浏览器的文件下载的兼容问题？

对于在前端下载文件，如果是非图片文件可以利用window.open(url)直接打开。
但是如果是图片资源的下载的话，open方法会另开一个页面显示图片而不是下载图片。因此对于图片的下载需要另外处理。
1》利用a标签的download属性，直接点击a标签可以下载该图片，注：当使用a标签 的download属性进行下载时，支持的浏览器只有火狐和谷歌

下载

2》那么还需要兼容其他浏览器怎么办呢？使用iframe标签来解决，src指向图片地址，利用document.execCommand(“SavaAs”)将图片另存为。

用blob实现文件的下载

1. 利用Blob构造函数创建一个blob对象，表示二进制大对象可用于视频、音频、图片文件等。可以实现分片上传和下载
   var blob = new Blob([args],options) options是可选的包含type表示mime类型的字符串内容，
2. url对象。 创建blob形式的URL对象指定的文件的下载链接。格式为 blob:http:// xxxx
   var objUrl = window.URL.createObjectURL( blob );
   当url对象使用完毕后需要在合适的时机释放这个对象，调用方法为：
   window.URL.revokeObjectURL( objUrl );
3. 生成一个a标签。
   --------var link = ducoment.createElement(‘a’);
   为标签指定属性
   ------link.href=objUrl;
   为标签指定download属性值表示下载时的文件名
   可以利用下载时的时间进行命名
   -------const filename = ‘${new Date().valueOf()}.doc’;
   ------ link.download = filename;
   触发点击事件
   ------ link.click();
4. 事例

    <input type='file' accept='image/*' onchange='handleFile(this)'>
    <br>
    <img style="width: 200px; height:200px"/>
    <!--页面有一个inputfile框，点击可以把选中的图片显示在img标签里-->
    function handleFile(e) {
        var file=e.files[0];
        var blob = new Blob([file]);
        var blobUrl=window.URL.createObjectURL(blob);
        var img=document.getElementByTagName("img")[0];
        img.src = blobUrl;
        img.onload = fucntion() {
            window.URL.revokeObjectURL(blobUrl);
        }
    }

downloadHandler: function (file, fileName) {
  let link = document.createElement('a')   //ie下的写法，创建a标签用于下载
      document.body.appendChild(link);
      link.href = window.URL.createObjectURL(file)  //创建bloburl
      link.download = fileName
      link.click()
      document.body.removeChild(link);  //挂载到body标签下
   window.URL.revokeObjectURL(link.href)：
  if (navigator.userAgent.indexOf('Firefox') > -1) {    //表示支持火狐浏览器，Trident是IE，OPR是Opera
    const a = document.createElement('a')
    a.addEventListener('click', function (e) {
      a.download = fileName
      a.href = URL.createObjectURL(file)
    })
    let e = document.createEvent('MouseEvents')  //DOM2级写法.创建了一个event对象
        e.initEvent('click', false, false) //事件类型，是否冒泡，是否阻止浏览器默认行为；表示初始化创建的event对象。
        a.dispatchEvent(e);  //将事件分派给a标签。
  }
}

其中牵扯到的知识有：如何在不通过点击按钮而达到触发按钮的点击事件？自定义事件的触发。
较好的资料： https://segmentfault.com/a/1190000015852421

关于文件预览的三四点： https://www.cnblogs.com/liulinjie/p/10180214.html