react +antdesign_pro做的导出

1.点击链接

数据、文件格式全部在后台封装好，返回给前端一个链接，前端通过点击链接自动下载，两种方式：

1 （1）window.location.href = ‘url’
2 （2）<a href='url' download=''></a>

2.解析后台返回的文件流

这种方式就是后台将要导出的文件以文件流的方式返回给前端，前端通过blob去解析，再动态创建a标签。

demo1
// 发请求
this.axios.post(url, {param: paramName}, {responseType: 'arraybuffer'}).then(res => {
    let content = res.data; // 文件流
    let blob = new Blob([content]，{type: 'application/octet-stream'});
    let fileName = 'filename.xls';
    // 如果后端返回文件名
    // let contentDisposition = res.headers['content-disposition'];
    // let fileName = decodeURI(contentDisposition.split('=')[1]);
        if ('download' in document.createElement('a')) {  // 非IE下载
        let link = document.createElement('a');
        link.download = fileName;
        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 {  // IE10+下载
      navigator.msSaveBlob(blob，fileName);
    }
})

demo2基于react
function exportFile(url, data) {
    axios({
        method: 'post',
        url: url,
        data: data,
        responseType: 'blob'
    }).then((res) => {
        const content = res.data;
        const blob = new Blob([content]);
        const fileName = "导出数据.xls";
        const selfURL = window[window.webkitURL ? 'webkitURL' : 'URL'];
        let elink = document.createElement('a');
        if ('download' in elink) {
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = selfURL['createObjectURL'](blob);
            document.body.appendChild(elink);

            // 触发链接
            elink.click();
            selfURL.revokeObjectURL(elink.href);
            document.body.removeChild(elink)
        } else {
            navigator.msSaveBlob(blob, fileName);
        }
    })
}

后续bug遇到的是下载文件乱码
文件下载后内容乱码的主要原因是没有设置responseType，因为构造blob不知道何种原因总是对于构造后的数据是乱码的。
因为存储从服务去返回的二进制文件流就必须要永达blob，但是接口自主构造却不行，所以这里就只能让响应实体返回blob，在请求的config中设置responseType：‘blob’，这样的会就会在response中返回blob，但是这个blob是data，而不是像feach中是个单独的方法。

解决办法：responseType：‘blob’