Exports a workbook with a chart and a table to html/svg
In this sample, the chart is exported as a separate SVG image, using the ExcelDrawing.ToSvg method.
Code from the Model class to generate the html/css and svg below
public string Html { get; private set; }
public string Css { get; private set; }
public string SvgChart { get; private set; }
public async Task LoadHtmlAndChartExport()
{
var package = CreateWorkbook(ChartType, ChartStyle, TableStyle);
var sheet = package.Workbook.Worksheets[0];
var exporter = sheet.Cells.CreateHtmlExporter();
var settings = exporter.Settings;
settings.Drawings.Include = eDrawingInclude.IncludeInCssOnly; // Exclude the chart from the HTML export, we will export it as a separate SVG. Optionally you could use the eDrawingInclude.IncludeAsClass option to include the chart in the HTML export as a class.
settings.Culture = CultureInfo.InvariantCulture;
settings.TableId = "currency-table";
settings.AdditionalTableClassNames.Add("table");
settings.AdditionalTableClassNames.Add("table-sm");
settings.AdditionalTableClassNames.Add("table-borderless");
Html = await exporter.GetHtmlStringAsync(); // Get the HTML string for the worksheet without the chart as a table.
Css = await exporter.GetCssStringAsync(); //Get the CSS string for the worksheet without the chart as a table. You could include the drawing in the css as a class, but in this case we want to export the chart as a separate SVG.
SvgChart = sheet.Drawings[0].ToSvg(x => { x.SvgSize.Width.SetPercent(100); x.SvgSize.Height.Remove(); }); //Get the chart as a separate SVG string.
}
public static ExcelPackage CreateWorkbook(SelectedChartType chartType, ePresetChartStyleMultiSeries chartStyle, TableStyles tableStyle)
{
var package = new ExcelPackage();
var sheet = package.Workbook.Worksheets.Add("Html export with svg chart");
var range = sheet.Cells["A1"].LoadFromCollection(_salesData, true, tableStyle);
sheet.Cells["B2:C7"].Style.Numberformat.Format = "#,##0";
sheet.Cells["D2:D7"].Style.Numberformat.Format = "#,##0.00%";
ExcelChart chart;
switch (chartType)
{
case SelectedChartType.ComboChart:
chart = sheet.Drawings.AddChart("RegionalSalesChart", eChartType.ColumnClustered);
var s1 = chart.Series.Add(sheet.Cells["B2:B7"], sheet.Cells["A2:A7"]);
s1.HeaderAddress = sheet.Cells["B1"];
var s2 = chart.Series.Add(sheet.Cells["C2:C7"], sheet.Cells["A2:A7"]);
s2.HeaderAddress = sheet.Cells["C1"];
var lineChartType = chart.PlotArea.ChartTypes.Add(eChartType.Line);
lineChartType.UseSecondaryAxis = true;
var s3 = lineChartType.Series.Add(sheet.Cells["D2:D7"], sheet.Cells["A2:A7"]);
s3.HeaderAddress = sheet.Cells["D1"];
break;
case SelectedChartType.LineChart:
chart = sheet.Drawings.AddChart("RegionalSalesChart", eChartType.LineMarkers);
var s=chart.Series.Add(sheet.Cells["D2:D7"], sheet.Cells["A2:A7"]);
s.HeaderAddress = sheet.Cells["D1"];
break;
case SelectedChartType.ColumnChart:
chart = sheet.Drawings.AddChart("RegionalSalesChart", eChartType.ColumnClustered);
s1 = chart.Series.Add(sheet.Cells["B2:B7"], sheet.Cells["A2:A7"]);
s1.HeaderAddress = sheet.Cells["B1"];
s2 = chart.Series.Add(sheet.Cells["C2:C7"], sheet.Cells["A2:A7"]);
s2.HeaderAddress = sheet.Cells["C1"];
var barChart = chart as ExcelBarChart;
barChart.Overlap = -5;
break;
case SelectedChartType.BarChart:
chart = sheet.Drawings.AddChart("RegionalSalesChart", eChartType.BarClustered);
s1 = chart.Series.Add(sheet.Cells["B2:B7"], sheet.Cells["A2:A7"]);
s1.HeaderAddress = sheet.Cells["B1"];
s2 = chart.Series.Add(sheet.Cells["C2:C7"], sheet.Cells["A2:A7"]);
s2.HeaderAddress = sheet.Cells["C1"];
barChart = chart as ExcelBarChart;
barChart.Overlap = -10;
break;
case SelectedChartType.PieChart:
default:
chart = sheet.Drawings.AddChart("RegionalSalesChart", eChartType.PieExploded);
chart.Series.Add(sheet.Cells["D2:D7"], sheet.Cells["A2:A7"]);
var pieChart = chart as ExcelPieChart;
chart.StyleManager.SetChartStyle(chartStyle);
pieChart.DataLabel.ShowPercent = true;
pieChart.DataLabel.Border.Fill.Style=eFillStyle.SolidFill;
pieChart.DataLabel.Border.Fill.Color = Color.Black;
pieChart.DataLabel.Fill.Style = eFillStyle.SolidFill;
pieChart.DataLabel.Fill.Color = Color.LightCoral;
chart.SetPosition(2, 0, 5, 0);
chart.SetSize(1100, 300);
return package;
}
chart.StyleManager.SetChartStyle(chartStyle);
chart.SetPosition(2,0,5, 0);
chart.SetSize(1100,400);
return package;
}
Code from the View to generate the html/css and svg below
<style>@Html.Raw(Model.Css)</style>
<div class="row mt-3">
<div class="col p-2 m-2">
@Html.Raw(Model.SvgChart)
</div>
</div>
<div class="row mt-3">
<div class="col">
@Html.Raw(Model.Html)
</div>
</div>