js xhr导出

React 组件

class Home extends React.Component {
    constructor(props) {
        super(props);
        // 为了在回调中使用 `this`，这个绑定是必不可少的
        this.state = {
            hrefs: 'http://101.37.80.237:88/backend/file/download/106?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC8xMDEuMzcuODAuMjM3Ojg4XC9pbmRleC5waHBcL2JhY2tlbmRcL2F1dGhcL2xvZ2luIiwiaWF0IjoxNjA2NTM0MDgzLCJleHAiOjE2MDcxMzg4ODMsIm5iZiI6MTYwNjUzNDA4MywianRpIjoicEZYWEZnMDlmRWQzTEp1aiIsInN1YiI6MiwicHJ2IjoiY2YyODRjMmIxZTA2ZjMzYzI2YmQ1Nzk3NTY2ZDlmZDc0YmUxMWJmNSJ9.M5AJR9ZsOSvOMXVI27SgUj6Bb9TutUC4Tzrm00qzDKk',
        };
        this.toDownload = this.toDownload.bind(this);
    }


    toDownload(fileName) {
        //第一步，拿到后端的接口地址
        var api = this.state.hrefs;
        var xhr = new XMLHttpRequest();

        xhr.open('GET', api, true); // 设置请求方式GET方式
        xhr.responseType = "blob"; // 返回类型blob
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求内容类型
// 请求回调函数，在请求后台完成，后台返回数据后执行此方法onload
        xhr.onload = function(e) {
            console.log(this.response);//后端返回二进制流
            let blob = new Blob([this.response]);
            let url = window.URL.createObjectURL(blob);
            //创建一个a表，模拟点击下载
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', fileName);//文件名，注意看是要啥格式的
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
        }
//发送请求
        xhr.send();
    }
    render() {
        return (
            <div>
                <a onClick={this.toDownload('img.png')}>点击下载</a>
            </div>
        );
    }
}

  var xhr = new XMLHttpRequest();

            xhr.open('GET', 'http://101.37.80.237:88/backend/file/download/88?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC8xMDEuMzcuODAuMjM3Ojg4XC9iYWNrZW5kXC9hdXRoXC9sb2dpbiIsImlhdCI6MTU5Mzk1Mjc0NSwiZXhwIjoxNTk0NTU3NTQ1LCJuYmYiOjE1OTM5NTI3NDUsImp0aSI6InMxWDc2WVJweWZMZVRmbkEiLCJzdWIiOjIsInBydiI6ImNmMjg0YzJiMWUwNmYzM2MyNmJkNTc5NzU2NmQ5ZmQ3NGJlMTFiZjUifQ.SbMWg66PFM8T0L8z8vMAxerWsfSxy1EiKRHaYePd0qI', true); // 设置请求方式GET方式

            xhr.responseType = "blob"; // 返回类型blob

            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求内容类型

// 请求回调函数，在请求后台完成，后台返回数据后执行此方法onload

            xhr.onload = function() {

                console.log(this.response);
                let blob = new Blob([this.response]);
                let url = window.URL.createObjectURL(blob);
                //创建一个a表，模拟点击下载
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '文件名.zip');//文件名，注意看是要啥格式的
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); //下载完成移除元素
                window.URL.revokeObjectURL(url); //释放掉blob对象
            }

//发送请求
            xhr.send();