1、需求:
下载文件,掉接口后后端返回文件流。使用window.location.href=url不能正确下载文件
2、原因:
ajax无法请求流文件,需要使用XMLHttpRequest 请求
3、解决
$(document).on("click", ".plupload", function () {
let url = '后台地址'; //后台返回的是文件的二进制流
let xhr = new XMLHttpRequest(); xhr.open("GET", url, true); // 也可以使用POST方式,根据接口需求 xhr.responseType = "blob"; // 返回类型是blob,XMLHttpRequest支持二进制流类型 xhr.onload = function() { if (this.status === 200) { let blob = this.response; //使用response作为返回,而非responseText let reader = new FileReader(); reader.readAsDataURL(blob); // 转换为base64,可以直接放入a标签href reader.onload = function(e) { // 转换完成,创建一个a标签用于下载 let a = document.createElement("a"); a.download = "test.png"; //下载的文件名称(需带后缀) a.href = e.target.result; a.click(); }; }else { alert('非法获取文件'); return false; } };
xhr.send();
});
后台下载一并贴上(Thinkphp6)
//文件下载 public function downloadFile(Request $request) { $filename = $request ->param('path',''); //文件路径 if (!file_exists($filename)){//检测文件是否存在 return false;
}
$allowDownExt = array ( 'ecg', 'dicom', 'dcm', 'pdf', 'xis','doc','txt','jpg','jpeg','png','zip'); $fileExt = pathinfo($filename); //检测文件类型是否允许下载 if(!in_array($fileExt['extension'], $allowDownExt)) { return false; } //检测文件是否存在,并且可读 if(!is_file($filename) && is_readable($filename)) { return false; } $Download = new Download($filename); return $Download; }
感谢博主,喝杯咖啡~
还没有人发表评论