Export Charts as Base64 Images and Set Borders to Tables in Excel to HTML Conversion

Rohin_Rana · February 4, 2023, 6:21am

Dear concern,

I am a software programmer and my company has aspose license.

I am having an issue with exporting HTML from an excel.
Excel has charts in it and I am exporting them as Base64 images in HTML. But the first image overlaps with second image in HTML, as I see Aspose adds a margin-left:6px. please see below the HTML in yellow.
I would appreciate it if you could help me with this.

Below is the HTMl Produced by Aspose and code snippet:

<td height='20' width='64' style='height:15pt;width:48pt;' align='left' valign='top'><span style='mso-ignore:vglayout;position:absolute;z-index:6;margin-left:6px;margin-top:6px;width:332px;height:360px'><img width='332' height='360' src="data:image/png;base64," name='Chart 7'></span><span style='mso-ignore:vglayout2'><table cellpadding='0' cellspacing='0'><tr><td height='20' width='64' style='height:15pt;width:48pt;border:none;'></td></tr></table></span></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td height='20' width='64' style='height:15pt;width:48pt;' align='left' valign='top'><span style='mso-ignore:vglayout;position:absolute;z-index:7;margin-left:-8px;margin-top:6px;width:332px;height:360px'><img width='332' height='360' src="data:image/png;base64," name='Chart 8'></span><span style='mso-ignore:vglayout2'><table cellpadding='0' cellspacing='0'><tr><td height='20' width='64' style='height:15pt;width:48pt;border:none;'></td></tr></table></span></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td height='20' width='64' style='height:15pt;width:48pt;' align='left' valign='top'><span style='mso-ignore:vglayout;position:absolute;z-index:8;margin-left:10px;margin-top:6px;width:332px;height:360px'><img width='332' height='360' src="data:image/png;base64," name='Chart 9'></span><span style='mso-ignore:vglayout2'><table cellpadding='0' cellspacing='0'><tr><td height='20' width='64' style='height:15pt;width:48pt;border:none;'></td></tr></table></span></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

My Code snippet is as below

ws = wb.Worksheets[sheetName];
ws.PageSetup.PrintArea = A1:G100;
ws.AutoFitColumns();

ws.AutoFitRows();

//// Set all margins as 0

ws.PageSetup.LeftMargin = 0;

ws.PageSetup.RightMargin = 0;

ws.PageSetup.TopMargin = 0;

ws.PageSetup.BottomMargin = 0;

ws.PageSetup.PrintGridlines = true;

ws.PageSetup.CenterHorizontally = true;

ws.PageSetup.CenterVertically = true;

var htmlSaveOptions = new HtmlSaveOptions

{

ExportHiddenWorksheet = false,

ExportActiveWorksheetOnly = true,

ExportGridLines = true,

ExportPrintAreaOnly = true,

ExportImagesAsBase64 = true,

ExportBogusRowData= false

};

ws.Workbook.Save("C:\\temp\\test.htm", htmlSaveOptions);

amjad.sahi · February 4, 2023, 7:33pm

Could you please also zip and attach your Excel file. We will check your issue soon.

Rohin_Rana · February 6, 2023, 2:06pm

Please see the attachment.

Thanks
–Rohin Rana

Sales Tracker (10) (1).zip (459 KB)

amjad.sahi · February 6, 2023, 8:23pm

@Rohin_Rana,

I tested using the following sample code with your template file and it works ok. I do not find any overlapping issue when viewing the file into the browser:
e.g.
Sample code:

            Workbook wb = new Workbook("e:\\test2\\Sales Tracker (10) (1).xlsx");
            Worksheet ws = wb.Worksheets["ChartViewResults"];
            ws.PageSetup.PrintArea = "A1:G100";
            ws.AutoFitColumns();
            wb.Worksheets.ActiveSheetIndex = ws.Index;
            ws.AutoFitRows();

            //// Set all margins as 0

            ws.PageSetup.LeftMargin = 0;

            ws.PageSetup.RightMargin = 0;

            ws.PageSetup.TopMargin = 0;

            ws.PageSetup.BottomMargin = 0;

            ws.PageSetup.PrintGridlines = true;

            ws.PageSetup.CenterHorizontally = true;

            ws.PageSetup.CenterVertically = true;

            var htmlSaveOptions = new HtmlSaveOptions

            {

                ExportHiddenWorksheet = false,

                ExportActiveWorksheetOnly = true,

                ExportGridLines = true,

                ExportPrintAreaOnly = true,

                ExportImagesAsBase64 = true,

                ExportBogusRowData = false

            };

            ws.Workbook.Save("e:\\test2\\test.htm", htmlSaveOptions);

Please find attached the output HTML file for your reference. Could you check it and do you see any issue with source of HTML, please elaborate? Moreover, open the Excel file into MS Excel and do the same (as per your code) in MS Excel (using its options) manually and then re-save the selected worksheet to HTML. Compare the output HTML (by MS Excel) with output HTML by Aspose.Cells. If you find differences or issues, kindly highlight the problematic areas (regarding source) in some screenshots and provide us. We will look into your issue further.
test.zip (195.3 KB)

Rohin_Rana · February 6, 2023, 9:59pm

Hi Amjad,

Please see the screenshot below. The html produced by Aspose. the number (in yellow) is not displaying full text. I also attached the htm file.

(Attachment test.htm is missing)

simon.zhao · February 7, 2023, 5:41am

@Rohin_Rana
Which version do you use?
Please check the attached 23.1.zip (195.2 KB)
generated by 23.1, it works fine…

amjad.sahi · February 7, 2023, 10:00am

@Rohin_Rana,

It seems you are using some different code. Please note, we used the sample code pasted in the reply. Could you please share your sample (runnable) code that you are using, so we could evaluate your issue further.

Rohin_Rana · February 7, 2023, 2:27pm

I am having exactly the same code as you are using see below. My Aspose.Cells version is: 21.4.0.0.
Also I am not able to download the Zip file you shared(error: Sorry, this file is private. Only visible to the topic owner and staff members.)

Code:

ws = wb.Worksheets[“ChartViewResults”];

if (ws == null)

{

throw new Exception(“Sheet:” + sheetName + " couldn’t found in spreadsheet.");

}

foreach (Worksheet worksheet in wb.Worksheets)

{

if (worksheet.Name != “ChartViewResults”)

{

worksheet.SetVisible(false, false);

}

ws.PageSetup.PrintArea = A1:Q190;

ws.AutoFitColumns();

// Set all margins as 0

ws.PageSetup.LeftMargin = 0;

ws.PageSetup.RightMargin = 0;

ws.PageSetup.TopMargin = 0;

ws.PageSetup.BottomMargin = 0;

ws.PageSetup.PrintGridlines = true;

if (string.IsNullOrEmpty(chartName) && !string.IsNullOrEmpty(format) && format.ToUpper() == “HTML”)

{

var htmlSaveOptions = new HtmlSaveOptions

{

ExportHiddenWorksheet = false,

ExportActiveWorksheetOnly = true,

ExportGridLines = true,

ExportPrintAreaOnly = true,

ExportImagesAsBase64 = true,

};

ws.Workbook.Save(stream, htmlSaveOptions);

// ws.Workbook.Save(“C:\temp\test.htm”, htmlSaveOptions);

}

Thanks
–Rohin Rana

amjad.sahi · February 7, 2023, 6:30pm

@Rohin_Rana,

I now used your updated code segment and still it works fine. Please find attached the output HTML file for your reference, you should be able to download the attachments now.
e.g.
Sample code:

            Workbook wb = new Workbook("e:\\test2\\Sales Tracker (10) (1).xlsx");
            Worksheet ws = wb.Worksheets["ChartViewResults"];
            ws.PageSetup.PrintArea = "A1:Q190";
            ws.AutoFitColumns();
            wb.Worksheets.ActiveSheetIndex = ws.Index;
            ws.AutoFitRows();

            //// Set all margins as 0

            ws.PageSetup.LeftMargin = 0;

            ws.PageSetup.RightMargin = 0;

            ws.PageSetup.TopMargin = 0;

            ws.PageSetup.BottomMargin = 0;

            ws.PageSetup.PrintGridlines = true;

            ws.PageSetup.CenterHorizontally = true;

            ws.PageSetup.CenterVertically = true;

            var htmlSaveOptions = new HtmlSaveOptions

            {

                ExportHiddenWorksheet = false,

                ExportActiveWorksheetOnly = true,

                ExportGridLines = true,

                ExportPrintAreaOnly = true,

                ExportImagesAsBase64 = true,

                ExportBogusRowData = false

            };

            ws.Workbook.Save("e:\\test2\\test.htm", htmlSaveOptions);

test.zip (505.9 KB)

I am using latest version/fix. Could you please try our latest version/fix: Aspose.Cells for .NET v23.1 (Download | NuGet) and let us know your feedback.

Rohin_Rana · February 15, 2023, 9:28pm

Is there a way to set the border of the outer table in HMTLSaveOption?

Thanks
-Rohin Rana

John.He · February 16, 2023, 5:54am

@Rohin_Rana,
We do not support setting the borders of outer table in HMTLSaveOption. You can export html after setting in excel. Please refer to the following code:

Workbook workbook = new Workbook(“Book1.xlsx”);
WorksheetCollection sheets = workbook.Worksheets;
Range maxRange = sheets[0].Cells.MaxDisplayRange;
maxRange.SetOutlineBorders(CellBorderType.Thin, Color.Red);
workbook.Save(“out.html”);