轉，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>
可以根據自己需要進行相應的修改。