vue项目后端接口返回文件流,接口报错时前端获取不到错误信息解决方法和文件流处理
项目是vue+axios+elementUI,以下载压缩包(.zip)为例子:首先是html代码<!--此为element UI 框架的按钮--><el-button type="primary" @click="exportFiles" size="mini" >导出案卷包</el-button>其次是js代码<script>import { do
·
项目是vue+axios+elementUI,以下载压缩包(.zip)为例子:
首先是html代码
<!--此为element UI 框架的按钮-->
<el-button type="primary" @click="exportFiles" size="mini" >导出案卷包</el-button>
其次是js代码
<script>
import { downloadCases } from '@/api/ipr/cases/baseInfo' // 接口
export default {
methods: {
exportFiles () { // 导出案卷包
let params = {
casesId: this.caseId,
taskId: this.taskId
}
downloadCases(params).then(
res => {
let data = res.data
let _self = this
let fileReader = new FileReader();
fileReader.onload = function() {
try {
let jsonData = JSON.parse(this.result); // 说明是普通对象数据,后台转换失败
if (jsonData.code === 400) { // 接口返回的错误信息
// alert(jsonData.msg)
_self.$alarm.showWarning(jsonData.msg) // 弹出的提示信息
}
} catch (err) { // 解析成对象失败,说明是正常的文件流
const blob = new Blob([res.data], { type: 'application/zip' }) // 如类型为excel,type为:'application/vnd.ms-excel'
const fileName = res.headers.filename
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 点击后移除,防止生成很多个隐藏a标签
}
};
fileReader.readAsText(data) // 注意别落掉此代码,可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)
}
).catch(err => {
console.log(err)
})
},
}
}
</script>
最后是api/ipr/cases/baseInfo中的接口api
/** 导出案卷包 */
export function downloadCases (data) {
return request({
url: '/kfcloud-ipr/cases/downloadCasesZip', // 后端对应的url
method: 'post', // 接口请求方式
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
responseType: 'blob', // 文件流格式
params: data // 参数
})
}
更多推荐
已为社区贡献3条内容
所有评论(0)