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 },