vue 下载和导出Excal功能的实现

1. 一个是后端直接给接口地址，前端不用传参数给后端，后端直接返回一个excel文件（这种是文件上传到资源服务器上，后端只保存了文件地址，前端拿到后端返回的文件地址直接下载）

   此时前端只需要window.open即可下载excal文件

let href = window._CONFIG['domianURL'] + '/bus/presetShift/exportPdf?ids=' + this.selectedRowKeys.join(',') //前面拼接的是域名地址 后边是后端给的下载路径 也可携带参数
window.open(href,_self) //_self指不另外打开页面，而是URL替换当前页面下载

也可使用a标签下载，但是没有上者使用方便

<a href={href} target="_blank" download={fileName}>点击下载文件</a>
//href为路径  download里边的fileName为下载的excal名字

2. 一个是后端给了接口地址，同时前端需要给后端传一些参数字段，后端返回的不是一个excel文件，而是返回二进制流，需要前端自己转换（这种是文件就存在后端服务器上（通常是临时根据前端参数动态生成，用完就删除），后端读取文件后向前端返回文件的二进制流）

此种情况是调用接口，拿到后端返回的文件流，经过Blob和createObjectURL的转换,最后得到一个路径，再利用a标签进行下载excal

let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'})) //data为调完接口获取到的二进制流 type是设置将会被放入到 blob 中的数组内容的 MIME 类型。
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName+'.xlsx')  //设置excal名称
document.body.appendChild(link) //模拟点击事件
link.click()
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象

最后别忘了调用接口时要在接口时设置responseType: 'blob'，否则下载的excal打不开

export function downFile(url, parameter) {
  return axios({
    url: url,
    params: parameter,
    method: 'get',
    responseType: 'blob'
  })
}