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.
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@mescius/spread-sheets-angular'; import GC from '@mescius/spread-sheets'; import './styles.css'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { spread: GC.Spread.Sheets.Workbook; hostStyle = { width: '50%', height: '100%', overflow: 'hidden', float: 'left' }; initSpread($event: any) { this.spread = $event.spread; let spread = this.spread; let 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 (let 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 }); this.fillSampleData(sheet, new GC.Spread.Sheets.Range(4, 4, 6, 6)); this.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(); } handelExport(htmlContainer: HTMLDivElement) { let sheet = this.spread.getActiveSheet(); let html = sheet.getRange(-1, -1, -1, -1).toHtml(GC.Spread.Sheets.HeaderOptions.allHeaders); htmlContainer.innerHTML = html; } fillSampleData(sheet: GC.Spread.Sheets.Worksheet, range: GC.Spread.Sheets.Range) { for (let i = 0; i < range.rowCount; i++) { for (let j = 0; j < range.colCount; j++) { sheet.setValue(range.row + i, range.col + j, Math.ceil(Math.random() * 300)); } } } } @NgModule({ imports: [BrowserModule, SpreadSheetsModule], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Polyfills --> <script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.import('@angular/compiler'); System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('$DEMOROOT$/en/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="sample-tutorial"> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> </gc-spread-sheets> <div class="options-container"> <div class="option-row"> <input type="button" value="Export To HTML" id="btnExport" (click) = "handelExport(htmlContainer)" /> <div id="htmlContainer" #htmlContainer></div> </div> </div> </div>
.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; }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/fesm2015/zone.min.js', 'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/fesm2022', '@angular/common': 'npm:@angular/common/fesm2022/common.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': './plugin.js', 'tslib':'npm:tslib/tslib.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, "node_modules/@angular": { defaultExtension: 'mjs' }, "@mescius/spread-sheets-angular": { defaultExtension: 'mjs' }, '@angular/core': { defaultExtension: 'mjs', main: 'core.mjs' } } }); })(this);