美文网首页
关于页面使用Ajax 无法下载文件(Excel)解决方案

关于页面使用Ajax 无法下载文件(Excel)解决方案

作者: Rinaloving | 来源:发表于2019-08-07 13:39 被阅读0次

参考文档:https://blog.csdn.net/weixin_41981080/article/details/94033776

开发中遇到一件事,本来页面上使用下面这种方式导出Excel文件
<a authorize="yes" href="@Url.Action("ExportEXCEL")" style="margin-left:10px"><i class="fa fa-file-excel-o"></i>&nbsp;导出本周EXCEL</a>
后来为了把页面时间动态传入后台方法,但是上面方式实现不了,于是就通过Ajax方式实现,最终导致网页上没有弹出下载。
<a authorize="yes" onclick="exportExcel()" style="margin-left:10px"><i class="fa fa-file-excel-o"></i>&nbsp;导出本周EXCEL</a>

function exportExcel() {
             var begintime = $("#begintime").val();
             var endtime = $("#endtime").val();
            var url = "/TimeUtilizationRate/TimeVerifyByProject/ExportEXCEL?startDay=" + begintime + "&endDay=" + endtime; // 路径

           var xhr = new XMLHttpRequest();

           xhr.open('GET', url, true);        // 也可以使用POST方式,根据接口

           xhr.responseType = "blob";    // 返回类型blob

           // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑

           xhr.onload = function () {

               // 请求完成

               if (this.status === 200) {

                   // 返回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 = '工时表('+begintime+'--'+endtime+').xlsx';  // 导出表名

                       a.href = e.target.result;

                       $("body").append(a);    // 修复firefox中无法触发click

                       a.click();

                       $(a).remove();

                   }

               }

           };

           // 发送ajax请求

           xhr.send()

相关文章

网友评论

      本文标题:关于页面使用Ajax 无法下载文件(Excel)解决方案

      本文链接:https://www.haomeiwen.com/subject/dojodctx.html