转，java h5 复杂table导出excel并下载

最新推荐文章于 2023-02-05 01:05:15 发布
最新推荐文章于 2023-02-05 01:05:15 发布
阅读量317 收藏
点赞数 1
分类专栏： excel导出 java 文章标签： java h5 excel
原文链接：https://www.cnblogs.com/007sx/p/8716148.html
版权

转，java h5 复杂table导出excel并下载

原博客地址：

链接: https://www.cnblogs.com/007sx/p/8716148.html.

本文根据自己的需求做了部分修改，感谢该博主提供的工具类。

1、前端部分

<html>
	<head>
		<title>h5复杂table导出测试</title>
	</head>
	<body>
		<div id="mytable">
			<table>
				<thead>
					<tr align="center">
						<th>班级</th>
						<th>姓名</th>
						<th>成绩</th>
					</tr>
				</thead>
				<tbody>
					<tr align="center">
						<td rowspan="2">1班</td>
						<td>小明</td>
						<td>100</td>
					</tr>
					<tr align="center">
						<td>小红</td>
						<td>95.5</td>
					</tr>
				</tbody>
			</table>
		</div>
		<button onclick="loadExcel()">导出Excel</button>
	</body>
	<script language="JavaScript">
		function makeFormSubmit(url, excelName, excelTitle, tableHtml) {
			// 创建一个 form
			var form1 = document.createElement("form");
			// 添加到 body 中
			document.body.appendChild(form1);
			// 创建输入
			var input = document.createElement("input");
			input.name = "excelName";
			input.value = excelName;
			var input1 = document.createElement("input");
			input1.name = "tableHtml";
			input1.value = tableHtml;
			var input2 = document.createElement("input");
			input2.name = "excelTitle";
			input2.value = excelTitle;
			// 将输入框插入到 form 中
			form1.appendChild(input);
			form1.appendChild(input1);
			form1.appendChild(input2);
			// form 的提交方式
			form1.method = "POST";
			// form 提交路径
			form1.action = url;
			//以附件方式 解决数据量大的问题
			form1.enctype = "multipart/form-data";
			// 对该 form 执行提交
			form1.submit();
			// 删除该 form
			document.body.removeChild(form1);
		}

		function loadExcel() {
			var tableHtml = document.getElementById('mytable').innerHTML;
			makeFormSubmit("/api/excel/loadExcel.do", "测试excel", "标题测试", tableHtml);
		}
	</script>

2、后端部分

2.1、Controller 入口

package com.test.controller;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.test.ConvertHtml2Excel;

@Controller
@RequestMapping(value = "/api/excel")
public class ExcelController {

	@RequestMapping(value = "/loadExcel", method = RequestMethod.POST)
    private void loadExcelGet(HttpServletRequest req, HttpServletResponse resp) {
        try {
            req.setCharacterEncoding("UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        // 设置文件的mime类型
        resp.setContentType("application/vnd.ms-excel");

        // 存储文件名称
        String excelName = req.getParameter("excelName");
        // 设置标题
        String excelTitle = req.getParameter("excelTitle");

        try {
            excelName = URLEncoder.encode(excelName, "utf-8");
        } catch (UnsupportedEncodingException e1) {
            e1.printStackTrace();
        }

        resp.setHeader("content-disposition", "attachment;filename=" + excelName + ".xls;filename*=utf-8''" + excelName + ".xls");

        String tableHtml = req.getParameter("tableHtml");

        // 从session中删除saveExcelMsg属性
        req.getSession().removeAttribute("saveExcelMsg");
        // 定义一个输出流
        ServletOutputStream sos = null;

        HSSFWorkbook wb = ConvertHtml2Excel.table2Excel(tableHtml,excelTitle);

        try {
            // 保存到文件中
            sos = resp.getOutputStream();
            wb.write(sos);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (sos != null) {
                try {
                    sos.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

2.2、h5 table处理

package com.test;
import java.io.File;
import java.io.FileOutputStream;
import java.util.ArrayList;
import java.util.List;

import org.apache.commons.lang.StringUtils;
import org.apache.commons.lang.math.NumberUtils;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFCellStyle;
import org.apache.poi.hssf.usermodel.HSSFFont;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.hssf.util.HSSFColor;
import org.apache.poi.ss.util.CellRangeAddress;
import org.apache.poi.ss.util.RegionUtil;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;

/**
 * 将html table 转成 excel
 *
 * 记录下来所占的行和列，然后填充合并
 */
public class ConvertHtml2Excel {
    /**
     * html表格转excel
     *
     * @param tableHtml 如
     *            <table>
     *            ..
     *            </table>
     * @return
     */
    public static HSSFWorkbook table2Excel(String tableHtml,String title) {
        HSSFWorkbook wb = new HSSFWorkbook();
        HSSFSheet sheet = wb.createSheet();
        
        List<CrossRangeCellMeta> crossRowEleMetaLs = new ArrayList<>();
		
        int rowIndex = 1; // 保留标题行，可根据实际情况处理。默认从0开始
        try {
            Document data = DocumentHelper.parseText(tableHtml);
            // 生成表头
            Element thead = data.getRootElement().element("thead");
            HSSFCellStyle titleStyle = getTitleStyle(wb);
            int headleangth = 0;
            if (thead != null) {
                List<Element> trLs = thead.elements("tr");
                for (Element trEle : trLs) {
                    HSSFRow row = sheet.createRow(rowIndex);
                    List<Element> thLs = trEle.elements("th");
                    headleangth = thLs.size();
                    makeRowCell(thLs, rowIndex, row, 0, titleStyle, crossRowEleMetaLs);
                    row.setHeightInPoints((float)30);
                    rowIndex++;
                }
            }
            // 生成表体
            Element tbody = data.getRootElement().element("tbody");
            if (tbody != null) {
                HSSFCellStyle contentStyle = getContentStyle(wb);
                List<Element> trLs = tbody.elements("tr");
                for (Element trEle : trLs) {
                    HSSFRow row = sheet.createRow(rowIndex);
                    List<Element> thLs = trEle.elements("th");
                    int cellIndex = makeRowCell(thLs, rowIndex, row, 0, titleStyle, crossRowEleMetaLs);
                    List<Element> tdLs = trEle.elements("td");
                    makeRowCell(tdLs, rowIndex, row, cellIndex, contentStyle, crossRowEleMetaLs);
                    row.setHeightInPoints((float)26);
                    rowIndex++;
                }
            }
            // 合并表头
            for (CrossRangeCellMeta crcm : crossRowEleMetaLs) {
            	CellRangeAddress region = new CellRangeAddress(crcm.getFirstRow(), crcm.getLastRow(), crcm.getFirstCol(), crcm.getLastCol());
                sheet.addMergedRegion(region);
                setBorderStyle(HSSFCellStyle.BORDER_THIN, region, sheet, wb);
            }
            
            // 设置表头
            HSSFCellStyle style = getTitleStyle(wb);
            HSSFRow row = sheet.createRow(0); 
    		HSSFCell cell = row.createCell(0);
    		cell.setCellValue(title);
    		cell.setCellStyle(style);
    		row.setHeightInPoints((float)33.75);
    		CellRangeAddress region = new CellRangeAddress(0,0,(short)0,(short)(headleangth-1)); 
    		sheet.addMergedRegion(region);
    		setBorderStyle(HSSFCellStyle.BORDER_THIN, region, sheet, wb);
        } catch (DocumentException e) {
            e.printStackTrace();
        }
        //自动调整列宽
        for (int i = 0; i < 15; i++) {
            sheet.autoSizeColumn((short)i);
        }
        return wb;
    }
    
    // 合并后边框处理
    public static void setBorderStyle(int border, CellRangeAddress region, HSSFSheet sheet, HSSFWorkbook wb){
        RegionUtil.setBorderBottom(border, region, sheet, wb);  //下边框
        RegionUtil.setBorderLeft(border, region, sheet, wb);     //左边框
        RegionUtil.setBorderRight(border, region, sheet, wb);    //右边框
        RegionUtil.setBorderTop(border, region, sheet, wb);      //上边框
    }

    /**
     * 生产行内容
     *
     * @return 最后一列的cell index
     */
    /**
     * @param tdLs th或者td集合
     * @param rowIndex 行号
     * @param row POI行对象
     * @param startCellIndex
     * @param cellStyle 样式
     * @param crossRowEleMetaLs 跨行元数据集合
     * @return
     */
    private static int makeRowCell(List<Element> tdLs, int rowIndex, HSSFRow row, int startCellIndex, HSSFCellStyle cellStyle,
                                   List<CrossRangeCellMeta> crossRowEleMetaLs) {
        int i = startCellIndex;
        for (int eleIndex = 0; eleIndex < tdLs.size(); i++, eleIndex++) {
            int captureCellSize = getCaptureCellSize(rowIndex, i, crossRowEleMetaLs);
            while (captureCellSize > 0) {
                for (int j = 0; j < captureCellSize; j++) {// 当前行跨列处理（补单元格）
                    row.createCell(i);
                    i++;
                }
                captureCellSize = getCaptureCellSize(rowIndex, i, crossRowEleMetaLs);
            }
            Element thEle = tdLs.get(eleIndex);
            String val = thEle.getTextTrim();
            if (StringUtils.isBlank(val)) {
                Element e = thEle.element("a");
                if (e != null) {
                    val = e.getTextTrim();
                }
            }
            HSSFCell c = row.createCell(i);
            if (NumberUtils.isNumber(val)) {
                c.setCellValue(Double.parseDouble(val));
                c.setCellType(HSSFCell.CELL_TYPE_NUMERIC);
            } else {
                c.setCellValue(val);
            }
            c.setCellStyle(cellStyle);
            int rowSpan = NumberUtils.toInt(thEle.attributeValue("rowspan"), 1);
            int colSpan = NumberUtils.toInt(thEle.attributeValue("colspan"), 1);
            if (rowSpan > 1 || colSpan > 1) { // 存在跨行或跨列
                crossRowEleMetaLs.add(new CrossRangeCellMeta(rowIndex, i, rowSpan, colSpan));
            }
            if (colSpan > 1) {// 当前行跨列处理（补单元格）
                for (int j = 1; j < colSpan; j++) {
                    i++;
                    row.createCell(i);
                }
            }
        }
        return i;
    }

    /**
     * 获得因rowSpan占据的单元格
     *
     * @param rowIndex 行号
     * @param colIndex 列号
     * @param crossRowEleMetaLs 跨行列元数据
     * @return 当前行在某列需要占据单元格
     */
    private static int getCaptureCellSize(int rowIndex, int colIndex, List<CrossRangeCellMeta> crossRowEleMetaLs) {
        int captureCellSize = 0;
        for (CrossRangeCellMeta crossRangeCellMeta : crossRowEleMetaLs) {
            if (crossRangeCellMeta.getFirstRow() < rowIndex && crossRangeCellMeta.getLastRow() >= rowIndex) {
                if (crossRangeCellMeta.getFirstCol() <= colIndex && crossRangeCellMeta.getLastCol() >= colIndex) {
                    captureCellSize = crossRangeCellMeta.getLastCol() - colIndex + 1;
                }
            }
        }
        return captureCellSize;
    }

    /**
     * 获得标题样式
     *
     * @param workbook
     * @return
     */
    private static HSSFCellStyle getTitleStyle(HSSFWorkbook workbook) {
        short titlebackgroundcolor = HSSFColor.GREY_25_PERCENT.index;
        short fontSize = 16;
        String fontName = "宋体";
        HSSFCellStyle style = workbook.createCellStyle();
        style.setAlignment(HSSFCellStyle.ALIGN_CENTER); 
		style.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);
		style.setBorderBottom(HSSFCellStyle.BORDER_THIN); //下边框    
		style.setBorderLeft(HSSFCellStyle.BORDER_THIN);//左边框    
		style.setBorderTop(HSSFCellStyle.BORDER_THIN);//上边框    
		style.setBorderRight(HSSFCellStyle.BORDER_THIN);//右边框 
		style.setWrapText(true);
        
        //style.setFillPattern(HSSFCellStyle.SOLID_FOREGROUND);
        //style.setFillForegroundColor(titlebackgroundcolor);// 背景色

        HSSFFont font = workbook.createFont();
        font.setFontName(fontName);
        font.setFontHeightInPoints(fontSize);
        font.setBoldweight(HSSFFont.BOLDWEIGHT_BOLD);
        style.setFont(font);
        return style;
    }

    /**
     * 获得内容样式
     *
     * @param wb
     * @return
     */
    private static HSSFCellStyle getContentStyle(HSSFWorkbook wb) {
        short fontSize = 12;
        String fontName = "宋体";
        HSSFCellStyle style = wb.createCellStyle();
        style.setAlignment(HSSFCellStyle.ALIGN_CENTER); 
		style.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);
		style.setBorderBottom(HSSFCellStyle.BORDER_THIN); //下边框    
		style.setBorderLeft(HSSFCellStyle.BORDER_THIN);//左边框    
		style.setBorderTop(HSSFCellStyle.BORDER_THIN);//上边框    
		style.setBorderRight(HSSFCellStyle.BORDER_THIN);//右边框 
		style.setWrapText(true);

        HSSFFont font = wb.createFont();
        font.setFontName(fontName);
        font.setFontHeightInPoints(fontSize);
        style.setFont(font);
        return style;
    }


    public static void main(String[] args) {

        String c = new String("<table id=\"targetTable\">\n" +
                "    <thead>\n" +
                "        <tr align=\"center\">\n" +
                "            <th>班级</th>\n" +
                "            <th>姓名</th>\n" +
                "            <th>成绩</th>\n" +
                "        </tr>\n" +
                "    </thead>\n" +
                "    <tbody>\n" +
                "        <tr align=\"center\">\n" +
                "            <td rowspan= \"2\">1班</td>\n" +
                "            <td>小明</td>\n" +
                "            <td>100</td>\n" +
                "        </tr>\n" +
                "        <tr align=\"center\">\n" +
                "            <td>小红</td>\n" +
                "            <td>95.5</td>\n" +
                "        </tr>\n" +
                "    </tbody>\n" +
                "</table>");
        HSSFWorkbook wb = table2Excel(c,"标题测试");
        try {
            FileOutputStream fos = new FileOutputStream(new File("1.xls"));
            wb.write(fos);
            fos.flush();
            fos.close();
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }
}


package com.test;

/**
 * 跨行元素元数据
 *
 */
public class CrossRangeCellMeta {

    public CrossRangeCellMeta(int firstRowIndex, int firstColIndex, int rowSpan, int colSpan) {
        super();
        this.firstRowIndex = firstRowIndex;
        this.firstColIndex = firstColIndex;
        this.rowSpan = rowSpan;
        this.colSpan = colSpan;
    }

    private int firstRowIndex;
    private int firstColIndex;
    private int rowSpan;// 跨越行数
    private int colSpan;// 跨越列数

    int getFirstRow() {
        return firstRowIndex;
    }

    int getLastRow() {
        return firstRowIndex + rowSpan - 1;
    }

    int getFirstCol() {
        return firstColIndex;
    }

    int getLastCol() {
        return firstColIndex + colSpan - 1;
    }

    int getColSpan(){
        return colSpan;
    }
}

2.3、maven包 需要使用到poi

<dependency>
	<groupId>org.apache.poi</groupId>
	<artifactId>poi</artifactId>
	<version>3.10-FINAL</version>
</dependency>

3、h5 及 excel 效果图展示

在这里插入图片描述

4、提示

要是完整的table元素，有table、thead、tbody，传入后端的如下：

<table>
	<thead>
		<tr align="center">
			<th>班级</th>
			<th>姓名</th>
			<th>成绩</th>
		</tr>
	</thead>
	<tbody>
		<tr align="center">
			<td rowspan="2">1班</td>
			<td>小明</td>
			<td>100</td>
		</tr>
		<tr align="center">
			<td>小红</td>
			<td>95.5</td>
		</tr>
	</tbody>
</table>

可以根据自己需要进行相应的修改。
qq_26326457
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5 列表导出为excel
11-01
把table列表导出为excel格式,可自定义表格宽高,表名字,等等.
h5点击下载按钮，下载excel或者word
lll19960406的博客
04-11 1533
根据url下载文件的几种方法 1：直接跳转 window.open(img) 2：直接跳转 window.location.href=img 3：生成a链接跳转 var link = document.createElement('a') link.style.display = 'none' link.href = img //文件路径 ...
微信小程序/H5(UniApp)导入/导出excel文件
prprprpro的博客
02-05 1万+
在微信小程序和H5(UniApp)利用xlsx.js库导入或导出excel文件。
java html excel_关于Java html table表格转excel
weixin_39879651的博客
02-12 289
大致代码在网上百度的，稍微有些改动。完善单元格文字居中，列的宽度随单元格内容改变，合并单元格边框显示不全的问题。package com.wisdombud.szxtyms.business.util;import java.util.ArrayList;import java.util.List;import org.apache.commons.lang3.StringUtils;import ...
H5将网页数据导出为Excel并可下载
热门推荐
丘秋的博客
05-27 1万+
H5将网页数据导出为Excel并可下载 在制作webapp中，遇到个要将数据导出为Excel的问题。我搜索了一下网上的方案，可以直接将HTML的表格导出为Excel文件，这些方法在电脑上确实是可行的，当时如果放到手机上导出的Excel根本不能下载，手机下载文件都是已网络链接的形式，直接导出的文件在手机上是获取不到的。 我搜遍网上的资料都没有发现有讲在手机上将网页数据导出Excel的，于是只能自己去...
java中Excel工具类（可以将生成的Excel文件放在当前环境下 linux/windows）
男色的博客
10-25 857
java中Excel工具类（可以将生成的Excel文件放在当前环境下 linux/windows） public class ExcelUtil { private final static Logger log = Logger.getLogger(ExcelUtil.class); private static Sheet initSheet; static { ...
h5页面excel转json
最新发布
05-27
h5页面excel转json
导入导出Excel方法,很详细
12-03
导入导出Excel方法,工具类.很详细注释很多,下载就可以使用,首先还要做出你要导出的Excel模板,标题,字段对应好
java 微信H5支付Demo
03-29
java 微信H5支付Demo，已经成功使用在项目里，具体业务没有删除，请自动过滤业务层代码
java h5头像上传
06-28
java h5头像上传，2018.6.27写的，头像上传有剪切 后台有图片压缩，项目是maven项目（注意），直接可以跑的！
java读取Excel导出Html对应的table代码
04-15
NULL 博文链接：https://yyang5968.iteye.com/blog/1766745
java后台html 转excel
08-25
该技术从国外某网站上整合而来，仅供参考，勉强可以，但仍需完善
读取Excel文件转换成html
10-26
1：实现了java读取excel数据 2：生成html
java实现任意带table表格的html页面，生成与表格相同内容的excel文件
09-23
要求能够实现给出任意带table表格的html文件，生成与表格相同内容的excel文件，附件可以作为测试文件，提供给定的roster.html文件，通过java代码，实现生成与html页面的table相同样式的roster.xls文件。
html5导出excel文件,将html中table导出到excel xls文件的一种可用方法
weixin_36397256的博客
06-19 478
js中代码：function exportToExcel(tableid){var curTbl = document.getElementById(tableid);var oXL = new ActiveXObject("Excel.Application");var oWB = oXL.Workbooks.Add();var oSheet = oWB.ActiveSheet;var Lenr...
xlsx将html table导出为excel表格
weixin_55510188的博客
04-26 1134
示例中已省略部分无关的代码。 一、安装xlsx $ npm install xlsx --save 二、导出excel方法 将导出excel方法写在混入中，在每个需要的页面混入。 isShowTableColumn 控制不需要打印的列 (XLSX会根据拿到的table的dom来转换成excel，将isShowTableColumn设为false，临时将不需要展示的列从dom中删除)，打印前将isShowTableColumn设为false，等dom更新后（Vue.nextTick方法）再调用XLS
java页面table excel_java导出网页中的表格为Excel
weixin_42644249的博客
02-13 348
将网页中的table数据，导出到excel表格，可以使用java POI实现。java poi是java中操作excel的工具，支持excel的导入与导出，一般有三种形式：1.HSSFWorkbook:是操作Excel2003以前(包括2003)的版本，扩展名是.xls；2.XSSFWorkbook:是操作Excel2007后的版本，扩展名是.xlsx；3.SXSSFWorkbook:是操作Exc...
h5下载预览pdf,excel
静如雪的博客
12-27 2293
需求是微信公众号页面导出pdf, 开始认为php可以实现，找了mpdf,结果高版本只支持php7.0以上的， 又找了mpdf6.0结果发现手机端根本就不能实现。。 好吧还是去前端想办法 canvas去吧 <script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script> <s...
uniapp导出excel 通过java easyexcel
05-17
如果需要在Uniapp中导出Excel文件，一种可行的方法是通过后端Java的EasyExcel库来实现。 以下是大致的实现步骤： 1. 在Uniapp中，通过调用后端Java接口来获取需要导出的数据（可以是JSON格式）。 2. 在后端Java中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值