vue使用axios下载文件流为excel文件

@[toc] vue下载文件流为excel文件

1.配置axios的responseType

配置axios的responseType为blob类型(必须配置，否则下载的文件会乱码)

axios.request({
    url: 'http://xxxxx/export',
    method: 'post',
    responseType: 'blob',
    data: {xxx: xxx}
})

2. 创建一个新的url，此url指向新建的Blob对象

     if (!data) { //data为axios返回的文件流
       this.$message.error('下载失败，解析数据为空！')
       return
     }
     // 创建一个新的url，此url指向新建的Blob对象
     //type这里因为我要下载excel文件，所以设置的是application/vnd.ms-excel;charset=utf-8
     let url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.ms-excel;charset=utf-8"}))
     // 创建a标签，并隐藏a标签
     let link = document.createElement('a')
     link.style.display = 'none'
     // a标签的href属性指定下载链接
     link.href = url
     //setAttribute() 方法添加指定的属性，并为其赋指定的值
     // 后缀格式.csv/.xsls要和需要和后端返回格式相同，这里以.csv为例
     link.setAttribute('download',   '文件名称.xlsx')
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)

3.Blob对象支持的类型列表

type	拓展名
application/vnd.ms-excel	xlm/xla/xlc/xlt/xlw
text/html	html
application/msword	doc
application/vnd.openxmlformats-officedocument.wordprocessingml.document	docx
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	xlsx
video/mpeg	mp2/mpa/mpe/mpeg/mpg/mpv2
audio/mpeg	mp3
text/plain	txt,普通类型
application/pdf	pdf
application/octet-stream	*/bin/class/dms/exe/lha/lzh
application/zip	zip
image/jpeg	jpeg / jpe / jpg
image/png	png
image/gif	gif
image/svg+xml	svg
image/tiff	tiff
application/vnd.ms-powerpoint	ppt