1. 程式人生 > 其它 >Vue前端接收不限制類型的二進位制檔案,接收解析下載

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