后端返回二进制文件流 前端该如何接收

523 阅读1分钟

前言

前两天在和后端对接的过程中 发现写的导出接口和之前的不太一样(因为之前的操作都交给后端了)现在返回的是二进制文件流 记录一下是怎么操作的

首先封装接口

export function userSelfInspectionListExport(query) {
    return request({
        url: 'xxx/xxxx/xxxxx',
        method: 'get',
        params: query,
        responseType: 'blob'  //声明返回的是blob格式
     })
   }

导出方法

async handleExport() {
    // 调用接口
    userSelfInspectionListExport().then(res => {
        // 文件名字
        let name = '文件名字',
        // 调用导出方法
        this.createExport(res, name)
    })
}

createExport(res, name) {
    let blob = new Blob([res], {
        type: 'application/vnd.ms-excel'
    })
    
    let fileName = name + '.xlsx';
    // 允许用户在客户端上保存文件
    if(window.navigator.msSaveOrOpenBlob) {
         navigator.msSaveBlob(blob, fileName)
    }else {
         var link = document.createElement('a') // 定义生成一个a标签
         link.href = window.URL.createObjectURL(blob) // 需要生成一个 URL 来实现下载,链接到blob上
         link.download = fileName; // 下载后的文件名称
         link.click() // 模拟在按钮上实现一次点击
         window.URL.revokeObjectURL(link.href) // 释放URL对象 避免造成内存泄漏
    }
}