HTML Table content broken

Mon Aug 27, 2018 3:04 pm

I am using a trial version of the Spire.Presentation (v3.8.0.9040). The below html content with Table & 3 columns (td) are shown as bullet list instead of Table itself. Can you please help identify the issue?

<HTML><BODY><table width='0' class='mce-item-table'><tbody><tr><td width='96'><strong>Column1</strong></td><td width='236'><strong>Column2</strong></td><td width='304'><strong>Column3</strong></td></tr><tr><td>Lorem Ipsum</td><td width='236'>Lorem Ipsum<br></td><td width='304'> </td></tr><tr><td>Lorem Ipsum</td><td width='236'>Lorem Ipsum</td><td width='304'>Lorem Ipsum</td></tr><tr><td>Lorem Ipsum</td><td width='236'>Lorem Ipsum</td><td width='304'>Lorem Ipsum</td></tr><tr><td>Lorem Ipsum</td><td width='236'>Lorem Ipsum</td><td width='304'>Lorem Ipsum</td></tr><tr><td>Lorem Ipsum</td><td width='236'>Lorem Ipsum</td><td width='304'>Lorem Ipsum</td></tr><tr><td>Lorem Ipsum</td><td width='236'>Lorem Ipsum</td><td width='304'>Lorem Ipsum</td></tr><tr><td>Lorem Ipsum</td><td width='236'>Lorem Ipsum</td><td width='304'>Lorem Ipsum</td></tr><tr><td>Lorem Ipsum</td><td width='236'>Lorem Ipsum</td><td width='304'>Lorem Ipsum</td></tr><tr><td>Lorem Ipsum</td><td width='236'>Lorem Ipsum</td><td width='304'>Lorem Ipsum</td></tr><tr><td>Lorem Ipsum</td><td width='236'>Lorem Ipsum</td><td width='304'> </td></tr></tbody></table></BODY></HTML>

Table.png

Tue Aug 28, 2018 8:29 am

Hello,

Thanks for your post.
After an initial test with our latest version Spire.Presentation Pack Hotfix Version:3.8.4 (Spire.presenttion.dll: 3.8.4.9040) and following testing code, the html table element could be rendered. But there is still a problem when html code includes <strong> tags, I already logged it into our bug tracking system for investigating and fixing, once it is fixed, I will let you know immediately. As a temporary workaround, please remove the <strong> tags from your html code and try it again. If there is any doubt, welcome to write back.

Code: Select all: string htmlText = File.ReadAllText(@"html.txt"); Presentation ppt = new Presentation(); ShapeList shapes = ppt.Slides[0].Shapes; shapes.AddFromHtml(htmlText); ppt.SaveToFile("Result.pptx", FileFormat.Pptx2013);

Sincerely,
Lisa
E-iceblue support team

Fri Sep 21, 2018 8:58 am

Hello,

Glad to inform that the "<strong> tags " issue has been resolved and the hotfix Spire.Presentation Pack Hotfix Version:3.9.5 is available now. Welcome to test it and any feedback will be greatly appreciated.

Sincerely,
Lisa
E-iceblue support team

Fri Sep 28, 2018 7:04 am

Hello Prven,

Greetings from E-iceblue.
I am writing to confirm whether the hotfix resolved your issue or not. Could you please give us some feedback at your convenience? Thanks in advance.

Sincerely,
Lisa
E-iceblue support team

Thu Oct 25, 2018 7:04 am

Hello,

We are replacing strong with b tags while exporting so that was not an issue for us previosuly.

Can you please let me know if the library supports html <sup> and <sub> tags in HTML conversion?

Thanks,
Prakash

Thu Oct 25, 2018 8:46 am

Dear Prakash,

Thanks for your feedback.
Sorry that Spire.Presentation doesn't support html <sup> and <sub> tags in HTML conversion at present. We will consider adding it as a new feature into our upgrade list, if it can be achieved in the future, we will let you know.

Sincerely,
Lisa
E-iceblue support team

Fri Nov 09, 2018 10:56 am

Dear Prakash,

Glad to inform you that the new feature has been implemented in Spire.Presentation Pack Hotfix Version:3.11.1. Below is the code snippet for your reference. If there is any question, just feel free to write back.

Code: Select all: string htmlText = File.ReadAllText(@"sample.txt"); Presentation ppt = new Presentation(); ShapeList shapes = ppt.Slides[0].Shapes; shapes.AddFromHtml(htmlText); ppt.SaveToFile("Result.pptx", FileFormat.Pptx2013);

Sincerely,
Lisa
E-iceblue support team

Wed Nov 14, 2018 7:12 am

Dear Prakash,

Greetings from E-iceblue.
Did the new feature work for you? Your feedback will be highly appreciated. Thanks in advance.

Sincerely,
Lisa
E-iceblue support team

Wed Jan 02, 2019 9:56 am

We are trying to add table using given code in this thread but we are facing some problem regarding position of shapes.
can you please let us know how can we set position of ShapeList in which we set html content? In our case half of ppt contains diffrent controls and other contains this ShapeList so we are facing issue.

imag1.PNG

Wed Jan 02, 2019 10:27 am

Hi,

Thank you for your inquiry.
To help us better investigate the case, please send your sample HTML to us via email(Jane.Bai@e-iceblue.com).

Sincerely,
Jane
E-iceblue support team

Wed Jan 02, 2019 1:13 pm

Below is the Html :-
<div><div><div><div><div><div><div><div><div><span style="text-decoration: underline;">The One Thing:-</span></div><div><br></div><div><br></div><div><span style="text-decoration: underline;">Hero Experiences:-</span></div><div><br></div><div><br></div><div><span style="text-decoration: underline;">Feature Specs:-</span></div><div><div><div><div><div><div><div><div><div>test cxvdsvdvdfvdfv</div><table style="width: 100%;"><tbody><tr><td style="width: 33.3333%;">ttt</td><td style="width: 33.3333%;">tttt</td><td style="width: 33.3333%;">ttttt</td></tr><tr><td style="width: 33.3333%;">tttt</td><td style="width: 33.3333%;">tttt</td><td style="width: 33.3333%;">tttt</td></tr><tr><td>errgegb</td><td>bfdbfbffg fg fg n g</td><td>bbbbbb</td></tr></tbody></table><p><br></p><div><br></div><div><br></div><div><br></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>

Sample Code:-
Presentation ppt = new Presentation();
IMasterSlide master = ppt.Masters[0];
ppt.SlideSize.Type = SlideSizeType.Screen16x9;
//ppt.SlideSize.Size = new SizeF(1200, 800);
ISlide slide = ppt.Slides[0];
SizeF pptSize = ppt.SlideSize.Size;
#region Program Name and desc in Header
IAutoShape shapeProgCodeName = master.Shapes.AppendShape(ShapeType.Rectangle, new RectangleF(2, 8, 500, 21));
shapeProgCodeName.AppendTextFrame("test");
shapeProgCodeName.ShapeStyle.LineColor.Color = Color.White;
shapeProgCodeName.Fill.FillType = Spire.Presentation.Drawing.FillFormatType.None;
shapeProgCodeName.Fill.SolidColor.Color = Color.White;
TextRange textRangeProgCode = shapeProgCodeName.TextFrame.TextRange; textRangeProgCode.Fill.FillType = Spire.Presentation.Drawing.FillFormatType.Solid;
textRangeProgCode.Fill.SolidColor.Color = Color.FromArgb(12, 126, 217);
textRangeProgCode.FontHeight = 24;
textRangeProgCode.LatinFont = new TextFont("Segoe UI Light");
textRangeProgCode.Paragraph.Alignment = TextAlignmentType.Left;
IAutoShape shapeProgDesc = master.Shapes.AppendShape(ShapeType.Rectangle, new RectangleF(2, 40, 500, 18));
shapeProgDesc.AppendTextFrame("testData1");
shapeProgDesc.ShapeStyle.LineColor.Color = Color.White;
shapeProgDesc.Fill.FillType = Spire.Presentation.Drawing.FillFormatType.None;
shapeProgDesc.Fill.SolidColor.Color = Color.White;
TextRange textRangeProgDesc = shapeProgDesc.TextFrame.TextRange;
textRangeProgDesc.Fill.FillType = Spire.Presentation.Drawing.FillFormatType.Solid;
textRangeProgDesc.Fill.SolidColor.Color = Color.FromArgb(12, 126, 217);
textRangeProgDesc.FontHeight = 12;
textRangeProgDesc.IsItalic = TriState.True;
textRangeProgDesc.LatinFont = new TextFont("Segoe UI Light");
textRangeProgDesc.Paragraph.Alignment = TextAlignmentType.Left;
#endregion

float intKeyHeight = pptSize.Height - 80;
float[] widths = { pptSize.Width / 2 };
float[] heights = { intKeyHeight - 50 };
string objHtml = "<div>cxvdsvdvdfvdfv</div><div><br></div><div><br></div><table><tbody><tr><td>ttt</td><td>tttt</td><td>ttttt</td></tr><tr><td>tttt</td><td>tttt</td><td>tttt</td></tr><tr><td>errgegb</td><td>bfdbfbffg fg fg n g</td><td>bbbbbb</td></tr></tbody></table>";
ShapeList shapes = ppt.Slides[0].Shapes;
shapes.AddFromHtml(objHtml);
foreach (IShape objshape in shapes)
{
if (objshape.Name == "New Table")
{
ITable objShape1 = (ITable)objshape;
objShape1.StylePreset = TableStylePreset.None;
}
objshape.Width = widths[0];
objshape.Fill.Pattern.BackgroundColor.Color = Color.Blue;

}

Thu Jan 03, 2019 3:39 am

Hi Kairavi,

You could measure the string height and then append the HTML according to the calculation of the y coordinate.
I have made some changes to your code, please see below.

Code: Select all: static void test16027() { string htmlOld = "<div><div><div><div><div><div><div><div><div><span style='text-decoration: underline;>The One Thing:-</span>"+ "</div><div><br></div><div><br></div><div><span style='text-decoration: underline;'>Hero Experiences:-</span>"+ "</div><div><br></div><div><br></div><div><span style='text-decoration: underline;'>Feature Specs:-</span>"+ "</div><div><div><div><div><div><div><div><div><div>test cxvdsvdvdfvdfv</div>"+ "<table style='width: 100%;'><tbody><tr><td style='width: 33.3333%;'>ttt</td><td style='width: 33.3333%;'>tttt</td>"+ "<td style='width: 33.3333%;'>ttttt</td></tr><tr><td style='width: 33.3333%;'>tttt</td><td style='width: 33.3333%;'>tttt</td>"+ "<td style='width: 33.3333%;'>tttt</td></tr><tr><td>errgegb</td><td>bfdbfbffg fg fg n g</td><td>bbbbbb</td></tr>"+ "</tbody></table><p><br></p><div><br></div><div><br></div><div><br></div></div></div></div></div></div></div></div>"+ "</div></div></div></div></div></div></div></div></div>"; Presentation ppt = new Presentation(); IMasterSlide master = ppt.Masters[0]; float topY=10; ppt.SlideSize.Type = SlideSizeType.Screen16x9; //ppt.SlideSize.Size = new SizeF(1200, 800); ISlide slide = ppt.Slides[0]; SizeF pptSize = ppt.SlideSize.Size; #region Program Name and desc in Header Font font = new Font("Segoe UI Light", 24); SizeF size = measureString("test", font); IAutoShape shapeProgCodeName = master.Shapes.AppendShape(ShapeType.Rectangle, new RectangleF(2, topY, 500, size.Height));//jane shapeProgCodeName.AppendTextFrame("test"); shapeProgCodeName.ShapeStyle.LineColor.Color = Color.White; shapeProgCodeName.Fill.FillType = Spire.Presentation.Drawing.FillFormatType.None; shapeProgCodeName.Fill.SolidColor.Color = Color.White; TextRange textRangeProgCode = shapeProgCodeName.TextFrame.TextRange; textRangeProgCode.Fill.FillType = Spire.Presentation.Drawing.FillFormatType.Solid; textRangeProgCode.Fill.SolidColor.Color = Color.FromArgb(12, 126, 217); textRangeProgCode.FontHeight = 24; textRangeProgCode.LatinFont = new TextFont("Segoe UI Light"); textRangeProgCode.Paragraph.Alignment = TextAlignmentType.Left; Font font1 = new Font("Segoe UI Light", 12); SizeF size1 = measureString("test", font); IAutoShape shapeProgDesc = master.Shapes.AppendShape(ShapeType.Rectangle, new RectangleF(2, topY+=size.Height, 500, size1.Height)); topY+=size1.Height; shapeProgDesc.AppendTextFrame("testData1"); shapeProgDesc.ShapeStyle.LineColor.Color = Color.White; shapeProgDesc.Fill.FillType = Spire.Presentation.Drawing.FillFormatType.None; shapeProgDesc.Fill.SolidColor.Color = Color.White; TextRange textRangeProgDesc = shapeProgDesc.TextFrame.TextRange; textRangeProgDesc.Fill.FillType = Spire.Presentation.Drawing.FillFormatType.Solid; textRangeProgDesc.Fill.SolidColor.Color = Color.FromArgb(12, 126, 217); textRangeProgDesc.FontHeight = 12; textRangeProgDesc.IsItalic = TriState.True; textRangeProgDesc.LatinFont = new TextFont("Segoe UI Light"); textRangeProgDesc.Paragraph.Alignment = TextAlignmentType.Left; #endregion float[] widths = { pptSize.Width / 2 }; string objHtml = "<div>cxvdsvdvdfvdfv</div><div><br></div><div><br></div><table><tbody><tr><td>ttt</td>"+ "<td>tttt</td><td>ttttt</td></tr><tr><td>tttt</td><td>tttt</td><td>tttt</td></tr><tr><td>errgegb</td>"+ "<td>bfdbfbffg fg fg n g</td><td>bbbbbb</td></tr></tbody></table>"; ShapeList shapes = ppt.Slides[0].Shapes; //shapes.AddFromHtml(objHtml); shapes.AddFromHtml(htmlOld);//both html cases are ok bool first= true; foreach (IShape objshape in shapes) { //set width and background color first objshape.Width = widths[0]; objshape.Fill.FillType = FillFormatType.Solid; objshape.Fill.SolidColor.Color = Color.Blue; //objshape.Fill.Pattern.BackgroundColor.Color = Color.Blue; if(first) { objshape.Top = topY +5; first = false; topY +=objshape.Frame.Height+10; continue; } if (objshape.Name == "New Table") { ITable objShape1 = (ITable)objshape; objShape1.StylePreset = TableStylePreset.None; } objshape.Top = topY; topY += objshape.Frame.Height+10; } ppt.SaveToFile("16027.pptx", FileFormat.Pptx2010); } protected static SizeF measureString(string str, Font font) { System.Drawing.Image img = new Bitmap(1, 1); Graphics drawing = Graphics.FromImage(img); SizeF textSize = drawing.MeasureString(str, font); img.Dispose(); drawing.Dispose(); return textSize; }

Sincerely,
Jane
E-iceblue support team

Thu Jan 03, 2019 7:38 am

Now it's display properly. we have styling of cell which is available inside table cell. Currently it does not apply styling which we defined in html. It also display so much line difference between two lines.
Html :-
<html><body style= "font-family: 'Segoe UI';font-size:9pt;"><div><div><div><div><div><div><div><span style="text-decoration: underline;">The One Thing:-</span></div><div><br></div><div><br></div><div><span style="text-decoration: underline;">Hero Experiences:-</span></div><div><br></div><div><br></div><div><span style="text-decoration: underline;">Feature Specs:-</span></div><div><div><div><div><div><div><div><div><div><div><div><div><u>dsgfsdggd</u></div><div><div><div><div><div><div><div><div><table style="width: 100%;"><tbody><tr><td style="width: 33.3333%;">ttt</td><td style="width: 33.3333%;">tttt</td><td style="width: 33.3333%;">ttttt</td></tr><tr><td style="width: 33.3333%;"><span style="color:#FFFFFF;background-color:#B8312F;">tttt</span></td><td style="width: 33.3333%;">tttt</td><td style="width: 33.3333%;">tttt</td></tr><tr><td>errgegb</td><td>bfdbfbffg fg fg n g</td><td><span style="color:#A38F84;background-color:#E25041;">bbbbbb</span></td></tr></tbody></table><p><br></p></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></body></html>

Thu Jan 03, 2019 9:23 am

Hi,

Kindly note that HTML and PowerPoint have different standards, the span color and background color has no corresponding setting in PowerPoint, it is impossible to get the totally same effect. You could test in PowerPoint, no that setting for the cell style.
Besides, I have noticed that you used so many nested div tags. Since Spire.Presentation treats every tag as a separate shape in the generated document, there could be some difference between the shape spaces if the nested div tags are too complex.

Sincerely,
Jane
E-iceblue support team