Java導出easyui的table+echarts的圖片爲Excel

由於項目使用的是easyui，現在需要做一個導出Excel功能，Excel內包含表格內容和圖片信息。查看easyui的官網發現有擴展datagrid-export.js可以在前端導出excel，於是拿來使用，發現無法導出多級表頭，改寫源碼後可以導出多級表頭的excel，但是沒法在前端導出echarts的base64編碼的圖片。因此使用Java後臺採用poi來導出excel。考慮到前面已經在前端由table導出excel成功，想着可不可以直接傳table到後臺導出excel，網上搜索一翻，發現這位老哥做了，真是好人，於是借鑑一下，同時加上導出圖片，在此記錄一下。提醒一下，導出的Excel有可能在本地的可以打開，服務器上的顯示打開損壞，可以參考此篇文章。

poi依賴包

<!-- poi -->
<dependency>
	<groupId>org.apache.poi</groupId>
	<artifactId>poi-ooxml</artifactId>
	<version>3.17</version>
</dependency>

跨行元素元數據類

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;// 跨越列數

    public int getFirstRow() {
        return firstRowIndex;
    }

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

    public int getFirstCol() {
        return firstColIndex;
    }

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

    public int getColSpan(){
        return colSpan;
    }
}

主程序table轉excel

import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

import javax.imageio.ImageIO;

import org.apache.commons.lang3.StringUtils;
import org.apache.commons.lang3.math.NumberUtils;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFCellStyle;
import org.apache.poi.hssf.usermodel.HSSFClientAnchor;
import org.apache.poi.hssf.usermodel.HSSFFont;
import org.apache.poi.hssf.usermodel.HSSFPatriarch;
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.HSSFColorPredefined;
import org.apache.poi.ss.usermodel.HorizontalAlignment;
import org.apache.poi.ss.usermodel.VerticalAlignment;
import org.apache.poi.ss.util.CellRangeAddress;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;

public class ConvertHtml2Excel {

	/**
     * html表格轉excel
     *
     * @param tableHtml 如
     *            <table>
     *            ..
     *            </table>
     * @return
     */
    @SuppressWarnings("unchecked")
	public static HSSFWorkbook table2Excel(String tableHtml, String base64Img, String picPath) {
        HSSFWorkbook wb = new HSSFWorkbook();
        HSSFSheet sheet = wb.createSheet();

        HSSFCellStyle style = wb.createCellStyle();
        style.setAlignment(HorizontalAlignment.CENTER);

        List<CrossRangeCellMeta> crossRowEleMetaLs = new ArrayList<>();
        int rowIndex = 0;
        try {
            Document data = DocumentHelper.parseText(tableHtml);
            // 生成表頭
            Element thead = data.getRootElement().element("thead");
            HSSFCellStyle titleStyle = getTitleStyle(wb);
            if (thead != null) {
                List<Element> trLs = thead.elements("tr");
                for (Element trEle : trLs) {
                    HSSFRow row = sheet.createRow(rowIndex);
                    List<Element> thLs = trEle.elements("th");
                    makeRowCell(thLs, rowIndex, row, 0, titleStyle, crossRowEleMetaLs);
                    row.setHeightInPoints(17);
                    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(18);
                    rowIndex++;
                }
            }
            // 合併表頭
            for (CrossRangeCellMeta crcm : crossRowEleMetaLs) {
            	CellRangeAddress region = new CellRangeAddress(crcm.getFirstRow(), crcm.getLastRow(), crcm.getFirstCol(), crcm.getLastCol());
                sheet.addMergedRegion(region);
            }
        } catch (DocumentException e) {
            e.printStackTrace();
        }
        //自動調整列寬
        for (int i = 0; i < sheet.getRow(0).getPhysicalNumberOfCells(); i++) {
            sheet.autoSizeColumn((short)i);
        }
        insertImg2Excel(sheet, wb, base64Img, picPath);
        return wb;
    }
    
    @SuppressWarnings("static-access")
	public static void insertImg2Excel(HSSFSheet sheet, HSSFWorkbook wb, String imgUrl, String picPath) {
    	BufferedImage bufferImg = null;
    	try {
    		String[] imgUrlArr = imgUrl.split("base64,");//拆分base64編碼後部分
    		org.bouncycastle.util.encoders.Base64 decode = new org.bouncycastle.util.encoders.Base64();
    		byte[] buffer = decode.decode(imgUrlArr[1]);
    		File file = new File(picPath);//圖片文件
    		//生成圖片
    		OutputStream out = new FileOutputStream(file);//圖片輸出流   
    		out.write(buffer);
    		out.flush();//清空流
    		out.close();//關閉流
			ByteArrayOutputStream byteArrayOut = new ByteArrayOutputStream();   
			//            bufferImg = ImageIO.read(new File("D:/WatchFileTest/下載.png"));   
			bufferImg = ImageIO.read(new File(picPath));   
			ImageIO.write(bufferImg, "PNG", byteArrayOut);
			
			//畫圖的頂級管理器，一個sheet只能獲取一個（一定要注意這點）
			HSSFPatriarch patriarch = sheet.createDrawingPatriarch();   
			//anchor主要用於設置圖片的屬性
			HSSFClientAnchor anchor = new HSSFClientAnchor(0, 0, 0, 0,(short) 1, sheet.getPhysicalNumberOfRows()+2, (short) 23, sheet.getPhysicalNumberOfRows()+30);   
			//合併圖片所在區域的單元格
			CellRangeAddress region = new CellRangeAddress(sheet.getPhysicalNumberOfRows()+1, sheet.getPhysicalNumberOfRows()+30, 0, 23);
            sheet.addMergedRegion(region);
			//插入圖片  
			patriarch.createPicture(anchor, wb.addPicture(byteArrayOut.toByteArray(), HSSFWorkbook.PICTURE_TYPE_JPEG)); 
			// 寫入excel文件   
			System.out.println("----Excle插入圖片已生成------");
			if(file.exists()) {
				file.delete();
			}
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 生產行內容
     *
     * @return 最後一列的cell index
     */
    /**
     * @param tdLs th或者td集合
     * @param rowIndex 行號
     * @param row POI行對象
     * @param startCellIndex
     * @param cellStyle 樣式
     * @param crossRowEleMetaLs 跨行元數據集合
     * @return
     */
    @SuppressWarnings("deprecation")
	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 fontSize = 12;
        String fontName = "宋體";
        HSSFCellStyle style = workbook.createCellStyle();
        style.setAlignment(HorizontalAlignment.CENTER);
		style.setVerticalAlignment(VerticalAlignment.CENTER);

        HSSFFont font = workbook.createFont();
        font.setFontName(fontName);
        font.setFontHeightInPoints(fontSize);
        // 粗體顯示
        font.setBold(true);
        style.setFont(font);
        style.setFillForegroundColor(HSSFColorPredefined.LIGHT_YELLOW.getIndex());
        return style;
    }

    /**
     * 獲得內容樣式
     *
     * @param wb
     * @return
     */
    private static HSSFCellStyle getContentStyle(HSSFWorkbook wb) {
        short fontSize = 12;
        String fontName = "宋體";
        HSSFCellStyle style = wb.createCellStyle();
        style.setAlignment(HorizontalAlignment.CENTER);
		style.setVerticalAlignment(VerticalAlignment.CENTER);

        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>1</td>\n" +
                "            <td>小明</td>\n" +
                "            <td>100</td>\n" +
                "        </tr>\n" +
                "        <tr align=\"center\">\n" +
                "            <td>2</td>\n" +
                "            <td>小紅</td>\n" +
                "            <td>95.5</td>\n" +
                "        </tr>\n" +
                "    </tbody>\n" +
                "</table>");
    	String base64Img = "這個數據太長了，就不放了，可以自己在網上找一下";
        String picPath = "D:/WatchFileTest"+ "/"+ UUID.randomUUID().toString() +".png"; 
        HSSFWorkbook wb = table2Excel(c, base64Img, picPath);
        try {
            FileOutputStream fos = new FileOutputStream(new File("D:/1.xls"));
            wb.write(fos);
            fos.flush();
            fos.close();
            System.out.println("表格導出成功！！！");
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
	}
}

Controller類

import java.io.IOException;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.UUID;

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 org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/file/export")
public class ExportCheckExcelController {

	@RequestMapping(value = "/html2Excel", method = RequestMethod.POST)
	@ResponseBody
	public void html2Excel(HttpServletRequest request, HttpServletResponse response) throws Exception{
		request.setCharacterEncoding("utf-8");
		//臨時存放圖片文件path
		String picPath = request.getSession().getServletContext().getRealPath("")+UUID.randomUUID().toString() +".png";
		picPath = picPath.replaceAll("\\\\", "/");
		System.out.println(picPath);
		String excelName = request.getParameter("excelName");
		String base64Img = request.getParameter("base64Img");
		String tableHtml = request.getParameter("tableHtml");
		OutputStream out = null;  
		HSSFWorkbook wb = ConvertHtml2Excel.table2Excel(tableHtml, base64Img, picPath);
		try {
            excelName = URLEncoder.encode(excelName, "utf-8");
        } catch (UnsupportedEncodingException e1) {
            e1.printStackTrace();
        }
        try {        
            out = response.getOutputStream();    
            response.setContentType("application/vnd.ms-excel");    
            response.setCharacterEncoding("utf-8");  
            response.setHeader("content-disposition", "attachment;filename=" + excelName + ".xls;filename*=utf-8''" + excelName + ".xls");
            wb.write(out);   
            System.out.println("表格導出成功！！！");
        } catch (Exception e) {    
            e.printStackTrace();    
        } finally {      
            try {       
                out.close();      
            } catch (IOException e) {      
                e.printStackTrace();    
            }      
        }
	}
}

改寫後的datagrid-export.js

(function($){
    function getRows(target){
        var state = $(target).data('datagrid');
        if (state.filterSource){
            return state.filterSource.rows;
        } else {
            return state.data.rows;
        }
    }
    function getFooterRows(target){
        var state = $(target).data('datagrid');
        return state.data.footer || [];
    }
    //主要修改部分
    function toHtml(target, region, rows, footer, caption){
        rows = rows || getRows(target);
        rows = rows.concat(footer||getFooterRows(target));
        var dg = $(target);
        var data = ['<table border="1" rull="all" style="border-collapse:collapse">'];
		var firstHeads = dg.datagrid("options").frozenColumns[0].concat(dg.datagrid("options").columns[0]);
		var twoHeads = dg.datagrid("options").columns[1];
        var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields',false));
        var trStyle = 'height:32px';
        var tdStyle0 = 'vertical-align:middle;padding:0 4px';
        if (caption){
            data.push('<caption>'+caption+'</caption>');
        }
		data.push('<thead>');
        data.push('<tr style="'+trStyle+'">');
        for(var i=0; i<firstHeads.length; i++){
            data.push('<th colspan="'+firstHeads[i].colspan+'" rowspan="'+firstHeads[i].rowspan+'" style="'+tdStyle0+'">'+firstHeads[i].title+'</th>');
        }
        data.push('</tr>');
		data.push('<tr style="'+trStyle+'">');
		for(var i=0; i<twoHeads.length; i++){
            var col = dg.datagrid('getColumnOption', twoHeads[i].field);
            var tdStyle = tdStyle0 + ';width:'+col.width;
            tdStyle += ';text-align:'+(col.halign||col.align||'');
			data.push('<th style="'+tdStyle+'">'+col.title+'</th>');
        }
        data.push('</tr>');
		data.push('</thead>');
		data.push('<tbody>');
        $.map(rows, function(row){
            data.push('<tr style="'+trStyle+'">');
            for(var i=0; i<fields.length; i++){
                var field = fields[i];
                var col   = dg.datagrid('getColumnOption', field);
                var value = row[field];
                if (value == undefined){
                    value = '-';
                }
				if(field=="regionName"){
					value = region;
				}else if(field=="forecastName"){
					value = region;
				}
                var tdStyle = tdStyle0;
                tdStyle += ';text-align:'+(col.align||'');
                data.push(
                    '<td style="'+tdStyle+'">'+value+'</td>'
                );
            }
            data.push('</tr>');
        });
		data.push('</tbody>');
        data.push('</table>');
        return data.join('');
    }

    function toArray(target, rows){
        rows = rows || getRows(target);
        var dg = $(target);
        var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields',false));
        var data = [];
        var r = [];
        for(var i=0; i<fields.length; i++){
            var col = dg.datagrid('getColumnOption', fields[i]);
            r.push(col.title);
        }
        data.push(r);
        $.map(rows, function(row){
            var r = [];
            for(var i=0; i<fields.length; i++){
                r.push(row[fields[i]]);
            }
            data.push(r);
        });
        return data;
    }

    function print(target, param){
        var title = null;
        var rows = null;
        var footer = null;
        var caption = null;
        if (typeof param == 'string'){
            title = param;
        } else {
            title = param['title'];
            rows = param['rows'];
            footer = param['footer'];
            caption = param['caption'];
        }
        var newWindow = window.open('', '', 'width=800, height=500');
        var document = newWindow.document.open();
        var content = 
            '<!doctype html>' +
            '<html>' +
            '<head>' +
            '<meta charset="utf-8">' +
            '<title>'+title+'</title>' +
            '</head>' +
            '<body>' + toHtml(target, rows, footer, caption) + '</body>' +
            '</html>';
        document.write(content);
        document.close();
        newWindow.print();
    }

    function b64toBlob(data){
        var sliceSize = 512;
        var chars = atob(data);
        var byteArrays = [];
        for(var offset=0; offset<chars.length; offset+=sliceSize){
            var slice = chars.slice(offset, offset+sliceSize);
            var byteNumbers = new Array(slice.length);
            for(var i=0; i<slice.length; i++){
                byteNumbers[i] = slice.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }
        return new Blob(byteArrays, {
            type: ''
        });
    }

    function toExcel(target, param){
        var filename = null;
        var rows = null;
        var footer = null;
        var caption = null;
        var worksheet = 'Worksheet';
		var regions = null;
        if (typeof param == 'string'){
            filename = param;
        } else {
            filename = param.filename;
            //rows = param['rows'];
            //footer = param['footer'];
            caption = param.caption;
            //worksheet = param['worksheet'] || 'Worksheet';
			regions = param.regions;
        }
        var dg = $(target);
        var uri = 'data:application/vnd.ms-excel;base64,'
        , template = '<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"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>{table}</body></html>'
        , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
        , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
        
        var table = toHtml(target, region, rows, footer, caption);
//        console.log(table);
        var ctx = { worksheet: worksheet, table: table };
        var data = base64(format(template, ctx));
        if (window.navigator.msSaveBlob){
            var blob = b64toBlob(data);
            window.navigator.msSaveBlob(blob, filename);
        } else {
            var alink = $('<a style="display:none"></a>').appendTo('body');
            alink[0].href = uri + data;
            alink[0].download = filename;
            alink[0].click();
            alink.remove();
        }
    }

    $.extend($.fn.datagrid.methods, {
        toHtml: function(jq, rows){
            return toHtml(jq[0], rows);
        },
        toArray: function(jq, rows){
            return toArray(jq[0], rows);
        },
        toExcel: function(jq, param){
            return jq.each(function(){
                toExcel(this, param);
            });
        },
        print: function(jq, param){
            return jq.each(function(){
                print(this, param);
            });
        }
    });
})(jQuery);

前端請求導出excel

function httpPost(URL, PARAMS) {
    var temp = document.createElement("form");
    temp.action = URL;
    temp.method = "post";
    temp.style.display = "none";

    for (var x in PARAMS) {
        var opt = document.createElement("textarea");
        opt.name = x;
        opt.value = PARAMS[x];
        temp.appendChild(opt);
    }

    document.body.appendChild(temp);
    temp.submit();
    document.body.removeChild(temp);
}
// 導出Excel
function exportExcel(){
	// 獲取table
	var table = $('#tt').datagrid('toHtml', regionForeTypeName, null, null, '名字');
	var param = {
		excelName: '名字',
		base64Img: myChartInstance.getDataURL(), // 獲取echarts的圖片信息
		tableHtml: table,
	}
	httpPost("${contextPath}/file/export/html2Excel", param);
}

結果

Java導出easyui的table+echarts的圖片爲Excel

cesium繪製不同顏色的多段線（SimplePolylineGeometry）

cesium採用primitive方式加載geojson數據

氣象netCDF數據可視化分析

cesium實現加載城市三維建築物

D3js畫三維地球

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結