Overview

SpreadJS supports exporting a range of cells to an HTML string.

Try clicking the Export To HTML button below to convert the spread instance below to an HTML string.

The CellRange class provides the toHtml method that returns the HTML string. The method has 2 optional parameters, headerOptions: Indicates whether to include row header and column header or not, when cell range is whole rows or whole columns in viewport area, it defaults to GC.Spread.Sheets.HeaderOptions.noHeaders. includeStyle: Indicates whether to include style and span or not, it defaults to true. The enum GC.Spread.Sheets.HeaderOptions has 4 options. noHeaders: Includes neither column nor row headers when export range data to HTML. rowHeaders: Includes selected row headers when export range data to HTML. columnHeaders: Includes selected column headers when export range data to HTML. allHeaders: Includes selected headers when export range data to HTML. The following sample code could get the HTML content from the whole Worksheet with row header and column header.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); document.getElementById('btnExport').onclick = function () { var sheet = spread.getActiveSheet(); var html = sheet.getRange(-1, -1, -1, -1).toHtml(GC.Spread.Sheets.HeaderOptions.allHeaders); document.getElementById("htmlContainer").innerHTML = html; }; }; function initSpread(spread) { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.setRowCount(20); sheet.setColumnCount(12); sheet.options.gridline.showVerticalGridline = false; sheet.options.gridline.showHorizontalGridline = false; sheet.options.allowCellOverflow = true; sheet.name("Demo"); sheet.addSpan(1, 1, 1, 3); sheet.setValue(1, 1, "Store"); sheet.addSpan(1, 4, 1, 7); sheet.setValue(1, 4, "Goods"); sheet.addSpan(2, 1, 1, 2); sheet.setValue(2, 1, "Area"); sheet.addSpan(2, 3, 2, 1); sheet.setValue(2, 3, "ID"); sheet.addSpan(2, 4, 1, 2); sheet.setValue(2, 4, "Fruits"); sheet.addSpan(2, 6, 1, 2); sheet.setValue(2, 6, "Vegetables"); sheet.addSpan(2, 8, 1, 2); sheet.setValue(2, 8, "Foods"); sheet.addSpan(2, 10, 2, 1); sheet.setValue(2, 10, "Total"); sheet.setValue(3, 1, "State"); sheet.setValue(3, 2, "City"); sheet.setValue(3, 4, "Grape"); sheet.setValue(3, 5, "Apple"); sheet.setValue(3, 6, "Potato"); sheet.setValue(3, 7, "Tomato"); sheet.setValue(3, 8, "SandWich"); sheet.setValue(3, 9, "Hamburger"); sheet.addSpan(4, 1, 7, 1); sheet.addSpan(4, 2, 3, 1); sheet.addSpan(7, 2, 3, 1); sheet.addSpan(10, 2, 1, 2); sheet.setValue(10, 2, "Sub Total:"); sheet.addSpan(11, 1, 7, 1); sheet.addSpan(11, 2, 3, 1); sheet.addSpan(14, 2, 3, 1); sheet.addSpan(17, 2, 1, 2); sheet.setValue(17, 2, "Sub Total:"); sheet.addSpan(18, 1, 1, 3); sheet.setValue(18, 1, "Total:"); sheet.setValue(4, 1, "NC"); sheet.setValue(4, 2, "Raleigh"); sheet.setValue(7, 2, "Charlotte"); sheet.setValue(4, 3, "001"); sheet.setValue(5, 3, "002"); sheet.setValue(6, 3, "003"); sheet.setValue(7, 3, "004"); sheet.setValue(8, 3, "005"); sheet.setValue(9, 3, "006"); sheet.setValue(11, 1, "PA"); sheet.setValue(11, 2, "Philadelphia"); sheet.setValue(14, 2, "Pittsburgh"); sheet.setValue(11, 3, "007"); sheet.setValue(12, 3, "008"); sheet.setValue(13, 3, "009"); sheet.setValue(14, 3, "010"); sheet.setValue(15, 3, "011"); sheet.setValue(16, 3, "012"); sheet.setFormula(10, 4, "=SUM(E5:E10)"); sheet.setFormula(10, 5, "=SUM(F5:F10)"); sheet.setFormula(10, 6, "=SUM(G5:G10)"); sheet.setFormula(10, 7, "=SUM(H5:H10)"); sheet.setFormula(10, 8, "=SUM(I5:I10)"); sheet.setFormula(10, 9, "=SUM(J5:J10)"); sheet.setFormula(17, 4, "=SUM(E12:E17)"); sheet.setFormula(17, 5, "=SUM(F12:F17)"); sheet.setFormula(17, 6, "=SUM(G12:G17)"); sheet.setFormula(17, 7, "=SUM(H12:H17)"); sheet.setFormula(17, 8, "=SUM(I12:I17)"); sheet.setFormula(17, 9, "=SUM(J12:J17)"); for (var i = 0; i < 14; i++) { sheet.setFormula(4 + i, 10, "=SUM(E" + (5 + i).toString() + ":J" + (5 + i).toString() + ")"); } sheet.setFormula(18, 4, "=E11+E18"); sheet.setFormula(18, 5, "=F11+F18"); sheet.setFormula(18, 6, "=G11+G18"); sheet.setFormula(18, 7, "=H11+H18"); sheet.setFormula(18, 8, "=I11+I18"); sheet.setFormula(18, 9, "=J11+J18"); sheet.setFormula(18, 10, "=K11+K18"); sheet.getRange(1, 1, 3, 10).backColor("#D9D9FF"); sheet.getRange(4, 1, 15, 3).backColor("#D9FFD9"); sheet.getRange(1, 1, 3, 10).hAlign(GC.Spread.Sheets.HorizontalAlign.center); sheet.getRange(1, 1, 18, 10).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), { all: true }); sheet.getRange(4, 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), { inside: true }); sheet.getRange(7, 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), { inside: true }); sheet.getRange(11, 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), { inside: true }); sheet.getRange(14, 4, 3, 6).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), { inside: true }); fillSampleData(sheet, new GC.Spread.Sheets.Range(4, 4, 6, 6)); fillSampleData(sheet, new GC.Spread.Sheets.Range(11, 4, 6, 6)); sheet.setColumnWidth(0, 40); sheet.setColumnWidth(1, 40); sheet.setColumnWidth(3, 40); sheet.setColumnWidth(4, 45); sheet.setColumnWidth(8, 80); sheet.setColumnWidth(9, 80); sheet.setColumnWidth(11, 40); sheet.resumePaint(); } function fillSampleData(sheet, range) { for (var i = 0; i < range.rowCount; i++) { for (var j = 0; j < range.colCount; j++) { sheet.setValue(range.row + i, range.col + j, Math.ceil(Math.random() * 300)); } } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <input type="button" value="Export To HTML" id="btnExport"> <div id="htmlContainer"></div> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 50%; height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 50%; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } #htmlContainer { height: 400px; border: 1px solid lightgray; overflow: scroll; } input { padding: 8px 14px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }