react+axios做导出功能

## 概要

导出文件最简单的就是用window.open()，或者用window.loaction方法，但是此方法不能做token认证，开发中实际过程中需要传token，此时我们就不能用widow方法来创建连接。

​

export function downLoad(URI: string) {
    service.get(URI, { responseType: 'blob' }).then((res: any) => {
        const { data } = res
        if (res.status == 200) {
            let blob = new Blob([data], { type: "application/json" });
            if (res.headers['filename'] == undefined) {
                // 若下载成功后端将文件名filename字段放在headers里面，失败则无此字段
                //将blob格式的响应数据转换为原本的格式，方便判断接口是否返回报错信息
                blobToJsonFile(blob)
            } else {
                let fileName = decodeURIComponent(res.headers['filename'])
                const elink = document.createElement('a')
                elink.download = fileName
                elink.style.display = 'none'
                elink.href = URL.createObjectURL(blob)
                document.body.appendChild(elink)
                elink.click()
                URL.revokeObjectURL(elink.href)
                document.body.removeChild(elink)
            }

        }
    })
}

​

后端是将文件名称放在请求头里，正常导出的返回结果如下

由于自己业务端需要判断有些数据导出是需要拿到后端的返回的错误信息在页面上进行提示，后端结果如下：

问题来了，在发送请求的时候我们规定响应的文件是blob形式，后端人员无法在blob文件里给我们错错误信息提示，所以当我们下载不成功时候，需要将blob文件转换为json格式即： blobToJsonFile(blob)方法

function blobToJsonFile(blob: any) {
    let reader: any = new FileReader();
    reader.onloadend = function () {
        let jsonData = JSON.parse(reader.result);
        if (jsonData.code !== 0) {
            message.error(jsonData.msg)
        }
    };
    reader.readAsText(blob);
}