小船浆~ 2022-01-17 14:13 采纳率: 70%
浏览 70

将数据流传给前端,前端没有弹出下载位置

后端响应头和响应体已经设置完了

img


前端请求情况:

img

img


前端请求头完全可以读取到,是我前端还需要设置什么吗

  • 写回答

2条回答 默认 最新

  • 归来巨星 新星创作者: 前端开发技术领域 2022-01-17 14:24
    关注

    需要a标签下载

    因为你获取回来的是一个二进制流 所以需要转一下base64 然后塞到a标签中下载 对照如下,变更下名称,

        downExcel() {
          var xhr = new XMLHttpRequest()
          xhr.open('get', '下载路径', true)
          xhr.setRequestHeader('Authorization', getToken())// 此处设置token请求头  注意一定要将请求头代码设置在open下方
          xhr.responseType = 'blob' // 使用blob 存储二进制数据
          xhr.onload = function() {
            console.log(xhr)
            if (this.status === 200) {
              var blob = this.response
              var reader = new FileReader()
              reader.readAsDataURL(blob) // 二进制流转为base64,a标签可直接访问href 
              reader.onload = function(e) {
                var a = document.createElement('a') // 转换完成,创建一个a标签用于下载
                a.download = '文件模板' + '.xls'// 下载命名
                a.href = e.target.result
                window.document.querySelector('body').append(a)// 追加进body体内
                a.click()// 触发点击事件
                a.remove()// 移除追加的a标签
              }
            }
          }
          xhr.send()
        },
    
    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 1月17日