Vue前端接收不限制类型的二进制文件,接收解析下载
页面内容:
<el-descriptions :column="1" style="margin-top:10px">
<el-descriptions-item label="标题" labelStyle="width:70px">
<span style="font-size:20px;">
{{ solutionInfo.solutionName }}
</span>
</el-descriptions-item>
<el-descriptions-item label="描述" labelStyle="width:80px">
<span style="font-size:16px;">
{{ solutionInfo.descr }}
</span>
</el-descriptions-item>
<el-descriptions-item label="下载附件" labelStyle="width:80px">
<span
style="text-decoration:underline;color:#4F90F9;display:block;margin-bottom:15px;cursor:pointer"
v-for="item in solutionInfo.files"
:key="item.fileId"
@click="downloadFile(item)"
>{{ item.originalFileName }}(点击下载)</span
>
<!-- <a href="1506701587.csv" download="">下载文件</a> -->
</el-descriptions-item>
</el-descriptions>
解析下载二进制文件内容:
async downloadFile(item) {
const { data: res } = await this.$http.get(`/download/${item.fileId}`, {
responseType: 'blob'
})
// console.log('下载文件', res)
let url = window.URL.createObjectURL(new Blob([res]))
// const url = new Blob([res])
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.download = item.originalFileName
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
// this.solutionInfo = res.data
},

浙公网安备 33010602011771号