vue+axios 下载带token验证的文件流

vue_axios

实现代码

全部代码：

this.$http({
    url: `${process.env.API_ROOT}/debtTransferInfo/export?startTime=${this.exportInfo.startAndEndTime[0]}&endTime=${this.exportInfo.startAndEndTime[1]}`,
    method: 'get',
    responseType: 'blob',
    headers: {
        Authorization: this.$store.state.token
    }
}).then((result)=>{
    if (result.data){
        let blob = new Blob([result.data],{
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"      //将会被放入到blob中的数组内容的MIME类型
        })
        let url = window.URL.createObjectURL(blob);   // 创建下载的链接
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.download= '债转业务报表.xlsx';       // 载后文件名
        document.body.appendChild(link);
        link.click();                           // 点击下载
        document.body.removeChild(link);        // 下载完成移除元素
        window.URL.revokeObjectURL(url);        // 释放掉blob对象
        this.exportInfo.exportVisible = false;  // 关闭弹窗
    }
},(res)=>{
    console.log("res： ", res)
})

以下对代码进行说明：

告诉服务器我们需要的响应格式
responseType: 'blob',

token：

headers: {
    Authorization: this.$store.state.token
}

文件流处理：

let blob = new Blob([result.data],{
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"      // 将会被放入到blob中的数组内容的MIME类型，此处是.xlsx文件
})
let url = window.URL.createObjectURL(blob);   // 创建下载的链接

MIME类型参考： mime.json16.8kB

实现下载：

let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.download= '债转业务报表.xlsx';       // 载后文件名
document.body.appendChild(link);
link.click();                           // 点击下载
document.body.removeChild(link);        // 下载完成移除元素
window.URL.revokeObjectURL(url);        // 释放掉blob对象

作者 wendy
2019 年 7月 3日

参考文献

Vue | 实现带token验证的文件流下载
vue 下载二进制文件 没有终极解决方案