vue下载excel文件,(后端返回的是文件流)

1、通过后端给的文件地址下载

window.location.href=URL

window.open(URL)

区别：

window.location：当前页跳转，也就是重新定位当前页；只能在网站中打开本网站的网页。

window.open：在新窗口中打开链接；可以在网站上打开另外一个网站的地址

2、通过 js-file-download 插件

npm install js-file-download --S

import fileDownload from 'js-file-download'
  
axios.get(`downLoadExcel/template`, {
        responseType: 'blob' //返回的数据类型
    })
    .then(res => {
        fileDownload(res.data, this.fileName)
    })

3、使用fetch下载

downFile() {
    fetch('http://10.190.156.103:3000/api/deviceList/downLoadExcel', {
        method: 'GET',
        headers: new Headers({
            'Authorization': Cookie.get('Authorization') 
        }),
    })
   .then(res => res.blob())
   .then(data => {
        const blobUrl = window.URL.createObjectURL(data);
        const a = document.createElement('a');
        a.download = this.fileName+'.xlsx';
        a.href = blobUrl;
        a.click();
});
},

4、vue通过 a 标签的 download 属性结合 blob 构造函数下载excel文件

download() {
      aoiTemplateExport().then((res) => {
        const url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '数据模板.xlsx')
        document.body.appendChild(link)
        link.click()
      })
  }

js：

export function aoiTemplateExport() {
  return request({
    url: '',
    method: 'get',
    responseType: 'blob'
  })
}