[JavaScript知识库]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对象支持的类型列表