jquery导出并下载报表的方式

墨蓝 2023-10-05 10:43 18阅读 0赞

在项目中碰到需要导出报表（并且是带参数的）  
然后就想着通过文件流的形式下载

1.模拟表单提交的形式

var $form = $("<form id='exportForm' method='post' ></form>");
    	 $form.attr({
        'action':action,'method':'post'});
    	 $form.append($("<input type='hidden' name='columns' value='"+JSON.stringify(columns)+"' />"));
    	 $form.append($("<input type='hidden' name='fields' value='"+JSON.stringify(fields)+"'/>"));
    	 $form.appendTo("body");
         $form.css('display','none');
    	 $form.submit();

但是这种表单提交的方式有点难受，导出的时候你不知道他多久返回结果，这种情况下就很难去控制遮罩时间，数据量一大，导出没见出来然后就一顿点导出，结果可想而知。  
所以就想着有没有方法可以让他有返回函数，第二种方法就这样来了。

2 .XMLHttpRequest

function ExportFile(url, data, loadSuccess, timeout) {
        
    			$.messager.progress({
        
    				msg:'正在导出处理,请耐心等待...'
    			});//loading效果
    	         var xmlResquest = new XMLHttpRequest();
    	         xmlResquest.open("POST", url, true);
    	         xmlResquest.setRequestHeader("Content-type", "application/json");
    	         xmlResquest.timeout = timeout || (1000 * 60);// 超时时间，单位是毫秒
    	         xmlResquest.responseType = "blob";//该属性必须设置
    	         xmlResquest.onload = function (oEvent) {
        
    	         	     $.messager.progress('close');//关闭loading效果
    		             var retData = {
         Success: true, errorMsg: ["导出成功！"] };
    		             var content = xmlResquest.response;
    		             var blob = new Blob([content]);
    		             if (xmlResquest.getResponseHeader("content-disposition")) {
        //判断有没有请求头content-disposition，该请求头在后台文件流导出成功时添加
    			                 var explorer = navigator.userAgent;
    			                 var elink = document.createElement('a');
    			                 var fileName = xmlResquest.getResponseHeader("content-disposition").split(";")[1].split("=")[1];//获取文件名
    			                //响应头中的内容如果包含中文会出现乱码，需要解码才能正常显示
    			                 if (explorer.indexOf("MSIE") >= 0 || explorer.indexOf("Chrome") >= 0) {
          //IE和google浏览器
    				                     fileName = decodeURIComponent(fileName);
    				                 } else {
        
    				                     fileName = decodeURI(escape(fileName));
    				                 }
    			                 elink.download = fileName;
    			                 elink.style.display = 'none';
    			                 elink.href = window.URL.createObjectURL(blob);
    			                 document.body.appendChild(elink);
    			                 elink.click();
    			                 document.body.removeChild(elink);
    			                 window.URL.revokeObjectURL(url);
    			                 if (loadSuccess && $.isFunction(loadSuccess)) loadSuccess(retData, oEvent);
    			             } else {
        //后台出现异常时的处理
    			                var r = new FileReader();
    			                 r.readAsText(blob, 'utf-8');
    			                 r.onload = function (e) {
        
    				                     if (loadSuccess && $.isFunction(loadSuccess)) loadSuccess(JSON.parse(r.result), oEvent);
    				                 }
    			             }
    		         };
    	         xmlResquest.ontimeout = function (e) {
        
    				 	$.messager.progress('close');
    		             $.messager.error("导出超时，请重新导出！");
    		         };
    	         xmlResquest.onerror = function (e) {
        
    	         	     $.messager.progress('close');
    		             $.messager.error("导出时出现错误，导出失败！");
    		         };
    	         xmlResquest.send(JSON.stringify(data));//发送请求
     }

发表评论取消回复

表情：

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

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

相关阅读

相关 Flex导出excel报表

sheetToExcel.java ![6f8131dd42544b03e26422e96154f498.gif][] ![8c15d7f9abd4657000db3bb2

约定不等于承诺〃/ 2024年04月01日 17:10/ 0 赞/ 90 阅读

相关 jquery导出并下载报表的方式

在项目中碰到需要导出报表（并且是带参数的）然后就想着通过文件流的形式下载 1.模拟表单提交的形式 var $form = $("<form id='expor

墨蓝/ 2023年10月05日 10:43/ 0 赞/ 19 阅读

相关 vue中导出报表并兼容客户端的方式

涉及到管理后台系统都免不了需要导出报表的功能。纵然网上资源千千万，但我这种是可以兼容客户端的方法（亲测之前的方法在客户端会有bug），经过不断优化在客户端也得到很好的效果。我这

以你之姓@/ 2022年11月26日 01:44/ 0 赞/ 14 阅读

相关 JAVA数据导出excel并下载

引言： > 最近工作需要对数据库查询的数据导出excel表，并且下载这个文件。 > 话不多说直接看如何把数据写入excel表，具体代码如下： / 导出Exce

拼搏现实的明天。/ 2022年09月05日 01:37/ 0 赞/ 298 阅读

相关 Excel报表的导出

【导出成excel文件】 $str; 为字符串 <table></table> 包含样式的table标签添加头文件即可

素颜马尾好姑娘i/ 2022年08月13日 14:58/ 0 赞/ 245 阅读

相关 java excel导出并下载

在使用时，直接传递参数并调用该方法即可 import java.io.BufferedOutputStream; import java.io.ByteArrayO

「爱情、让人受尽委屈。」/ 2022年07月15日 00:51/ 0 赞/ 271 阅读

相关 POI报表导出

在实际项目中会遇到一些报表导出功能的开发,接下来废话不多说,直接把我在项目中用到的分享给大家一:pom.xml导入依赖

Dear 丶/ 2022年05月19日 01:16/ 0 赞/ 306 阅读

相关 PDF报表导出

使用IText PDF 类库导出： 1.导入依赖： <dependency> <groupId>com.lowagie</grou

超、凢脫俗/ 2022年05月12日 05:10/ 0 赞/ 305 阅读

相关 Springboot导出excel文件并下载

Springboot导出excel文件并下载 -------------------- 文章目录 Springboot导出excel文件并下载前言

ゞ浴缸里的玫瑰/ 2021年09月24日 23:26/ 0 赞/ 729 阅读

相关 tableExport导出 excel报表

JS的引入 jquery-3.3.1.min.js、tableExport.js、base64.js 网上找JS很麻烦，这有链接 tableExport.js :

以你之姓@/ 2021年08月13日 20:51/ 0 赞/ 465 阅读