一开始我还挺懵的,我以为后端返回的是文件流,后来我才发现后端返回的仅仅是base64字符串,我前端需要把这个base64字符串转成文件流,然后下载这个文件。
下面上核心代码
// dataurl是后端返回的base64字符串,name是文件名
dataURLtoDownload(dataurl, name="xxx.xlsx") {
var bstr = atob(dataurl), //解析 base-64 编码的字符串
n = bstr.length,
u8arr = new Uint8Array(n); //创建初始化为0的,包含length个元素的无符号整型数组
while (n--) {
u8arr[n] = bstr.charCodeAt(n); //返回字符串第一个字符的 Unicode 编码
}
let blob = new Blob([u8arr]); //转化成blob
let url = URL.createObjectURL(blob);//这个新的URL 对象表示指定的 File 对象或 Blob 对象
let a = document.createElement('a') //创建一个a标签
a.href = url;
a.download = name;
a.click();
URL.revokeObjectURL(a.href); //释放之前创建的url对象
this.dyloading = false
},
相关其它代码
// 导出账单
dyExportBill() {
const dk = this.checkParams()
if(!dk) {
return this.$message.warning('必须选择店铺和账单日期(账单日期不能跨月,为自然月的第一天到最后一天)')
}
this.dyloading = true
var url = this.getExportUrl(this.$rootUrl + 'BillAudit/BillFile/DownloadDyBill/?r=8')
// 设置请求头和url拿到后端返回的base64字符串
axios({
headers: {
"Content-Type": "application/json; application/octet-stream"
},
method: 'get',
url,
}).then((res) => {
const result = res.data
this.dataURLtoDownload(result,dk)
}).catch(err=>{
this.dyloading = false
this.$message.error('请求失败,请稍后重试')
})
},
// 返回文件名
checkParams() {
if(!this.queryParam.platformId || !this.queryParam.shopName || !this.queryParam.statementDate || !this.queryParam.statementDate.length) return false
// 日期不能跨月
let billDateRangeMin = this.queryParam.statementDate[0]
let billDateRangeMax = this.queryParam.statementDate[1]
let m1 = new Date(billDateRangeMin).getMonth() + 1
let m2 = new Date(billDateRangeMax).getMonth() + 1
if(m1 != m2) return false
return `${this.queryParam.shopName}_${m1}月.xlsx`
},
这是后端返回的base64字符串
然后你会发现文件下下来啦