Skip to content

HTML & CSS

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

This feature supports integration of spreadsheet data and styling into web applications - and it is not an implementation of Excel's "Save the workbook as html" feature. Our intention is to make EPPlus a useful tool for bringing the spreadsheet model to web applications rather than providing a pixel-perfect html-representation of an existing workbook.

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 in our html sample 1. EPPlus will export css for table styles when exporting a table. NOTE: Exporting a range that contains a table will not include the table styles in the css.

Pictures/Images

Pictures are not included in the export per default. When they are included, they are added to the stylesheet as base64 encoded strings. For more details, see Picture settings.

Limitations

We will add new features to this export over time, but please note that some Excel features such as charts, shapes, pivot tables, sparklines and threaded comments are not included in the export. Full support for conditional formatting was added in version 7.2.

Basic usage

Create Html exporter

You can export html/css either from a range or from a table in your workbook. This is done via the CreateHtmlExporter() function, see below. Please note that table styles are not included in the css, if you export a range that contains a table via the ExcelRangeBase.CreateHtmlExporter().

Export from a range

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

Dim exporter = sheet.Cells("B5:M19").CreateHtmlExporter()
Dim html = exporter.GetHtmlString()
Dim css = exporter.GetCssString()

Export from a table

This export will contain the css for the table style as well as any cell style css.

var exporter = sheet.Tables[0].CreateHtmlExporter();
var html = exporter.GetHtmlString();
var css = exporter.GetCssString();

Dim exporter = sheet.Tables(0).CreateHtmlExporter()
Dim html = exporter.GetHtmlString()
Dim css = exporter.GetCssString()

Export multiple ranges

You can also create an exporter for several ranges at once to get a shared css for multiple ranges over multiple worksheets. Our web sample 6 shows how to do this in detail.

var exporter = package.Workbook.CreateHtmlExporter(
                 package.Workbook.Worksheets[0].Cells["B5:M19"],
                 package.Workbook.Worksheets[1].Cells["A1:D35"]
);

//This will get the html for the first range, B5:M19 in the first sheet
var html1 = exporter.GetHtmlString(0);
//This will get the html for the second range, A1:D35 in the second sheet
var html2 = exporter.GetHtmlString(1);
//This gets the combined css for both ranges.
var css = exporter.GetCssString();

Dim exporter = package.Workbook.CreateHtmlExporter(
                 package.Workbook.Worksheets(0).Cells("B5:M19"),
                 package.Workbook.Worksheets(1).Cells("A1:D35")
)

'This will get the html for the first range, B5:M19 in the first sheet
Dim html1 = exporter.GetHtmlString(0)
'This will get the html for the second range, A1:D35 in the second sheet
Dim html2 = exporter.GetHtmlString(1)
'This gets the combined css for both ranges.
Dim css = exporter.GetCssString()

Methods

There are async versions of GetHtmlString() and GetCssString(), suffixed with "Async". Other methods render html and css on a System.IO.Stream, see RenderHtml(stream), RenderHtmlAsync(stream), RenderCss(stream) and RenderCssAsync(stream).

Table Id and additional table classes

Use the properties below to set the id attribute and add additional css classes on the exported html table.

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

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

More about the html export

  • Settings - All settings for the html, the css and pictures.
  • Data attributes - Use the exported table as a data carrier, with raw values and data types in data-* attributes.
  • Accessibility - Configure the aria-* attributes and roles of the exported table.

See also