原样导出html页面表格的方法

最新推荐文章于 2022-09-08 15:35:19 发布
最新推荐文章于 2022-09-08 15:35:19 发布
阅读量533 收藏
点赞数
分类专栏： java 文章标签： java table excel html table poi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovexz_365/article/details/84130064
版权
在开发应用系统的时候，难免遇到导出页面上表格到Excel文件中。该方法适合任何的页面表格导成Excel文件的处理


采用javascript获取表格中的每一个单元格的信息；拼装成一定格式的字符串，提供给后台解析：
下面的代码包含每个单元格产生的Excel中的批注信息，可以根据需要进行取舍。 



var hostname = location.hostname; //主机名
/** ******** 导出功能函数 ****** */
/**
 * 浏览器判断
 */
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
	Sys.ie = ua.match(/msie ([\d.]+)/)[1];
else if (document.getBoxObjectFor)
	Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1];

function containsArray(array, obj) {
	for (var i = 0; i < array.length; i++) {
		if (array[i] == obj) {
			return i;
			break;
		}
	}
	return -1;
}

Array.prototype.contains = function(obj) {
	return containsArray(this, obj);
}
function PrintTableToExcel(tableId) {
	var offsetLeftArray = new Array();
	var cell;// 单元格Dom
	var col;// 单元格实际所在列
	var cellStr;// 每个cell以row,col,rowSpan,colSpan,value,background形式
	var cellStrArray = [];
	var objTab = document.getElementById(tableId);

	// 遍历第一次取出offsetLeft集合
	for (var i = 0; i < objTab.rows.length; i++) {
		for (var j = 0; j < objTab.rows[i].cells.length; j++) {
			cell = objTab.rows[i].cells[j];
			if (offsetLeftArray.contains(cell.offsetLeft) == -1)
				offsetLeftArray.push(cell.offsetLeft);
		}
	}

	offsetLeftArray.sort(function(x, y) { return parseInt(x) - parseInt(y); });
	//alert("offsetLeft集合:" + offsetLeftArray.join(','));

	// 遍历第二次生成cellStrArray
	for (var i = 0; i < objTab.rows.length; i++) {
		for (var j = 0; j < objTab.rows[i].cells.length; j++) {
			cell = objTab.rows[i].cells[j];
			var project ;//该对象为获得批注信息，可根据需要取舍
			if(cell.id){
				project  = getProjectById(cell.id.split("-")[2]);
				//alert(project.projectCode +"|"+project.projectName +"|"+project.projectManager+"|"+project.projectType+"|"+project.meetingAddress);
			}
			col = offsetLeftArray.contains(cell.offsetLeft);
			if(cell.id){
				cellStr = i + '^' + col + '^' + cell.rowSpan + '^' + cell.colSpan + "^" + (Sys.firefox?cell.textContent:cell.innerText)+"^"+($(cell).css("background")==undefined? '-1':$(cell).css("background"))+"^"+project.projectCode +"^"+project.projectName +"^"+project.managerNames+"^"+(project.projectKind==null? '':project.projectKind) +"^"+project.meetingAddress;
			}else{
				cellStr = i + '^' + col + '^' + cell.rowSpan + '^' + cell.colSpan + "^" + (Sys.firefox?cell.textContent:cell.innerText)+"^"+($(cell).css("background")==undefined? '-1':$(cell).css("background"));
			}
			//alert(cellStr);
			cellStrArray.push(cellStr);
		}
	}
	var str = cellStrArray.join('@');
	var url = 'url' //你要要提交表单的地址
	$("#exportStr").attr("value",str);
	$("#exportfullStr").attr("value",getfullMonthProjectsString);
	document.exportform.action = url;
	document.exportform.method = "post";
	document.exportform.submit();
}

/**
 * @return
 */
function getfullMonthProjectsString(){
	var projects = allProjects.delRepeat();
	var len  = projects.length;
	var fullString  = []
	for (var i=0  ; i <len ; i++){
		if (projects[i].fullMoon == '1'){
			fullString.push(projects[i].projectName +":" +  projects[i].managerNames);
		}
	}
	return fullString.join("@");
}




后台进行接收表单提交内容，解析，然后导出，生成Excel： 



public class ExportExcel {

	private List<ExcelContent> parseStrToData(String contentstr) {
		List<ExcelContent> contents = new ArrayList<ExcelContent>();
		String[] contentStrs = contentstr.split("@");
		for (String str : contentStrs) {
			ExcelContent ec = new ExcelContent();
			ExcelComments ecm  = new ExcelComments();
			String[] c = str.split("\\^");
			if (StringUtils.isNotBlank(c[0])) {
				ec.setRowNo(Integer.valueOf(c[0]));
			}
			if (StringUtils.isNotBlank(c[1])) {
				ec.setColNo(Integer.valueOf(c[1]));
			}
			if (StringUtils.isNotBlank(c[2])) {
				ec.setRowSpan(Integer.valueOf(c[2]));
			}
			if (StringUtils.isNotBlank(c[3])) {
				ec.setColSpan(Integer.valueOf(c[3]));
			}
			if (StringUtils.isNotBlank(c[4])) {
				ec.setCellContent(c[4].split("/")[0]);
				//ecm.setProjectName(c[4].split("/")[1]);
			}
			if (StringUtils.isNotBlank(c[5])) {
				ec.setCellBackgroundColor(c[5]);
			}
			if (c.length > 6){
				if(StringUtils.isNotBlank(c[6])){
					ecm.setProjectCode(c[6]);
				}
				if(StringUtils.isNotBlank(c[7])){
					ecm.setProjectName(c[7]);
				}
				if(StringUtils.isNotBlank(c[8])){
					ecm.setProjectManage(c[8]);
				}
				if(StringUtils.isNotBlank(c[9])){
					ecm.setProjectType(c[9]);
				}
				if(StringUtils.isNotBlank(c[10])){
					ecm.setMeettingAddress(c[10]);
				}
				ec.setExcelComments(ecm);
			}
			contents.add(ec);
		}
		return contents;
	}

	public HSSFWorkbook generateExcel(String str,String loginUserName,String fullStr) throws Exception {
		List<ExcelContent> contents = parseStrToData(str);
		HSSFWorkbook workbook = new HSSFWorkbook();
		HSSFSheet sheet = workbook.createSheet();
		HSSFRow row = null;
		HSSFPatriarch drawing  =sheet.createDrawingPatriarch();	//一个Excle共享一个对象
		HSSFClientAnchor anchor = null;
		HSSFComment comment  = null;
		int maxRow=0;
		int count  = 1;
		for (ExcelContent ec : contents) {
			if (contents.size() == count){
				maxRow = ec.getRowNo();
			}
			count++;
			row = sheet.getRow(ec.getRowNo());
			if (row == null) {
				row = sheet.createRow(ec.getRowNo());
			}
			if (StringUtils.isNotBlank(ec.getCellContent())) {
				HSSFCell cell = row.createCell(ec.getColNo());

				CellRangeAddress cellRangeAddress = new CellRangeAddress(ec
						.getRowNo(), ec.getRowNo() + ec.getRowSpan() - 1, ec
						.getColNo(), ec.getColNo() + ec.getColSpan() - 1);
				sheet.addMergedRegion(cellRangeAddress);
				cell.setCellValue(new HSSFRichTextString(ec.getCellContent()));

				StringBuffer  cmContent  = new StringBuffer(100);
				if (ec.getExcelComments()!=null){
					CreationHelper factory = workbook.getCreationHelper();
					anchor =  new HSSFClientAnchor(0, 1, 0, 1,(short) cell.getColumnIndex(), row.getRowNum(), (short) (cell.getColumnIndex()+6) , row.getRowNum()+6);
					comment = drawing.createComment(anchor);
					cmContent.append("xxxxx： "+ec.getExcelComments().getProjectCode() +"\n");
					cmContent.append("xxxxxxxx：").append(ec.getExcelComments().getProjectName()).append("\n");
					cmContent.append("xxxx：").append(ec.getExcelComments().getProjectManage()).append("\n");
					cmContent.append("xx：").append(ec.getExcelComments().getProjectType()).append("\n");
					cmContent.append("xxxx:").append(ec.getExcelComments().getMeettingAddress()).append("\n");
					RichTextString string = factory.createRichTextString(cmContent.toString());
					comment.setString(string);
					comment.setAuthor("NETWOKER SERVICE");
					cell.setCellComment(comment);
				}
				//comment.set
				HSSFCellStyle style = sheet.getWorkbook().createCellStyle();
				style.setAlignment(CellStyle.VERTICAL_CENTER);
				style.setVerticalAlignment(CellStyle.VERTICAL_CENTER);
				style.setBottomBorderColor(HSSFColor.BLACK.index);
				if (StringUtils.isNotBlank(ec.getCellBackgroundColor())) {
					String color = ec.getCellBackgroundColor().toUpperCase();
					if (!("-1".equals(color))) {
						short shortColor = ColorConstant.COLOR_EXCEL.get(color);
						style.setFillForegroundColor(shortColor);
						style.setFillPattern(CellStyle.SOLID_FOREGROUND);
					}
				}
				cell.setCellStyle(style);
			}
		}
		addFullMonthProject(sheet, maxRow,fullStr);
		return workbook;
	}

	public void addFullMonthProject(HSSFSheet sheet,int maxRow,String fullStr){
		HSSFRow row  = sheet.createRow(maxRow+1);
		HSSFCell cell = row.createCell(0);
		cell.setCellValue(new HSSFRichTextString("xxxxx： "));
		List<FullMonthProject> list  = parseFullMonthProjectStr(fullStr);
		int len  = list.size();
		for (int i=0 ; i<len ; i++){
			row =  sheet.createRow(maxRow+1 +(i+1));
			HSSFCell cell0 = row.createCell(0);
			cell  = row.createCell(1);
			CellRangeAddress cellRangeAddress = new CellRangeAddress(row.getRowNum(), row.getRowNum(), cell.getColumnIndex(), cell.getColumnIndex()+8);
			sheet.addMergedRegion(cellRangeAddress);
			HSSFCell cell2  = row.createCell(cell.getColumnIndex()+9);
			String pname  = list.get(i).getProName();
			String pusers = list.get(i).getProUsers();
			cell0.setCellValue(i+1);
			cell.setCellValue(new HSSFRichTextString(pname));
			cell2.setCellValue(new HSSFRichTextString(pusers));
		}
	}
	public List<FullMonthProject> parseFullMonthProjectStr(String fullStr){
		List<FullMonthProject> fullMonthProjects  = new ArrayList<FullMonthProject>();
		if(StringUtils.isNotBlank(fullStr)){
			String []  full  = fullStr.split("@");
			for (String s :full){
				FullMonthProject fp  = new FullMonthProject();
				fp.setProName(s.split(":")[0]);
				fp.setProUsers(s.split(":")[1]);
				fullMonthProjects.add(fp);
			}
		}
		return fullMonthProjects;
	}
	class FullMonthProject{
		private String proName;
		private String proUsers;
		public String getProName() {
			return proName;
		}
		public void setProName(String proName) {
			this.proName = proName;
		}
		public String getProUsers() {
			return proUsers;
		}
		public void setProUsers(String proUsers) {
			this.proUsers = proUsers;
		}
	}
}



注意：如果你的界面的table具有单元格的背景色，请采用poi提供的color颜色，做好html中的color 和POI提供color的对应关系，这个关系我是这样处理的： 

public class ColorConstant{

	/**
	 * 系统中项目的颜色和POI中颜色对应关系的工具类
	 * 方便Excle的导出，单元格的着色
	 */
	public static final Map<String,Short> COLOR_EXCEL = new HashMap<String,Short>();

	static {
		COLOR_EXCEL.put("#FFFF00", Short.valueOf(IndexedColors.YELLOW.getIndex()));
		COLOR_EXCEL.put("#FF00FF", Short.valueOf(IndexedColors.PINK.getIndex()));
		COLOR_EXCEL.put("#FF0000", Short.valueOf(IndexedColors.RED.getIndex()));
		COLOR_EXCEL.put("#0000FF", Short.valueOf(IndexedColors.BLUE.getIndex()));
		COLOR_EXCEL.put("#00FF00", Short.valueOf(IndexedColors.GREEN.getIndex()));
		COLOR_EXCEL.put("#FFD700", Short.valueOf(IndexedColors.GOLD.getIndex()));
		COLOR_EXCEL.put("#EE82EE", Short.valueOf(IndexedColors.VIOLET.getIndex()));
		COLOR_EXCEL.put("#008080", Short.valueOf(IndexedColors.TEAL.getIndex()));
		COLOR_EXCEL.put("#eeeeee", Short.valueOf(IndexedColors.BROWN.getIndex()));
		COLOR_EXCEL.put("#fff",Short.valueOf(IndexedColors.WHITE.getIndex()));
	}

}
lovexz_365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面html Table表格导出Execl
08-20
将页面中的HtmlTable，导出为Execl 支持合并单位元、合并行等操作。续之前的优化了计算算法，升级了代码。
页面表格原样导出成Excel
05-07 1196
创建export.jsp
HTML页面中的表格导出为EXCEL文件
王晓通
10-12 1万+
1、js文件准备 jquery.table2excel.js 下载地址 https://github.com/rainabba/jquery-table2excel CSDN站内也多有该插件的下载提供 2、页面中引入js插件 &lt;script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.tab...
使用JavaScript把页面上的表格导出为Excel文件
qq_29423387的博客
10-13 781
解决的问题：通过使用js将HTML页面上内容下载导出 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> /* 此样式仅用
html页面表格导出excel（原生js浏览器全兼容）
09-10
如果后台不提供导出excel表格的接口，那么我们js有自己的方法可以支持。操作简单，可封装。完全抛弃后台，自己展示，自己导出，非常实用，资源内包含demo，一目了然。（原生js浏览器全兼容）
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
12-29
今天使用vue调试页面，发现了页面上的一个问题，后台数据传过来的HTML字符串并没有被转换为正常的HTML代码，一拍脑门，发现忘记转换了，于是满心欢喜加上了{{{}}}。但是之后构建发现报错： 为此去官网上查了下资料，...
Vue2.0实现将页面中表格数据导出excel的实例
08-29
本篇文章主要介绍了Vue2.0实现将页面中表格数据导出excel的实例，包括安装依赖、新建文件夹、编写export2Excel方法、按钮导出调用export2Excel方法、formatJson方法和解决webpack报解析错误等内容。hope对大家的学习...
Thinkphp模板没有解析直接原样输出的解决方法
09-04
在使用ThinkPHP框架进行开发时，可能会遇到模板文件没有被正确解析而是直接原样输出的情况。这通常是由于ThinkPHP在处理模板时的路径常量替换机制导致的。本篇文章将详细探讨这个问题的原因以及如何解决。 一、问题...
使用Python导出Excel图表以及导出为图片的方法
12-23
本篇讲下如何使用纯python代码将excel 中的图表导出为图片。这里需要使用的模块有win32com、pythoncom模块。 网上经查询有人已经写好的模块pyxlchart，具体代码如下： from win32com.client import Dispatch import...
＜笔记＞使用js导出html页面的表格
liyaohuii的博客
08-01 483
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript"> var idTmr; function getExplorer() { var explorer = window.navigat
HTML纯前台页面导出表格
wax0515的博客
12-14 642
HTML页面纯前台导出表格到Excel 话不多说，看代码。 function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) { //如果jsondata不是对象，那么json.parse将分析对象中的json字符串。 var arrData = typeof JSONData != 'object' ? JSON.parse(JSON...
html页面表格导出到excel总结
守望轩
06-23 1万+
最近一个项目需要把报表的表格导入excel，在网上找了一些方法，比较研究了一下，记在这里，备忘。 表格例子如下：table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> tr> td colspan="5" align="center">html 表格导出道Exceltd
excel（word）文件中的表格如何快速转化为html代码
weixin_33943347的博客
06-12 759
复制excel（word）文件中的表格，粘贴在dreamweaver设计模式下，再进行适当的编辑，即可。 转载于:https://blog.51cto.com/cag2050/1425450
Java代码导出Excel表格，并且可以合并单元格
热门推荐
jinchunzhao的博客
09-17 3万+
1、引入POI的jar包依赖 2.工具类代码： public class ExcelUtil { /** * 导出Excel * @param sheetName sheet名称 * @param title 标题 * @param values 内容 * @param wb HSSFWorkbook对象 * @retu...
Python-在线网页导出为图片或pdf
奔跑的豆子的专栏
04-08 3268
我们都知道一个正常的网页，是由html+css+js组成，而其本质是一段段代码编写编译而来的。而图片是由一堆二进制数据组成的，我们该如何将网页上显示的内容导出为我们想要的图片或者pdf呢？博主闲极无聊逛遍github，发现了一个有趣的库pyppeteer，它实现了我所需要导出需求。接下来我们来看看它是怎么操作的： 安装所需要的库 pip install imageio pip install pi...
html table 如何导出为excel表格案例分享
最新发布
跟着飞哥学编程（全栈联盟）
09-08 5884
html table 如何导出为excel表格案例分享
前端技巧——HTML转Excel，并实现打印，下载功能
quyunde的博客
06-11 1万+
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;/head&gt; &lt;body link="blue" vlink="purple"&gt; &lt;

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值