区域导出为HTML

SpreadJS支持将一系列单元格导出为HTML字符串。

尝试单击下面的Export to HTML按钮,将下面的Spread实例转换为HTML字符串。

CellRange 类提供了 toHtml 这个可以返回HTML字符串的方法。 该方法有2个可选参数, headerOptions: 指示是否包含行标题和列标题,当单元格区域是视图区域中的整个行或整个列时,默认为GC.Spread.Sheets.HeaderOptions.noHeaders. includeStyle: 指示是否包括样式和范围,默认是true. 枚举GC.Spread.Sheets.HeaderOptions 具有四个选项。 noHeaders: 将区域数据导出到HTML时,既不包含列标题也不包含行标题。 rowHeaders: 将区域数据导出到HTML时,包括选定的行标题。 columnHeaders: 将区域数据导出到HTML时,包括选定的列标题。 allHeaders: 将区域数据导出到HTML时,包括选定的标题。 下面的示例代码可以从整个工作表中获取带有行标题和列标题的HTML内容。
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="spreadjs culture" content="zh-cn" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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; }