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

时间:2025-03-28 13:39:49

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

=URL

(URL)

区别:

:当前页跳转,也就是重新定位当前页;只能在网站中打开本网站的网页。

:在新窗口中打开链接;可以在网站上打开另外一个网站的地址

2、通过 js-file-download 插件

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

3、使用fetch下载

downFile() {
    fetch('http://10.190.156.103:3000/api/deviceList/downLoadExcel', {
        method: 'GET',
        headers: new Headers({
            'Authorization': ('Authorization') 
        }),
    })
   .then(res => ())
   .then(data => {
        const blobUrl = (data);
        const a = ('a');
         = +'.xlsx';
         = blobUrl;
        ();
});
},

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

download() {
      aoiTemplateExport().then((res) => {
        const url = (new Blob([res], { type: 'application/-excel;charset=utf-8' }))
        const link = ('a')
         = 'none'
         = url
        ('download', '数据模板.xlsx')
        (link)
        ()
      })
  }

js:

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