HTML Export

EPPlus 6 introduces the ability to export a table or a range to HTML/CSS. The best way to get started with this functionality is to have a look at the examples in our web samples project

Overview

The purpose of this functionality is to support integration of spreadsheet data and styling into web applications.

Html

The spreadsheet data is always exported as a html table. The html has support for accessibility (aria-*) attributes that can be configured when exporting the data. You can also get the raw cell data and javascript compatible datatypes included via data-* attributes in order to use the exported table not only as a UI element but also as a data carrier.

Style/css

EPPlus separates styling from html and creates a separate stylesheet (css) for the exported data. The classes in this stylesheet are created based on the internal Excel styles. This is per default based on the built in Office theme, but you can easily switch to another theme as demonstrated our html sample 1.

Images

Images in the cells will be included by default as base64 encoded strings in the stylesheet.

Limitations

This is not an implementation of Excel's "Save the workbook as html" feature. We will add new features to this export over time, but please note that Excel features such as charts, shapes, pivot tables and conditional formatting is not included in the export.

Basic usage

Create Html exporter

You can export html/css either from a range or from a a table in your workbook. This is done via the CreateHtmlExporter() function, see below:

// export from a range
var exporter = sheet.Cells["B5:M19"].CreateHtmlExporter();
var html = exporter.GetHtmlString();
var css = exporter.GetCssString();

// ...or from a table
var exporter = sheet.Tables[0].CreateHtmlExporter();
var html = exporter.GetHtmlString();
var css = exporter.GetCssString();

Table Id and addtional table classes

var settings = exporter.Settings;
settings.TableId = "currency-table";
settings.AdditionalTableClassNames.Add("table");
settings.AdditionalTableClassNames.Add("table-sm");
settings.AdditionalTableClassNames.Add("table-borderless");

The data-* attributes

In html you can add custom attributes that is prefixed with "data-". In EPPlus we have added two attributes to the exported table elements: data-value and data-datatype.

Our web sample 4 demonstrates how these attributes can be used.

data-datatype

This attribute is added either on the table.thead.tr.th element or on the table.tbody.tr.td element. See the table below for how the .NET datatypes from EPPlus are mapped to the exported html.

.NET data type	Exported datatype name	Comment
bool	boolean	Exported as 1/0
Byte, Sbyte, UInt16, UInt32, UInt64, Int16, Int32, Int64, Decimal, Double, Single (float)	number	All types mapped to the single number datatype
DateTime	datetime	Exported to milliseconds before/after January 1, 1970.
TimeSpan	timespan	Exported as a numeric value, total milliseconds
string (an all other datatypes)	string	Exported as-is

See below how the data-datatype attribute is included in the html of an exported table.

<thead role="rowgroup">
    <tr role="row">
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">Country</th>
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">FirstName</th>
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">LastName</th>
      <th data-datatype="datetime" class="epp-al" role="columnheader" scope="col">BirthDate</th>
      <th data-datatype="string" class="epp-al" role="columnheader" scope="col">City</th>
    </tr>
  </thead>

data-value

This attribute will contain the raw value of the cell, see the datatypes table above. Here is an example:

<tr role="row" scope="row">
  <td role="cell">Scotland</td>
  <td role="cell">Autumn</td>
  <td role="cell">Toy</td>
  <td data-value="-1485302400000" role="cell" class="epp-ar">1922-12-08</td>
  <td role="cell">New Andrewhaven</td>
</tr>

Note that this attribute is only present if the raw value differs from the formatted value (the content of the td element).

Accessibility attributes

Accessibility attributes are included by default. Here is an example on how to set the aria-label attribute on the exported table:

var exporter = sheet.Cells["B5:M19"].CreateHtmlExporter();
var settings = exporter.Settings.Accessibility.TableSettings.AriaLabel = "This html-table is exported from EPPlus";

results in:

<table class="epplus-table" role="table" aria-label="This html-table is is exported from EPPlus">

If you don't want to include accessibility attributes in the html set the below property to false:

exporter.Settings.Accessibility.TableSettings.AddAccessibilityAttributes = false;

Via the exporter's Settings.Accessibility.TableSettings property you can set the following attributes:

EPPlus attribute	Html attribute	Html element	Default value
AriaLabel	aria-label	table	null
AriaLabelledBy	aria-labelledby	table	null
AriaDescribedBy	aria-describedby	table	null
TableRole	role	table	table
TheadRole	role	table.thead	rowgroup
TbodyRole	role	table.tbody	rowgroup
TfootRole	role	table.tfoot	rowgroup
TableHeaderCellRole	role	table.thead.tr.td	columnheader