后端给你返回文件流，前端实现下载文件

了解下载文件的原理

<a href="xxx.txt" download="xxx.txt">Download Your Foo</a>
html的a标签，设置download属性后，可以下载href指向的文件。

在js中往往是点击某一个按钮后下载一个文件，并且文件的地址是变化的。因此我们可以动态创建一个a标签，设置好download和href属性，然后添加到页面中，用代码触发click事件，就可以实现下载了。

调用下载接口

我们可以看到后端给我们返回这个文件流
记得加上

 responseType: 'blob'

// 导出下载接口
export function downloadOpen(params) {
  return request({
    url: '/slingshot/spider/data/unionsExport',
    method: 'get',
    params: params,
    responseType: 'blob'
  });
}

获取到文件流怎么处理

将文件流转换成blob

 /** 导出按钮操作 */
      async handleExport() {
        let res = await downloadOpen({
          keyWord: this.queryParams.keyWord
        })
        let blob = new Blob([res],{type:res.type})
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob)
        downloadElement.href =  href
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement);//移除元素；防止连续点击创建多个a标签
        window.URL.revokeObjectURL(href)
      }
    }

这里打印出来的是res；后端返回的文件流 转换blob后的

处理了流后怎么下载

通过点击事件 触发a标签

 downloadElement.click()

这个size有数字 表示的是你文件的大小，如果是0就是没有了；
这样就可以下载了；

这里是详细的解释；

修改文件名称

这里可以看到 我们可以拿到这个filename

const fileName = res.headers['content-disposition'].split(';');
        const filename2 = fileName[1].split('=')
        const filename3 = decodeURIComponent(filename2[1])

通过这里 拿到 文件名称；
在通过这个将文件名附上去；

 downloadElement.download = filename3

这里是整个点击导出的方法了；

 /** 导出按钮操作 */
      async handleExport() {
        let res = await downloadOpen({
          keyWord: this.queryParams.keyWord
        })
        const fileName = res.headers['content-disposition'].split(';');
        const filename2 = fileName[1].split('=')
        const filename3 = decodeURIComponent(filename2[1])
        let blob = new Blob([res], {
          type: res.type
        })
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = filename3
        document.body.appendChild(downloadElement)
        downloadElement.click()
        window.URL.revokeObjectURL(href)
      }
    }