vue文件下载

import axios from '@/utils/axios';
// 下载
export function getFileRequest (url, params = {}) {
  axios({
    method: 'get', //注意此处请求方式要跟后端请求方式相同
    url: `${COMMON_Server}${url}`, // 请求地址，可以直接替换成自己地址
    data: params, // 参数
    responseType: 'blob' // 表明返回服务器返回的数据类型
  }).then((res) => {
    // 流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
    const content = res.data
    const blob = new Blob([content]) // 构造一个blob对象来处理数据
    let fileUrlName = getQueryVariable(url,'name');
    let fileName = '';
    if(fileUrlName){
      fileName = fileUrlName;
    }else{
      fileName = Date.parse(new Date()) + '.' + url.substring(url.lastIndexOf('.') + 1);
    }
    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
    // IE10以上支持blob但是依然不支持download
    if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
      const link = document.createElement('a') // 创建a标签
      link.download = fileName // a标签添加属性
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      document.body.appendChild(link)
      link.click() // 执行下载
      URL.revokeObjectURL(link.href) // 释放url
      document.body.removeChild(link) // 释放标签
    } else { // 其他浏览器
      navigator.msSaveBlob(blob, fileName)
    }
  }).catch((error) => {
    console.log(error)
  })
}

获取文件连接后文件名称的方法 （url?name=文件名）保证下载的文件与原先名称相同

export function getQueryVariable(url,variable){
  let query = url.split("?");
  if(query.length > 1){
    let vars = query[1].split("&");
    for (let i=0;i<vars.length;i++) {
      let pair = vars[i].split("=");
      console.info(pair)
      if(pair[0] == variable){
        return pair[1];
      }
    }
  }
  return(false);
}

// 下载方法
// row.file.filePath为文件路径
// row.file.fileName为文件名称
download(row){
	downloadFile(row.file.filePath+'?name='+row.file.fileName);
}