文件下载功能实例代码

一般来说前端实现的思路就是通过动态创建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) {
eturn 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);
        }
      });
    },