阅读 46

XMLHttpRequest解析二进制流

 $('.form-class').on('submit', function (e) {
        e.preventDefault();
        var xhr = new XMLHttpRequest();
        xhr.open('POST', "http://127.0.0.1:8080/download", true); // 设置请求方式POST方式
        xhr.responseType = "blob"; // 返回类型blob
        // xhr.setRequestHeader("Content-Type", "multipart/form-data");//设置请求内容类型

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                debugger
                console.log(xhr.responseType);
            }
        };

        // 请求回调函数,在请求后台完成,后台返回数据后执行此方法onload
        xhr.onload = function () {
            debugger
            //解析后台返回的文件内容,这里主要是处理Blob类型
            // 第一种方式
            // var content = this.response; //获取后台响应内容
            // var excelBlob = new Blob([content], {type: 'application/vnd.ms-excel'});

            // 第二种方式
            var excelBlob = this.response;

            var fileName = "originName" + ".xlsx";//

            debugger
            //浏览器兼容处理
            let url = window.URL.createObjectURL(excelBlob);
            let a = document.createElement("a")
            a.href = url;
            a.download = fileName;
            a.click();
            window.URL.revokeObjectURL(url);
        };

        var formData = new FormData();

        let fileList = document.getElementById("file").files;
        for (let i = 0; i < fileList.length; i++) {
            formData.append("files", fileList[i]);
        }

        xhr.send(formData);
复制代码
文章分类
前端
文章标签