常见Ajax下载文件方式以及报错解决办法

 更新时间:2024年01月08日 10:52:41   作者:andy5520  
AJAX(Asynchronous JavaScript and XML)是一种用于创建快速、动态和交互式网页的技术,它的主要优势在于能够在不刷新整个网页的情况下与服务器进行数据交互,这篇文章主要给大家介绍了关于常见Ajax下载文件方式以及报错解决办法的相关资料,需要的朋友可以参考下

第一种 Ajax:后台返回bufferArray ,如果前端req.responseType='blob'未指定后端返回File()类型的时候默认按照字节数组arraybuffer 返回前端需要前端转为Blob对象

// 点击下载按钮时触发
$("#download-btn").click(function() {
  // 发送 AJAX 请求获取字节数组
   $.ajax({
            url: url,
            type: "GET",
            xhrFields: { responseType: "blob" },
            success: function (response, status) {
            
                var blob = new Blob([response], { type: "application/pdf" });// 此转换为xhrFields: { responseType: "arraybuffer" },
                
                var link = document.createElement("a");
                link.href = window.URL.createObjectURL(response);
                link.download = "example.pdf";
                document.body.appendChild(link);
                link.click();
            },
            error: function (xhr, status, error) {
                console.log("Error:", error);
            }
        });
});

后端代码:

 Response.Headers.Add("fileName", fileExtensionName);
 Response.Buffer = false;
 var bytes = new byte[renderingResult.DocumentBytes.Length];
 renderingResult.DocumentBytes.CopyTo(bytes, 0);
//return File(bytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileExtensionName);
 return File(renderingResult.DocumentBytes, renderingResult.MimeType, fileExtensionName);nsionName);

第二种使用XmlHttpRequest对象

下面 req.responseType = "blob"; 设置成这样后,window.URL.createObjectURL(req.response); 直接使用不需要进行Blob转换

      var req = new XMLHttpRequest();
        req.open("GET", url, true);
        req.responseType = "blob";
        req.onloadstart = function (e) {
            console.log('e.onloadstartloaded', e.loaded)
        }
        req.onprogress = function (e) {
            var pb = $("#progressBar").data("kendoProgressBar");
            var prog = $("#progressBarLoad");

            console.log('e.loaded', e.loaded)
            console.log('e.total', e.total)
            //if (e.lengthComputable) {
            //    pb.value(Math.round(e.loaded * 100 / e.total));
            //    prog.text('done');
            //} else {
            //    prog.text(loaded);
            //}
 
        } //下载监听
        req.onload = function (oEvent) {
            if (req.status === 200) {
                var blob = req.response;
                var blobData = new Blob([req.response]);
                var fileName = req.getResponseHeader("fileName")
                if (fileName) {
                    var link = document.createElement('a');
                    link.href = window.URL.createObjectURL(req.response);
                    link.download = fileName;
                    link.click();
                    link.remove();
                    window.URL.revokeObjectURL(link.href);
                } else {
                    location.reload();
                }
                //kendo.ui.progress(ele, false);
            } else {
                console.log('error')
                kendo.ui.progress(ele, false);
            }
        };
        req.onloadend = function (e) {
            //$("#progressBar").hide();
            $("#progressBarLoad").text('done');
        }
        req.send();

如果出现以下报错

检查后端Response.Buffer 值,资源文件一版过大在服务端会缓存一次性响应到前端就会导致blob在req.send() 的时候报错,XMLHttpRequest 的status=0 而不是200

解决办法 1.

Response.Buffer = false;

说明:Response.Buffer = false; 则可以进行分片下载及需要设置进度条的下载方式

在ASP.NET中,Response.Buffer是用于指定是否在服务器上缓存输出内容的属性。如果将其设置为true,则服务器将整个响应缓存在内存中,直到服务器端代码执行完毕,并将整个响应一次性发送给客户端。这样可以提高性能,减少网络流量和延迟。但是,对于大型文件或长时间运行的操作,可能会导致服务器资源不足。

如果将Response.Buffer设置为false,则服务器将逐步将输出内容发送到客户端,而不必等待整个响应完全生成。这种方法可以更快地开始发送响应,并减少服务器使用的内存数量。但是,它可能会导致响应变慢或分段传输,导致用户体验下降。

在ASP.NET MVC中,默认情况下,Response.Buffer已经设置为true,因此在大多数情况下,您不需要显式设置它。

解决办法2:

后端代码 下面的buffer=true或者false不会影响前端接受blob

   var bytes = new byte[renderingResult.DocumentBytes.Length];
            renderingResult.DocumentBytes.CopyTo(bytes, 0);

            Response.Clear();
            Response.ContentType = renderingResult.MimeType;
            Response.Cache.SetCacheability(HttpCacheability.Private);
            Response.Expires = -1;
            Response.Buffer = true;
            Response.BinaryWrite(renderingResult.DocumentBytes);
            Response.Flush();
            Response.End();
            return string.Empty; ;
            //return File(bytes, renderingResult.MimeType);

总结 

到此这篇关于常见Ajax下载文件方式以及报错解决办法的文章就介绍到这了,更多相关Ajax下载文件及报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • echarts浮动显示单位的实现方法示例

    echarts浮动显示单位的实现方法示例

    这篇文章主要给大家介绍了关于echarts浮动显示单位的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 通过action传过来的值在option获取进行验证的方法

    通过action传过来的值在option获取进行验证的方法

    通过action传过来的值在option获取进行验证,下面有个不错的示例,需要的朋友不要错过
    2013-11-11
  • 浅谈JS for循环中使用break和continue的区别

    浅谈JS for循环中使用break和continue的区别

    这篇文章主要介绍了浅谈for循环中使用break和continue的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 利用JavaScript实现简单的网页时钟

    利用JavaScript实现简单的网页时钟

    这篇文章主要介绍了利用JavaScript实现简单的网页时钟,主要使用了js的日期对象,实现的时候先创建一个日期对象,并进行网页布局,对时间获取之后将时间填入对应的标签内。然后使用多线程实现时钟的变动,需要的朋友可以参考一下
    2022-02-02
  • JS ES6异步解决方案

    JS ES6异步解决方案

    这篇文章主要介绍了JS ES6异步解决方案,对异步感兴趣的同学,可以参考下
    2021-04-04
  • 小程序自定义导航栏兼容适配所有机型(附完整案例)

    小程序自定义导航栏兼容适配所有机型(附完整案例)

    这篇文章主要介绍了小程序自定义导航栏兼容适配所有机型(附完整案例),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • JavaScript查看代码运行效率console.time()与console.timeEnd()用法

    JavaScript查看代码运行效率console.time()与console.timeEnd()用法

    今天小编就为大家分享一篇关于JavaScript查看代码运行效率console.time()与console.timeEnd()用法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • layer.open 按钮的点击事件关闭方法

    layer.open 按钮的点击事件关闭方法

    今天小编就为大家分享一篇layer.open 按钮的点击事件关闭方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • javascript鼠标右键菜单自定义效果

    javascript鼠标右键菜单自定义效果

    设计专属于自己的右键菜单,添加自己需要的快捷方式,本文就为大家分享自定义javascript鼠标右键菜单的实现方法,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 使用JavaScript实现一个炫酷的罗盘时钟

    使用JavaScript实现一个炫酷的罗盘时钟

    在探究前端动画时,想到之前在锁屏壁纸看到的罗盘时钟,看着很是炫酷,于是说干就干,下面就跟随小编一起来学习一下如何使用JS实现一个炫酷的罗盘时钟效果吧
    2024-02-02

最新评论