问题:调用后台图片接口,后台返回二进制流图片数据格式。前端接收到流后处理数据显示在img标签。
解决:
1、先设置axios接收参数格式为"arraybuffer":
responseType: 'arraybuffer'
2、转换为base64格式图片数据在img标签显示:
return 'data:image/png;base64,' + btoa( new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '') );
返回的string直接放在img标签src可直接显示
3、先设置axios接收参数格式为"blob":
axios.post( ExportUrl, Params, { responseType: 'blob' }) .then(function(response) { const url = window.URL.createObjectURL(new Blob([response.data])); console.log(url) });
通过a标签下载文件
const url = '下载的url链接'; const link = document.createElement('a'); link.href = url; link.target = '_blank'; link.setAttribute('download', 'Excel名字.xlsx'); document.body.appendChild(link); link.click();
前言
使用axios请求api下载导出一个文件时,接口返回值可能会出现两种情况:
1、文件流
2、json对象
responseType值的类型
值
|
数据类型
|
''
|
DOMString(默认类型)
|
arraybuffer
|
ArrayBuffer对象
|
blob
|
Blob对象
|
document
|
Documnet对象
|
json
|
JavaScript object, parsed from a JSON string returned by the server
|
text
|
DOMString
|
实例
返回值不同情况的处理方式,举例如下:
①、请求设置为 responseType: 'arraybuffer',
请求成功时,后端返回文件流,正常导出文件;
请求失败时,后端返回json对象,如:{"Status":"false","StatusCode":"500","Result":"操作失败"},也被转成了arraybuffer
此时请求成功和失败返回的http状态码都是200
解决方案:将已转为arraybuffer类型的数据转回Json对象,然后进行判断
代码如下
async downloadFile (file) { let res = await this.$axios.post(this.API.order.tradeImpExcle, { responseType: "arraybuffer" }); if (!res) return; try { //如果JSON.parse(enc.decode(new Uint8Array(res.data)))不报错,说明后台返回的是json对象,则弹框提示 //如果JSON.parse(enc.decode(new Uint8Array(res.data)))报错,说明返回的是文件流,进入catch,下载文件 let enc = new TextDecoder('utf-8') res = JSON.parse(enc.decode(new Uint8Array(res.data))) //转化成json对象 if (res.Status == "true") { this.refresh() this.$message.success(res.Msg) } else { this.$message.error(res.Result) } } catch (err) { const content = res.data; const blob = new Blob([content]); let url = window.URL.createObjectURL(blob); let link = document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute( "download", res.headers["content-disposition"].split("=")[1] ); document.body.appendChild(link); link.click(); } }
②、请求设置为 responseType: 'blob',
解决方案:将已转为blob类型的数据转回Json对象,然后进行判断
代码如下
async downloadFile (file) { let formData = new FormData(); formData.append("allTradesExcelFile", file); let res = await this.$axios.post(this.API.order.tradeImpExcle, formData, { responseType: "blob" }); if (!res) return; let r = new FileReader() let _this = this r.onload = function () { try { // 如果JSON.parse(this.result)不报错,说明this.result是json对象,则弹框提示 // 如果JSON.parse(this.result)报错,说明返回的是文件流,进入catch,下载文件 res = JSON.parse(this.result) if (res.Status == "true") { _this.refresh() _this.$message.success(res.Msg) } else { _this.$message.error(res.Result) } } catch (err) { const content = res.data; const blob = new Blob([content]); let url = window.URL.createObjectURL(blob); let link = document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute( "download", res.headers["content-disposition"].split("=")[1] ); document.body.appendChild(link); link.click(); } } r.readAsText(res.data) // FileReader的API }