vue 接口返回文件流下载到本地

后端接口 response 返回是这样的

 

1：设置封装的接口参数：

 // 附件下载
        static fileDownLoad(params) {
                        service({
                                        method: 'get',
                                        url: `/exemptions/download/file`,
                                        params,
                                        responseType: 'blob' // 后台响应数据类型
                          })
        }

2：设置响应拦截：（以区分判断其他接口）

 if (

    response.request.responseType === 'blob' ||

    response.request.responseType === 'arraybuffer'

  ) {

    return response

  }

3：封装下载方法：

export function fileDownLoad(res, fileName) {

  // 请求成功后下载文件

  // 生成blob对象 定义下载格式

  let blob = new Blob([res], { type: res.type })

  if ('download' in document.createElement('a')) {

    //支持a标签download的浏览器

    const link = document.createElement('a') //创建a标签

    link.download = fileName + '.xlsx' //a标签添加属性

    link.style.display = 'none'

    link.href = URL.createObjectURL(blob)

    document.body.appendChild(link)

    link.click() //执行下载

    URL.revokeObjectURL(link.href) //释放url

    document.body.removeChild(link) //释放标签

  } else {

    navigator.msSaveBlob(blob, fileName)

  }

}