从浏览器下载表格数据为Excel的两种实现方法

最新推荐文章于 2024-09-14 18:48:18 发布

聪小白

最新推荐文章于 2024-09-14 18:48:18 发布

阅读量6.7k

点赞数 1

分类专栏：后台开发前端组件工具文章标签： Excel生成和下载 post请求下载Excel

本文链接：https://blog.csdn.net/qq_29901819/article/details/86612674

版权

本文介绍了两种在浏览器中将表格数据下载为Excel的方法。第一种利用IE的ActiveX控件，适用于数据量大、不需要额外处理的情况，但仅限IE。第二种通过Java的Apache POI库，可以处理数据和个性化Excel，但速度较慢，适合数据处理和扩展。代码示例包括get和post请求方式。

摘要由CSDN通过智能技术生成

一、使用说明

实际开发运用过程中，往往需要将页面上的一些表格数据生成Excel供用户下载使用，根据不同的需求，此处整理了两种方式：（两种方式浏览器都可直接提示下载或保存文件）

方式一：

1、需求：

生成的Excel跟页面上格式、数据、字段完全一样，且表格无多余操作控件（如下拉框等），并使用IE浏览器。

2、思路：

利用IE浏览器的ActiveX控件，借助剪贴板工具控件，直接将数据粘贴成为Excel。本质就是复制粘贴，要保证IE浏览器设置里的ActiveX控件启用，以及允许对剪贴板进行编程访问。

3、优缺点：

优点：快捷、方便、即使表格数据量很大也能秒生成，完整保留表格样式；

缺点：使用条件苛刻，且只满足单一的对数据的复制粘贴。

方式二：

1、需求

需要对数据进行处理、计算、并对Excel的字段、样式进行个性化设置。

2、思路：

对表单数据进行封装处理，传到后台（或从后台数据库读取），拿到数据后根据需求进行计算处理，然后利用org.apache.poi.jar对将数据按照个性化写入Excel。（注：Apache POI 是用Java编写的免费开源的跨平台的 Java API，Apache POI提供API给Java程式对Microsoft Office格式档案读和写的功能。）

3、优缺点：

优点：可对数据进行后台读取、计算处理、对Excel进行个性化设置、可扩展性强；

缺点：生成速度慢、开发工作量相对大。

二、代码演示：

方式一：在做好相关设置后，直接调用如下代码就可下载表格：

 //导出
    $("#export").click(function() {
    	/**thead的id**/
    	//var tHeadId = "tableHead";
    	//**tbody的id**//
    	//var tBodyId = "dataView";
    	//expStatisticsForm(tHeadId, tBodyId);
    	var elTable = document.getElementById("exportTable"); 
    	try{
    	var oRangeRef = document.body.createTextRange(); 
    	oRangeRef.moveToElementText( elTable ); 
    	oRangeRef.execCommand( "Copy" ); 
    	var appExcel = new ActiveXObject( "Excel.Application" ); 
    	appExcel.Visible = true; 
    	appExcel.Workbooks.Add().Worksheets.Item(1).Paste(); 
    	appExcel = null; 
    	}catch (e) {
			window.parent.parent.layerAlert("提示", "要在项目中使用Excel，您必须安装微软Office Excel或者金山WPS，同时浏览器须允许执行ActiveX控件（使用IE浏览器）！");
			return ;
    	}
    	
    });

其中，“exporttTable”为需要导出的表格的ID。

方式二：此情况又分为两种情况：（实际是请求和参数传递的差异）

1、参数少，数据从后台数据库读取，字段、列宽等后台给定。

直接使用get请求：window.location.href= webCfg.servePath + "/mbgl/fileDownload/"+id 到后台下载，其中webCfg.servePath为服务根目录，id为传递的参数，后台拿到ID再根据需求取得数据处理生成Excel。

2、参数多，数据量大，（如：前端传入表数据、指定表字段、Excel样式）

此种情况采用隐藏表单发送post请求的方式：

前端具体实现如下（实际开发案例）：

/**导出表单的内容为Excel**/
function exportExcel(){
      var title = $("#title").val().trim();//标题
      var sheetName = "绩效考核表";//sheet名
      //表头信息
      var tableHeads = [];
      var headTr = $("#itemTable tr:eq(2)"); 
      $(headTr).children('th').each(function(j){
    	  if(j==0){
    		  tableHeads.push("序号"); 
    	  }else{
    		  tableHeads.push($(this).text());
    	  }
      });
      var tdWidths = [