js 下载文件流

Posted 2020-12-07

方法一： a标签

需要参数的时候，放在url上即可

                    <a href={`${API}/export/exportCheckingIn?uuid=${params.name}&startTime=${params.startTime}&endTime=${params.endTime}`} download>导出</a>

 

方法二： 文件流

重点来了，在处理excel下载时，后端返回了一个文件流，需要用blob处理下：

        //  获取时间戳
        let timestamp = new Date().getTime();
        // 获取XMLHttpRequest
        let xmlResquest = new XMLHttpRequest();
        //  发起请求
        xmlResquest.open("GET", `${API}/export/exportCheckingIn?uuid=${params.name}&startTime=${params.startTime}&endTime=${params.endTime}`, true);
        // 设置请求头类型
        xmlResquest.setRequestHeader("Content-type", "application/json");
        //  设置请求token
        // xmlResquest.setRequestHeader(

        // );
        xmlResquest.responseType = "blob";
        //  返回
        xmlResquest.onload = function (oEvent) {
            let content = xmlResquest.response;
            // 组装a标签
            let elink = document.createElement("a");
            // 设置下载文件名
            elink.download = timestamp + ".xlsx";
            elink.style.display = "none";
            let blob = new Blob([content]);
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            document.body.removeChild(elink);
        };
        xmlResquest.upload.onprogress = function (e) {
            if (e.lengthComputable) { //lengthComputable 是 progress 的一个属性，表示资源是否可计算字节流
                let pross = (e.loaded / e.total) * 100;
                console.log(pross)
            }
        }
        xmlResquest.send();