最近接到一个需求，需要一个共享文件列表，支持文件的上传与下载，先贴个效果图

说重点：

普通类型文件的下载我们可以通过给a标签添加href和download属性，便可以实现下载文件了，但是唯独（不同源）图片不行！！！

1.首先点击下载不同源图片的时候会报跨域的问题，网上找了很多种解决办法，前端都无法解决这个图片跨域的问题，最后只能求助后台，让后台把图片地址转为base64位的图片；

2.在表格中批量下载其他文件的时候，我选择的是用iframe创建a标签的方式去下载的，下载图片由于是base64的图片，还需要做进一步的处理：

       1>批量下载数据的时候，我们在批量选中的方法中循环调用createIFrame方法去下载多个文件或图片

      //批量下载文件
      openDownload(){
        let that = this;
        const triggerDelay = 100;
        const removeDelay = 1000;
        if(this.selectData.length==0){
          that.$message({
            message:'Please select the file to download',
            type:'warning',
            showClose: true,
          })
        }else{
          this.selectData.forEach((item, index)=> {
            that.createIFrame(item.fileUrl, index * triggerDelay, 
            removeDelay,item.fileName,item.id);
            that.cancelSelection();
          })
        }
      },

          2> 在下载文件的方法中，我们根据后缀判断，是图片的就按图片的方式处理，其他的就按创建iframe的方式处理

//创建iframe下载对应文件
      createIFrame (url, triggerDelay, removeDelay,name,id){
        let that = this;
        let urltype = /\.[^\.]+$/.exec(url)[0];
        //下载图片类型的文件
        if(urltype=='.PNG' || urltype=='.png' || urltype =='.jpg'){
            that.downloadImg(name,id);
        }
        //下载其他类型的文件
        else{
            setTimeout(function (){
            //动态添加iframe,设置src,然后删除
            const frame = document.createElement('iframe') //创建a对象
            frame.setAttribute('style', 'display: none')
            frame.setAttribute('src', url)
            frame.setAttribute('id', 'iframeName')
            document.body.appendChild(frame)
            setTimeout(function(){
              const node =  document.getElementById('iframeName')
              node.parentNode.removeChild(node)
            }, removeDelay)
          }, triggerDelay)
        }
      },

          3> 图片格式文件的处理，需要先请求到后台返回的base64图片路径，然后在做处理

downloadImg(name,id){
        let that = this;
        let url = "resource/downloadFileShare?" +
            "id=" + id;
        this.$axios.getData(url, function (data, message) {//正常为null
          if(data){
            // console.log(data)
            const imgUrl = that.prefixBase64 + data;
            // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法 
            去下载图片
            if (window.navigator.msSaveOrOpenBlob) {
              let bstr = atob(imgUrl.split(",")[1]);
              let n = bstr.length;
              let u8arr = new Uint8Array(n);
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
              }
              let blob = new Blob([u8arr]);
              window.navigator.msSaveOrOpenBlob(blob, name + "." + "png");
            } else {
              // 这里就按照chrome等新版浏览器来处理
              let a = document.createElement("a");
              a.href = imgUrl;
              a.setAttribute("download", name);
              a.click();
            }
          }
        })
      },

注：该方法可以实现下载图片到本地文件夹，而不是单单通过浏览器打开图片文件！！！