js 下載文件流

方法一： 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();