Form表单实现导出Excel后实时去掉遮罩层解决方案

开发中我们经常遇到Form表单来导出Excel,为了避免导出时候时候用户等待不急乱操作现象,需要给页面加个遮罩层,一面体现导出进度,另一方面可以防止用户乱点击页面。

代码如下:

//导出excel
function doExportExcel()
{  
var annualYear=$('AnnualYear').value;
if(annualYear==''){
alert("会计年度必输项未输,不能导出!");
return false;
}
var accountingPeriodBegin=$('AccountingPeriodBegin').value;
if(accountingPeriodBegin==''){
alert("会计开始期间必输项未输,不能导出!");
return false;
}
var accountingPeriodEnd=$('AccountingPeriodEnd').value;
if(accountingPeriodEnd==''){
alert("会计截止期间必输项未输,不能导出!");
return false;
}
if(Number(accountingPeriodBegin)>Number(accountingPeriodEnd)){
alert("会计期间选择不正确,数据不能导出");
return false;
}
//var reportType=jq('#ReportType').combobox('getValue');
//alert(accountingPeriodEnd);
/* if(reportType==''){


alert("请选择报表类型!");
return false;
} */
var reportType=$('ReportType').value;
if(reportType==''){


alert("报表类型必输项未输,不能导出!");
return false;

//判断是否已经在运行进度条,如果没有则执行
    if(document.getElementById("popupdialogbackground")==null){
    showRunning();
    }
   var form = document.getElementById("form1");  // 取得要提交的表格    
   form.action = "exportDepartmentIncome.html?Random="+Math.floor(Math.random() * 1000000000)+"&ReportType="+reportType+"&AnnualYear="+annualYear+'&AccountingPeriodBegin='+accountingPeriodBegin+'&AccountingPeriodEnd='+accountingPeriodEnd;    
   //form.submit();  
   if (form) {
            form.submit();             
            var icount = setInterval(function(){    
                if(document.readyState != 'loading'){    //循环判断document状态,如果加载完成则表示开始了下载,此时关闭提示窗口
                unShowRunning();
                    clearTimeout(icount);
                }
            }, 1);
        }  
   
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要在JavaScript中将表单数据导出Excel文件,可以使用以下步骤: 1. 首先,创建一个包含表单的HTML页面,确保表单中的每个输入字段都有一个唯一的id属性。例如: ```html <form id="myForm"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <!-- 其他表单字段 --> <button type="submit">Export to Excel</button> </form> ``` 2. 在JavaScript中,添加一个事件监听器来捕获表单提交事件。在事件处理程序中,阻止表单的默认提交行为,并调用导出Excel函数。例如: ```javascript document.getElementById('myForm').addEventListener('submit', function(e) { e.preventDefault(); // 阻止表单默认提交行为 exportToExcel(); }); ``` 3. 创建导出Excel文件的函数`exportToExcel()`。在该函数中,首先获取表单数据,然后将其转换为Excel格式的数据。最后,创建一个下载链接并自动触发点击以下载Excel文件。以下是一个示例实现: ```javascript function exportToExcel() { // 获取表单数据 var formData = new FormData(document.getElementById('myForm')); // 创建一个新的工作簿 var wb = XLSX.utils.book_new(); // 创建一个新的工作表 var ws = XLSX.utils.json_to_sheet(formDataToObject(formData)); // 将工作表添加到工作簿 XLSX.utils.book_append_sheet(wb, ws, 'Sheet 1'); // 将工作簿转换为Excel文件的二进制数据 var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); // 创建一个Blob对象 var blob = new Blob([wbout], { type: 'application/octet-stream' }); // 创建一个下载链接 var downloadLink = document.createElement('a'); downloadLink.href = URL.createObjectURL(blob); downloadLink.download = 'form_data.xlsx'; // 触发下载链接的点击事件 downloadLink.click(); } // 辅助函数:将FormData转换为对象 function formDataToObject(formData) { var obj = {}; formData.forEach(function(value, key) { obj[key] = value; }); return obj; } ``` 请注意,上述示例使用了一个名为`XLSX`的JavaScript库来处理Excel文件。确保在页面中包含该库的正确脚本引用。 使用上述代码,当用户提交表单时,将自动下载一个名为`form_data.xlsx`的Excel文件,其中包含表单数据。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值