文件下载功能

1.文件下载功能  主要就是  

一般来说前端实现的思路就是通过动态创建a标签，设置其download属性，最后删除a就好了，对于不是图片的文件一般都可以下载，但是如果是图片，有些浏览器会自动打开图片，所以我们需要手动把它转化为data:URLs或blob:URLs，基于这个原理，我们可以用fileReader，也可以用fetch-URL.createObjectURL，这里经过大量测试我采用后

<a href="/static/xxxxx.csv" download="fileName">绝对路径写法
2.配合后端来写
原理简单就是后端返回  url   download写上文件名 filename  直接a标签下载就行了

function download(url, filename) {

    return fetch(url).then(res => res.blob().then(blob => {

　　　　　　　　//创建a标签

        let a = document.createElement('a');

　　　　　　　　//处理后端url

        let url = window.URL.createObjectURL(blob);

　　　　　　　　//给a标签赋值

        a.href = url;

        a.download = filename;

        a.click();　　　　

　　　　　　　　// 释放blob对象

        window.URL.revokeObjectURL(url);

    }))

}

    自己写的代码，页面写一个点击事件，拿到相对应的值就可以了

//html页面

　　 <template slot-scope="datarow">

            <el-button type="text" @click="downloadExcel(datarow.row.url,datarow.row.fileName)">下载</el-button>

          </template>

 

 // 下载文件

    downloadExcel(url, fileName) {

      // console.log(url,fileName,)

      let param = {

        fileName: fileName

      };

      apiDownLoad(url, param).then(res => {

        var blob = new Blob([res], { type: "application/octet-stream" });

        if (window.navigator.msSaveOrOpenBlob) {

          //msSaveOrOpenBlob方法返回bool值

          navigator.msSaveBlob(blob, fileName); //本地保存

        } else {

          var link = document.createElement("a"); //a标签下载

          link.href = window.URL.createObjectURL(blob);

          link.download = fileName;

          link.click();

          window.URL.revokeObjectURL(link.href);

        }

      });

    },