zoukankan      html  css  js  c++  java
  • 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();
    

      

  • 相关阅读:
    CTFHub_技能树_文件上传
    QT入门-重载的信号槽
    QT入门-自定义信号
    C++: xx does not name a type报错
    HDU1166 敌兵布阵
    洛谷P2574 XOR的艺术(线段树)
    P3373 【模板】线段树 2(板子好题)
    SP1716 GSS3
    QT入门-自定义槽函数
    Educational Codeforces Round 87 (Rated for Div. 2) D. Multiset(树状数组/好题)
  • 原文地址:https://www.cnblogs.com/gaoht/p/13045370.html
Copyright © 2011-2022 走看看