VUE前端如何通过API下载文件

26 次浏览次阅读

download(data) {
      console.log(data)
      <!--调用接口获取字节数据-->
      sysFileInfoDownload({ id: data.fileId })
        .then((res) => {
          this.downLoadFile(res)
        })
        .catch((err) => {
          this.$message.error('下载错误：获取文件流错误')
        })
    },
downLoadFile(res) {
	   <!--根据需要下载的文件设置好type-->
      var blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
      var contentDisposition = res.headers['content-disposition']
      var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
      var result = patt.exec(contentDisposition)
      var filename = result[1]
      var downloadElement = document.createElement('a')
      var href = window.URL.createObjectURL(blob) // 创建下载的链接
      var reg = /^["](.*)["]$/g
      downloadElement.style.display = 'none'
      downloadElement.href = href
      downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href)
    }