Blob流文件导出

最新推荐文章于 2025-10-09 10:33:07 发布

原创最新推荐文章于 2025-10-09 10:33:07 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

接口

//我这边导出需要传id
export const getSystemDataDownloadBackupFile = (id) =>
	`${baseURL2}/api/platform/systemData/downloadBackupFile?id=${id}`

创建导出方法

 downloadFromApi(url) {
      let that = this
      axios({
        url: url,
        method: 'get',
        data: {},
        responseType: 'blob', // 后台返回的数据会被强制转为blob类型
        complete: function (xhr, data) {
          // 获取相关Http Response header
          var wpoInfo = {
            // 文件名
            'content-disposition': xhr.getResponseHeader('content-disposition')
          }
          // 在这里，做想做的事。。。
        }
      }).then((res) => {
        this.$cu.hideLoading();
        let reader = new FileReader()
        reader.readAsText(res.data)
        reader.onload = function (result) {
          console.log(result)
          try {
            let resData = JSON.parse(result.target.result) // 解析对象成功，说明是json数据
            if (resData.retCode == 2999) {
              that.$Message.error(resData.retMsg)
            }
          } catch (err) {
            let blob = new Blob([res.data])
            let contentDisposition = res.headers['content-disposition'] 
//从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;注意后端加密方式，需要解密，有中文会加密导致解析不出来
            let nameStr = contentDisposition.split(';')[1] || ''
            let fileName = decodeURIComponent(nameStr.split('=')[1] || '');

            let downloadElement = document.createElement('a')
            let href = window.URL.createObjectURL(blob) //创建下载的链接
            downloadElement.style.display = 'none'
            downloadElement.href = href
            downloadElement.download = fileName //下载后文件名
            document.body.appendChild(downloadElement)
            downloadElement.click() //点击下载
            document.body.removeChild(downloadElement) //下载完成移除元素
            window.URL.revokeObjectURL(href) //释放掉blob对象
          }
        }
      })
    },

点击触发导出


    getSystemDataDownloadBackupFileApi(id, name) {
      this.$cu.showLoading();
      this.downloadFromApi(
        `${getSystemDataDownloadBackupFile(id)}&token=${this.$store.state.vuex_user.token
        }`
      )
    },