后端返回base64文件流下载文件

杨了仰头

已于 2023-02-28 09:21:30 修改

阅读量2k

点赞数 1

文章标签： javascript 开发语言前端

于 2023-02-21 14:53:47 首次发布

本文链接：https://blog.csdn.net/weixin_59769277/article/details/128918898

版权

文件名称最好取后端返回响应头中的Content-Disposition后面携带的(Content-Disposition: attachment;filename="XXXX.pdf")

一、后端返回base64文件流

说明：这个项目接口没有返回Content-Disposition，而是通过查询接口返回的，所以我取用的是接口返的

在这里插入图片描述

 async downloadFile(item) {
   let sysId = item.attachmentInfo.sysId
   let fileId = item.attachmentInfo.fileId
   let flowNode = this.$route.query.flowNode
   let result = await reqDownloadFile(JSON.stringify({ sysId, fileId, flowNode }))
   console.log('接口返回', result)
   if (result.operationSuccessFlag) {
   	 // 根据返回的文件名截取文件类型
     var type = item.attachmentInfo?.fileName.split('.')[1]
     let base64Url = this.getBase64Type(type) + result.file
     console.log('完整的base64', base64Url)
     this.downloadFileFn(base64Url, item.attachmentInfo?.fileName)
   } else {
     this.$toast(result.errorMessage)
   }
 },
 //根据文件后缀,添加base64前缀,拼接完整的base64
 getBase64Type(type) {
   switch (type) {
     case 'txt': return 'data:text/plain;base64,'
     case 'doc': return 'data:application/msword;base64,'
     case 'docx': return 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,'
     case 'xls': return 'data:application/vnd.ms-excel;base64,'
     case 'xlsx': return 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,'
     case 'pdf': return 'data:application/pdf;base64,'
     case 'pptx': return 'data:application/vnd.openxmlformats-officedocument.presentationml.presentation;base64,'
     case 'ppt': return 'data:application/vnd.ms-powerpoint;base64,'
     case 'png': return 'data:image/png;base64,'
     case 'jpg', 'jpeg': return 'data:image/jpeg;base64,'
     case 'gif': return 'data:image/gif;base64,'
     case 'svg': return 'data:image/svg+xml;base64,'
     case 'ico': return 'data:image/x-icon;base64,'
     case 'bmp': return 'data:image/bmp;base64,'
   }
 },
 //将完整的base64码转换为blob
 base6toBlob(dataurl) {
   var arr = dataurl.split(","),
     mimeString = arr[0].match(/:(.*?);/)[1],
     str = atob(arr[1]),
     u8 = new Uint8Array(str.length)
   for (let i = 0; i < str.length; i++) {
     u8[i] = str.charCodeAt(i)
   }
   return new Blob([u8], { type: mimeString })
 },
 downloadFileFn(base64, fileName) {
   console.log('完整的base64', base64)
   console.log('下载后的文件名', fileName)
   var myBlob = this.base6toBlob(base64)
   var myUrl = URL.createObjectURL(myBlob)
   console.log('返回数据的blob链接', myUrl)
   // 使用a标签进行下载
   let link = document.createElement('a')
   link.style.display = 'none'
   link.href = myUrl
   link.setAttribute('download', fileName)//对下载的文件进行命名
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link) //下载完成移除元素
   window.URL.revokeObjectURL(myUrl) //释放掉blob对象
 }

二、后端返回字节流

在这里插入图片描述

如果后端返回的是上面格式，可以使用a标签下载，不用来回转换格式

  async downloadFile(item) {
    let sysId = item.attachmentInfo.sysId
    let fileId = item.attachmentInfo.fileId
    let flowNode = this.$route.query.flowNode
    let result = await reqDownloadFile(JSON.stringify({ sysId, fileId, flowNode }))
    console.log('接口返回', result)
    if (result.operationSuccessFlag) {
      let url = window.URL.createObjectURL(new Blob([result.file],))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', name)//对文件进行命名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) //下载完成移除元素
      window.URL.revokeObjectURL(url) //释放掉blob对象
    } else {
      this.$toast(result.errorMessage)
    }
  },