`

html表格导出Excel

    博客分类：
  • java
ExcelHTMLOfficeCSSJSP 
阅读更多 
<table id="export_table" border="1" cellspacing="0" cellpadding="0">
    	<tr>
    		<th>第一列</th>
    		<th>第二列</th>
    		<th>第三列</th>
    		<th>第四列</th>
    		<th>第五列</th>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    </table>

先把上面那段代码复制下来，新建一个excel文件，把复制的内容粘帖进去，看看什么效果！

 

1、通过上面的操作，可以得知excel能够解析html代码，这样给导出excel提供了一个思路，我们只有把页面上表格的html代码全部拿来，粘帖到excel中，不就可以实现导出了嘛。

 

2、

下面提供两种导出excel的方法和实例

第一种:完全通过javascipt导出，这种方法导出设计安全问题，看实例：

example.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>example.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	
	<script type="text/javascript">
		function exportExcel(){
		    exportTable = document.getElementById('export_table');
		    oApplication    = new ActiveXObject ( 'Excel.Application' ); 
			oApplication.visible = true; 
			oApplication.DisplayAlerts = false; 
			xlBook = oApplication.Workbooks.Add; 
			oActiveSheet = xlBook.ActiveSheet;
		    window.clipboardData.setData('text',exportTable.outerHTML); 
			oActiveSheet.Paste; 
		}
	</script>
  </head>
  
  <body>
  	<input type="button" value="导出" onclick="exportExcel();">
    <table id="export_table" border="1" cellspacing="0" cellpadding="0">
    	<tr>
    		<th>第一列</th>
    		<th>第二列</th>
    		<th>第三列</th>
    		<th>第四列</th>
    		<th>第五列</th>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    </table>
  </body>
</html>

 

 

 

第二种：通过java在后台实现导出

 

example.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>example.jsp</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<script type="text/javascript">
		function exportExcel(){
			var frm = document.exportForm;
			var toExcelStr = document.getElementById('export_table').outerHTML;
			frm.elements['content'].value = toExcelStr;
			frm.elements['title'].value = 'SheetExcel.xls';
			frm.submit();
		}
	</script>
  </head>
  
  <body>
    <input type="button" value="导出" onclick="exportExcel();">
    <table id="export_table" border="1" cellspacing="0" cellpadding="0">
    	<tr>
    		<th>第一列</th>
    		<th>第二列</th>
    		<th>第三列</th>
    		<th>第四列</th>
    		<th>第五列</th>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    	<tr>
    		<td>111</td>
    		<td>222</td>
    		<td>333</td>
    		<td>444</td>
    		<td>555</td>
    	</tr>
    </table>
    <form name="exportForm" action="exportToExcel.jsp" style="display: none" method="post">
    	<!-- excel文件名 -->
    	<input name="title" type="text" />
    	<!-- excel文件内容 -->
    	<input name="content" type="text" />
    </form>
  </body>
</html>

 

exportToExcel.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%
	request.setCharacterEncoding("GBK");
	String title = request.getParameter("title");
  	String content = request.getParameter("content");
  	
  	//html代码在excel中处理与在html中不一样，在此做一下转化，以便显示出边框(根据自己需要调整)
	content = content.replaceAll("bgColor=black ","");
	content = content.replaceAll("border=0","border=1");
	
	//如果没有border属性，则增加一个
	if(content.indexOf("border")==-1){
		content = content.replaceAll("<TABLE","<TABLE border=1");
	}
	
	//当table中有子table时，父table不显示边框
	//用于调整显示格式，别无它用
	int i = content.indexOf("border=1");
	int j = content.indexOf("border=1",i+8);
	if(j>0)
		content = content.replaceFirst("border=1","border=0");
	
  	System.out.print(content);
  	response.setContentType("application/vnd.ms-excel;charset=GBK");
  	
	if(title != null && !"".equals(title)){
		response.setHeader("Content-disposition","attachment; filename="+title);
	}else{
		response.setHeader("Content-disposition","attachment; filename=SheetExcel.xls");
	}
%>
<HTML xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<title>Test</title>
<style>
	td{ 
	    font-family: Verdana;
	    color:black;
	    text-overflow:ellipsis;
	    word-wrap:break-word;
	    FONT-SIZE: 12px;
	    overflow: hidden;
		white-space:normal;
	}
  .row1 {font-size: 12px; background-color: white; text-align:left; vertical-align: center; padding: 2px}
  .row2 {font-size: 12px; background-color: gainsboro; text-align:left; vertical-align: center; padding: 2px;} 
 </style>
<meta http-equiv=Content-Type content="text/html; charset=GBK">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 9">
</head>
<body>
	<%--要显示的HTML代码字符窜--%>
	<%=content%>
</body>
</HTML>

 

 

 

 

 

 

0
顶
0
踩
分享到：
| jQuery插件--图片轮换
评论
4 楼 给太阳洒水 2010-09-20  
yangguo 写道
我直接导的，没用程序。

你的意思是直接复制，粘帖以后出现乱码？这个应该跟你的机器有关系，也许是office自身的编码问题吧，否则不会出现乱码的。你去调查调查原因，完了，留言告诉我一声
3 楼 yangguo 2010-09-20  
我直接导的，没用程序。
2 楼 给太阳洒水 2010-09-20  
yangguo 写道
导入中文乱码。

把你的eclipse中的workbench的编码方式改一下
1 楼 yangguo 2010-09-20  
导入中文乱码。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    tableExport_html表格导出excel等多种格式

    "tableExport_html表格导出excel等多种格式"是一个便捷的工具，它允许用户将HTML表格的数据轻松地导出为Excel、CSV、PDF等格式。这个工具通过引入一个JavaScript库，大大简化了这个过程，使得网页开发者和非技术人员...

    html页面表格导出excel（原生js浏览器全兼容）

    原生JavaScript实现的HTML表格导出功能，无需依赖后台接口，能够实现浏览器全兼容，大大提高了用户体验。下面我们将详细介绍如何使用原生JavaScript实现这个功能。 首先，我们需要了解HTML表格的基本结构。HTML表格...

    layui数据表格导出Excel插件

    layui数据表格导出Excel插件是一款为layui框架设计的实用工具，它允许用户方便地将layui数据表格中的数据导出到Excel文件中。layui是一款轻量级的前端UI框架，以其简洁、优雅的代码风格和丰富的组件库深受开发者喜爱...

    html表格导出为excel

    "HTML表格导出为Excel"就是一种常见的需求，它允许用户将展示在网页上的结构化数据，如表格，轻松地下载为Excel文件，便于进一步处理或分析。在这个过程中，我们通常会利用JavaScript库，比如jQuery，来实现这一功能...

    基于Bootstrap表格导出Excel插件.zip

    Bootstrap表格导出Excel插件是前端开发中常用的一种工具，它允许用户将Bootstrap表格中的数据方便地导出为Excel文件，极大地提升了数据管理和分享的效率。这个插件主要基于JavaScript和Bootstrap框架，利用HTML5的...

    js操作table导出excel

    总结，JavaScript操作HTML表格导出Excel主要涉及以下几个步骤： 1. 引入`FileSaver.js`库。 2. 创建HTML表格并填充数据。 3. 使用JavaScript获取表格数据并转换为CSV格式。 4. 创建Blob对象，并使用`saveAs`方法保存...

    Ligerui Table导出excel 支持样式、冻结行列、图片等导出

    LigerUI Table不仅具备基本的表格功能，如排序、筛选、分页，还提供了丰富的扩展特性，如导出Excel功能。这个功能使得用户能够方便地将网页上的数据导出到Excel文件中，以便于进一步的数据分析或存储。 标题"...

    html表格导出到excel

    以上就是将HTML表格导出到Excel的主要步骤和技术，结合前端JavaScript和后端C#，我们可以提供一个完整的解决方案。通过这种方式，用户可以方便地将网页上的数据导出为常见的电子表格格式，进行深度分析和管理。

    页面html Table表格导出Execl

    在网页开发中，有时我们需要将HTML表格的数据导出到Excel文件中，以便用户可以进行更方便的查看、编辑和分析。"页面html Table表格导出Execl"这个主题涉及的技术点主要包括HTML表格的处理、JavaScript（或者jQuery）...

    表格导出EXCEL含超链接的POI方式

    JAVA开发中需要将表格中数据导出成EXCEL文件，其中的某一项又要设置为HTML格式，并支持点击链接，使用POI的开源方式导出时可以参考到此文件的内容！

    aaaaa.rar_JavaScript Excel_Table_table 导出excel_导出excel

    总的来说，利用JavaScript从HTML表格导出Excel文件涉及到HTML DOM操作、数据转换、CSV格式化和浏览器API的使用，是一个实用且常见的前端技能。开发者应当理解这些步骤，并根据项目需求选择合适的方法实现。

    前端表格导出Excel

    在前端开发中，导出表格...以上就是关于“前端表格导出Excel”的主要知识点。实际应用中，开发者需要根据项目需求和性能考虑，选择合适的实现方式和技术栈。通过熟练掌握这些技术，可以有效地提高前端项目的用户体验。

    easyui datagrid 数据导出到Excel

    文件`Jquery_easyui_datagrid_js导出excel.doc`可能是文档说明或者包含插件使用的示例代码。通常，jQuery插件能简化Datagrid数据导出的操作。一种常见的方式是使用`html2canvas`和`jsPDF`库，它们可以将HTML内容转换...

    简单的导出excel表格列子

    在JavaScript中，我们可以遍历HTML表格中的每一行和每一列，将它们的值转化为CSV格式。这个过程涉及将单元格内容转成字符串，处理可能存在的特殊字符（如逗号、引号等），然后以逗号分隔。当所有行的数据都处理完后...

    jQuery表格导出excel文件代码.zip

    在"jQuery表格导出excel文件代码"中，可能使用了HTML5的`Blob`和`FileSaver.js`库来创建并保存文件。当用户点击导出按钮，jQuery会选择表格数据，将其转换为CSV字符串，然后利用`Blob`对象创建一个二进制大对象，...

    表格导出excel.zip

    总结来说，"表格导出excel.zip"这个压缩包涉及到HTML表格的创建、Bootstrap的使用以美化界面，以及JavaScript技术来实现从网页表格到Excel文件的导出功能。这些技术是现代Web开发中的基础，对于任何需要处理和展示...

    jsp实现HTML表格导出和导入Excel功能

    在日常开发中，我们需要能够把页面上一个表格的内容导出到Excel中，然后用户修改后再导回到表格中的功能。 在这里，通过使用JQUERY＋JQUERY UI＋JSON-LIB＋POI实现这个功能数据导出设计：通过使用JQUERY分析表格的...

Magicbox
Global site tag (gtag.js) - Google Analytics