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