ajax异步下载文件并判断状态

绝地灬酷狼 2021-07-21 00:54 508阅读 0赞

今日需要对公司的代码进行更新，发现之前有的文件丢失导致下载不到直接跳转到一个空的页面，第一反应是应该没有用异步请求，直接用a标签或者表单之类的处理下载文件请求了。

但是ajax似乎是不支持下载文件的，会把流信息当初文本类处理。。。自然不能还原文件数据。

通过测试发现原生ajax xhlHttpRequest可以处理流信息，具体在于它可以将请求中的数据变成blob对象进行读取（好吧我一个后端的实在是不太清楚前段原理）。。。可以通过判断http的status状态来进行下载文件或者提示错误。

function downloadOnclick() {
        var file=$("#realr0205").val();
        var fileName=file;
        if (file!=undefined&&file!=""&&file.indexOf("/")!=-1){
            fileName=file.substr(file.lastIndexOf("/")+1);
        }
        var url = BASE_PATH+'/manage/filedownload?path='+file;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);        // 也可以使用POST方式，根据接口
        xhr.responseType = "blob";    // 返回类型blob
        // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
        xhr.onload = function () {
            if (this.status == 200) {
                var blob = this.response;
                var reader = new FileReader();
                reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
                reader.onload = function (e) {
                    // 转换完成，创建一个a标签用于下载
                    var a = document.createElement('a');
                    a.download = fileName;
                    a.href = e.target.result;
                    $("body").append(a);    // 修复firefox中无法触发click
                    a.click();
                    $(a).remove();
                }
            }else {
                //此处是前端layiUI自带的提示框，无视即可
                $.confirm({
                    theme: 'dark',
                    animation: 'rotateX',
                    closeAnimation: 'rotateX',
                    title: false,
                    content: '未找到该文件',
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'waves-effect waves-button waves-light'
                        }
                    }
                });
            }
        };
        xhr.send();
    }

另外网上也有一部分人说此方法不安全之类的，缺少判断，容易被网络攻击，我觉得ajax可以带上token，在http协议中加上header信息那原生xhr应该也可以做到吧，既然能做到带上安全验证信息，在后端验证一下不就行了？

还有一部分人认为这样做太麻烦，直接通过A标签或者表单进行实现，我觉得现在基本上哪个功能都会存在错误，存在错误就会产生意料之外的情况，大大降低用户体验感，所以异步请求加判断才是主流。

下面公司之前写法，怪不得拿不到文件就不知道调到哪个页面了。

jQuery.download = function (url, method, filedir) {
        jQuery('<form action="' + url + '" method="' + (method || 'post') + '">' +  // action请求路径及推送方法
            '<input type="text" name="path" value="' + filedir + '"/>' + // 文件路径
            '</form>')
            .appendTo('body').submit().remove();
        //var newTab = window.open('about:blank')
        //newTab.location.href = url;
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，508人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax实战：（ajax异步下载文件）请求二进制流进行处理

需求管理后台需要随时下载数据报表，数据要实时生成后转换为excel下载文件不大，页面放置“导出”按钮，点击按钮后弹出保存文件对话框保存 >

川长思鸟来/ 2023年01月08日 02:24/ 0 赞/ 170 阅读

相关 ajax下载文件

this.request(Object.assign({ responseType: 'blob' }, options), params).then((res) =

た入场券/ 2022年12月22日 04:37/ 0 赞/ 108 阅读

相关 ajax异步

//account_add.jsp验证 function checkIdcard(){ //birthdate idcard_no_msg1 id

系统管理员/ 2022年08月26日 03:56/ 0 赞/ 141 阅读

相关 ajax实现文件下载

ajax请求返回类型只有xml,String,json.使用response下载时如何用ajax实现? 第一步:将内容写入文件,返回文件存放路径. 第二步:在回调函数中创建

水深无声/ 2022年08月18日 11:52/ 0 赞/ 217 阅读

相关 ajax下载文件

ajax运行在js的沙箱中，它不能访问物理磁盘。因此用ajax下载不能成功。采用模拟窗体提交的方式下载。 var url = "/ajax/tts/TraceLo

小灰灰/ 2022年06月07日 00:08/ 0 赞/ 237 阅读

相关 Selenium软件测试-判断Ajax异步输出

现在大部分系统采用前后端分离技术实现，前端操作通常使用Ajax与后台交互，使用Selenium如何捕捉Ajax异步请求的返回值，目前还没有找到直接的方法获取Ajax的返回值，但

╰+哭是因爲堅強的太久メ/ 2022年04月24日 11:08/ 0 赞/ 228 阅读

相关 Ajax异步上传文件

\[b\]\[color=green\]\[size=large\]近来，项目有个小需求需要使用到Ajax异步上传文件，本来Ajax是不支持上传文件的，但是可以通过IFrame

Love The Way You Lie/ 2022年04月21日 14:58/ 0 赞/ 462 阅读

相关 AJAX异步多文件上传

目录需求描述相关技术后台接口前端代码截图展示后台代码 upload接口 upload\_mulite接口遇到的问题 1.图片实时预览文件名问题

末蓝、/ 2022年03月20日 05:52/ 0 赞/ 325 阅读

相关 ajax异步上传文件

这里主要使用前端的方法，主要用到了h5的api。使用的时候，一定要在界面上加入： <%--使用formdata来上传文件一定要注明该注释为html5--%>

太过爱你忘了你带给我的痛/ 2022年02月19日 07:09/ 0 赞/ 373 阅读

相关 ajax异步下载文件并判断状态

今日需要对公司的代码进行更新，发现之前有的文件丢失导致下载不到直接跳转到一个空的页面，第一反应是应该没有用异步请求，直接用a标签或者表单之类的处理下载文件请求了。但是...

绝地灬酷狼/ 2021年07月21日 00:54/ 0 赞/ 509 阅读