Vue前端接收不限制類型的二進位制檔案,接收解析下載
阿新 • • 發佈:2022-05-05
頁面內容:
<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 },