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

  

posted @ 2022-05-05 15:18  SuperArchi  阅读(263)  评论(0)    收藏  举报