前端vue中实现文件下载的几种方法总结

   <a
       @click="downloadFile(file.url,file.originalFilename, file.id, file.fileTye)"
     >下载</a>
// 参数分别是：文件的路径 文件的名字 文件的id 文件的类型

  downloadFile(url, fileName, flieId, type) {
     let link = document.createElement('a');
     link.style.display = 'none';
     link.href = baseUrl + '/xxx/xxx/xxx?flieId=' + flieId;
     document.body.appendChild(link);
     link.click();
   },

<a :href='"/user/downloadExcel"' >下载模板</a>

//另一种情况是创建div标签，动态创建a标签：
<div name="downloadfile" "downloadExcel()">下载</div>
function downloadExcel() {
    let a = document.createElement('a')
    a.href ="/xxx/xxx"
    a.click();
} 

  downloadFile() {
    window.open(
      baseUrl + '/xxx/xxx/xxx/getTemplate?templateCode=manual_pc',
      '_self'
    );
  },

<el-button  size="mini" @click="handleExport(scope.row)">导出</el-button>
//method方法：
handleExport(row) {
      var elemIF = document.createElement('iframe')
      elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
                    '&category=' + row.category 
      elemIF.style.display = 'none'
      document.body.appendChild(elemIF)
    }

<a @click="downloadFile(file.name, file.url)" >下载</a>
 
/* 第一个参数是文件的名字，第二个参数是文件的路径*/
 
downloadFile(fileName, fileUrl) {
      if (!fileUrl) {
        return;
      }
      let url = window.URL.createObjectURL(new Blob([fileUrl]));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
    }

<a :href="src" rel="external nofollow"  download="name"/> 

function downloadPost (config){
  return new Promise((resolve,reject) => {
    axios({
        url: config.url,// 请求地址
        method: 'post',
        data: config.data,// 参数
        responseType: 'blob'// 表明返回服务器返回的数据类型
    }).then(res => {
      resolve(res)
    }).catch(err=>{
      reject(err);
    });
  });
}