(vue)前端区分接口返回两种格式,一种Blob二进制字节流,一种常规JSON,且将blob响应转为json
(vue)前端区分接口返回两种格式,一种Blob二进制字节流,一种常规JSON,且将blob响应转为json
需求:导出功能接口返回两种格式,二进制直接下载,json需弹窗提示
-
格式1:
-
格式2:
思路:1.先区分是哪种格式 2.将需要提示的数据转为json
实现:
// 将blob转为json(重点2)
async blobToJson(blob) {const text = await blob.text()console.log(text) // 第118行return JSON.parse(text)
},
// 导出
exportHandle() { exportVariance(this.formData).then(async(res) => {if (res.type.includes('application/json')) {(重点1)const jsonData = await this.blobToJson(res) console.log(jsonData) // 第126行this.$message.warning(jsonData.message)} else {const data = resconst url = window.URL.createObjectURL(new Blob([data], { type: 'text/csv;charset=utf-8;' }))const link = document.createElement('a')link.href = urllink.setAttribute('download', 'export.csv')link.click() } }).catch((res) => {console.log(res) })
},
打印:
效果: