Html export - export Conditional Formatting
This sample contains a dropdown list of all supported conditional formattings. Feel free to "get the workbook" fiddle around with the options and export again.
| City | Jan | Feb | Mar | Apr | May | Jun |
|---|---|---|---|---|---|---|
| Barstow | 80 | 84 | 84 | 97 | 95 | 98 |
| California City | 78 | 86 | 84 | 96 | 98 | 102 |
| Cinco | 83 | 86 | 86 | 97 | 95 | 103 |
| Hesperia | 78 | 85 | 87 | 98 | 97 | 102 |
| Lancaster | 78 | 85 | 86 | 99 | 95 | 101 |
| Mojave | 82 | 85 | 86 | 98 | 96 | 99 |
| Palmdale | 81 | 84 | 85 | 98 | 95 | 101 |
| Ridgecrest | 81 | 87 | 87 | 97 | 96 | 98 |
| Rosamond | 82 | 86 | 88 | 99 | 97 | 101 |
| Santa Clarita | 79 | 85 | 87 | 95 | 96 | 103 |
public ExportCf7Model()
{
}
public const string DefaultSample = "tbl3ColorScale";
public string SelectedSample { get; set; }
public IEnumerable AllSamples
{
get
{
return new List
{
new() { Name = "3 Color Scale", TableName = "tbl3ColorScale" },
new() { Name = "Cell Contains", TableName = "cellContainsTbl" },
new() { Name = "Blanks No blanks", TableName = "blanksTbl" },
new() { Name = "Errors No Errors", TableName = "errorsTbl" },
new() { Name = "Top 10", TableName = "top10Tbl" },
new() { Name = "Above and below average", TableName = "averageTbl" },
new() { Name = "Unique and Duplicate", TableName = "uniqueDuplicatesTbl" },
new() { Name = "Custom expression", TableName = "expressionTbl" },
};
}
}
private string GetTableName(string tableName)
{
if(string.IsNullOrWhiteSpace(tableName))
{
return DefaultSample;
}
foreach(var sample in AllSamples)
{
if(string.Compare(sample.TableName, tableName, StringComparison.OrdinalIgnoreCase) == 0)
{
return sample.TableName;
}
}
return DefaultSample;
}
public void SetupSampleData(string tableName = "")
{
var tblName = GetTableName(tableName);
using (var package = new ExcelPackage(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, $"data\\CfExport1.xlsx")))
{
var sheet = package.Workbook.Worksheets[0];
var table = sheet.Tables[tblName];
var exporter = package.Workbook.CreateHtmlExporter(table.Range);
var settings = exporter.Settings;
settings.Minify = false;
settings.Culture = CultureInfo.InvariantCulture;
settings.TableId = "cf-table";
settings.SetColumnWidth = true;
settings.SetRowHeight = true;
sheet.Calculate();
Css = exporter.GetCssString();
Html = exporter.GetHtmlString();
}
}
public string Css { get; set; }
public string Html { get; set; }
Html as it was exported
<table class="epplus-table ts-light9 ts-light9-header ts-light9-row-stripes" id="cf-table" role="table">
<colgroup>
<col style="width:161px" span="1"/>
<col style="width:182px" span="1"/>
<col style="width:168px" span="1"/>
<col style="width:189px" span="1"/>
<col style="width:240px" span="1"/>
<col style="width:148px" span="1"/>
<col style="width:184px" span="1"/>
</colgroup>
<thead role="rowgroup">
<tr role="row" class="epp-drh">
<th data-datatype="string" class="epp-al">City</th>
<th data-datatype="number" class="epp-al">Jan</th>
<th data-datatype="number" class="epp-al">Feb</th>
<th data-datatype="number" class="epp-al">Mar</th>
<th data-datatype="number" class="epp-al">Apr</th>
<th data-datatype="number" class="epp-al">May</th>
<th data-datatype="number" class="epp-al">Jun</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" scope="row" class="epp-drh">
<td role="cell">Barstow</td>
<td data-value="80" role="cell" class="epp-ar" style="background-color:#7ac57c;">80</td>
<td data-value="84" role="cell" class="epp-ar" style="background-color:#abd37f;">84</td>
<td data-value="84" role="cell" class="epp-ar" style="background-color:#abd37f;">84</td>
<td data-value="97" role="cell" class="epp-ar" style="background-color:#fcaa78;">97</td>
<td data-value="95" role="cell" class="epp-ar" style="background-color:#fdbf7c;">95</td>
<td data-value="98" role="cell" class="epp-ar" style="background-color:#fb9e75;">98</td>
</tr>
<tr role="row" scope="row" class="epp-drh">
<td role="cell">California City</td>
<td data-value="78" role="cell" class="epp-ar" style="background-color:#63be7b;">78</td>
<td data-value="86" role="cell" class="epp-ar" style="background-color:#c4da81;">86</td>
<td data-value="84" role="cell" class="epp-ar" style="background-color:#abd37f;">84</td>
<td data-value="96" role="cell" class="epp-ar" style="background-color:#fcb479;">96</td>
<td data-value="98" role="cell" class="epp-ar" style="background-color:#fb9e75;">98</td>
<td data-value="102" role="cell" class="epp-ar" style="background-color:#f9736d;">102</td>
</tr>
<tr role="row" scope="row" class="epp-drh">
<td role="cell">Cinco</td>
<td data-value="83" role="cell" class="epp-ar" style="background-color:#a0d07f;">83</td>
<td data-value="86" role="cell" class="epp-ar" style="background-color:#c4da81;">86</td>
<td data-value="86" role="cell" class="epp-ar" style="background-color:#c4da81;">86</td>
<td data-value="97" role="cell" class="epp-ar" style="background-color:#fcaa78;">97</td>
<td data-value="95" role="cell" class="epp-ar" style="background-color:#fdbf7c;">95</td>
<td data-value="103" role="cell" class="epp-ar" style="background-color:#f8696b;">103</td>
</tr>
<tr role="row" scope="row" class="epp-drh">
<td role="cell">Hesperia</td>
<td data-value="78" role="cell" class="epp-ar" style="background-color:#63be7b;">78</td>
<td data-value="85" role="cell" class="epp-ar" style="background-color:#b7d680;">85</td>
<td data-value="87" role="cell" class="epp-ar" style="background-color:#cfdd81;">87</td>
<td data-value="98" role="cell" class="epp-ar" style="background-color:#fb9e75;">98</td>
<td data-value="97" role="cell" class="epp-ar" style="background-color:#fcaa78;">97</td>
<td data-value="102" role="cell" class="epp-ar" style="background-color:#f9736d;">102</td>
</tr>
<tr role="row" scope="row" class="epp-drh">
<td role="cell">Lancaster</td>
<td data-value="78" role="cell" class="epp-ar" style="background-color:#63be7b;">78</td>
<td data-value="85" role="cell" class="epp-ar" style="background-color:#b7d680;">85</td>
<td data-value="86" role="cell" class="epp-ar" style="background-color:#c4da81;">86</td>
<td data-value="99" role="cell" class="epp-ar" style="background-color:#fa9473;">99</td>
<td data-value="95" role="cell" class="epp-ar" style="background-color:#fdbf7c;">95</td>
<td data-value="101" role="cell" class="epp-ar" style="background-color:#f97f6f;">101</td>
</tr>
<tr role="row" scope="row" class="epp-drh">
<td role="cell">Mojave</td>
<td data-value="82" role="cell" class="epp-ar" style="background-color:#93cc7e;">82</td>
<td data-value="85" role="cell" class="epp-ar" style="background-color:#b7d680;">85</td>
<td data-value="86" role="cell" class="epp-ar" style="background-color:#c4da81;">86</td>
<td data-value="98" role="cell" class="epp-ar" style="background-color:#fb9e75;">98</td>
<td data-value="96" role="cell" class="epp-ar" style="background-color:#fcb479;">96</td>
<td data-value="99" role="cell" class="epp-ar" style="background-color:#fa9473;">99</td>
</tr>
<tr role="row" scope="row" class="epp-drh">
<td role="cell">Palmdale</td>
<td data-value="81" role="cell" class="epp-ar" style="background-color:#87c87d;">81</td>
<td data-value="84" role="cell" class="epp-ar" style="background-color:#abd37f;">84</td>
<td data-value="85" role="cell" class="epp-ar" style="background-color:#b7d680;">85</td>
<td data-value="98" role="cell" class="epp-ar" style="background-color:#fb9e75;">98</td>
<td data-value="95" role="cell" class="epp-ar" style="background-color:#fdbf7c;">95</td>
<td data-value="101" role="cell" class="epp-ar" style="background-color:#f97f6f;">101</td>
</tr>
<tr role="row" scope="row" class="epp-drh">
<td role="cell">Ridgecrest</td>
<td data-value="81" role="cell" class="epp-ar" style="background-color:#87c87d;">81</td>
<td data-value="87" role="cell" class="epp-ar" style="background-color:#cfdd81;">87</td>
<td data-value="87" role="cell" class="epp-ar" style="background-color:#cfdd81;">87</td>
<td data-value="97" role="cell" class="epp-ar" style="background-color:#fcaa78;">97</td>
<td data-value="96" role="cell" class="epp-ar" style="background-color:#fcb479;">96</td>
<td data-value="98" role="cell" class="epp-ar" style="background-color:#fb9e75;">98</td>
</tr>
<tr role="row" scope="row" class="epp-drh">
<td role="cell">Rosamond</td>
<td data-value="82" role="cell" class="epp-ar" style="background-color:#93cc7e;">82</td>
<td data-value="86" role="cell" class="epp-ar" style="background-color:#c4da81;">86</td>
<td data-value="88" role="cell" class="epp-ar" style="background-color:#dbe182;">88</td>
<td data-value="99" role="cell" class="epp-ar" style="background-color:#fa9473;">99</td>
<td data-value="97" role="cell" class="epp-ar" style="background-color:#fcaa78;">97</td>
<td data-value="101" role="cell" class="epp-ar" style="background-color:#f97f6f;">101</td>
</tr>
<tr role="row" scope="row" class="epp-drh">
<td role="cell">Santa Clarita</td>
<td data-value="79" role="cell" class="epp-ar" style="background-color:#6fc27c;">79</td>
<td data-value="85" role="cell" class="epp-ar" style="background-color:#b7d680;">85</td>
<td data-value="87" role="cell" class="epp-ar" style="background-color:#cfdd81;">87</td>
<td data-value="95" role="cell" class="epp-ar" style="background-color:#fdbf7c;">95</td>
<td data-value="96" role="cell" class="epp-ar" style="background-color:#fcb479;">96</td>
<td data-value="103" role="cell" class="epp-ar" style="background-color:#f8696b;">103</td>
</tr>
</tbody>
</table>
table.epplus-table{
font-family:Aptos Narrow;
font-size:11pt;
border-spacing:0;
border-collapse:collapse;
word-wrap:break-word;
white-space:nowrap;
}
.epp-hidden {
display:none;
}
.epp-al {
text-align:left;
}
.epp-ar {
text-align:right;
}
.epp-dcw {
width:64px;
}
.epp-drh {
height:20px;
}
table.epplus-table.ts-light9 a{
color:#000000;
}
table.epplus-table.ts-light9{
color:#000000;
border-top:thin solid #156082;
border-bottom:thin solid #156082;
border-left:thin solid #156082;
border-right:thin solid #156082;
}
table.epplus-table.ts-light9 thead{
background-color:#156082;
color:#ffffff;
font-weight:bolder;
}
table.epplus-table.ts-light9 tfoot{
color:#000000;
font-weight:bolder;
border-top:double #156082;
}
table.epplus-table.ts-light9-column-stripes tbody tr td:nth-child(odd){
border-left:thin solid #156082;
}
table.epplus-table.ts-light9-column-stripes tbody tr td:nth-child(even){
border-left:thin solid #156082;
}
table.epplus-table.ts-light9-row-stripes tbody tr:nth-child(odd){
border-top:thin solid #156082;
}
table.epplus-table.ts-light9-row-stripes tbody tr:nth-child(even){
border-top:thin solid #156082;
}
table.epplus-table.ts-light9-last-column tbody tr td:last-child{
color:#000000;
font-weight:bolder;
}
table.epplus-table.ts-light9-first-column tbody tr td:first-child{
color:#000000;
font-weight:bolder;
}