Hi, support!
I’m trying to convert html to image with CSS style. Save it to stream. Insert into and display on webpage.
But after converting
Before converting with only html+css - all fine.
What i want to receive:
before_convert.png (38.1 KB)
What i receiving:
after.png (6.0 KB)
Here’s example of my C# code:
public sealed class TableConverter
{
private static readonly ImageSaveOptions saveOptions;
private static readonly string css; //below code <style></style>
static TableConverter()
{
//CSS
css = LoadCSS();
//Save Options
saveOptions = new ImageSaveOptions(ImageFormat.Png)
{
BackgroundColor = Color.Transparent,
HorizontalResolution = 80,
VerticalResolution = 80,
};
saveOptions.PageSetup.PageLayoutOptions = PageLayoutOptions.FitToContentHeight;
}
public static string ConvertTableToImg(string htmlTable, int tablePosition)
{
try
{
string htmlImg;
string str = css + CreateHtmlContainer(htmlTable);
using (var document = new HTMLDocument(str, String.Empty))
{
using(var streamProvider = new MemoryStreamProvider())
{
//with File same result
Converter.ConvertHTML(document, saveOptions, streamProvider);
//Converter.ConvertHTML(document, saveOptions, "path");
Stream imageStream = streamProvider.Streams.First();
htmlImg = "<img src='data:image/png;base64," + ConvertToBase64String(imageStream) + "'/>";
}
}
logger.Debug("Table conversion at [" + tablePosition + "] postion finished");
return htmlImg;
}
catch (System.Exception ex)
{
logger.Error("Table conversion at [" + tablePosition + "] position error: \n" + ex);
return "<img src=''/>";
}
}
Here’s example of my HTML code:
<body>
<div class="main-content">
<section>
<div class="chapter_container">
<div class="section_container">
<div class="topic_container">
<div class="body">
<div>
<table class="table" style="table-layout:fixed; ">
<col width="1.0*" />
<col width="1.0*" />
<col width="1.0*" />
<!--thead-->
<thead>
<!--row-->
<tr>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry entry_header_attributes ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry entry_header_attributes ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry entry_header_attributes ">
<div>Table in a Extra page width paragraph</div>
</td>
</tr>
</thead>
<!--tbody-->
<tbody>
<!--row-->
<tr>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
</tr>
<!--row-->
<tr>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
</tr>
<!--row-->
<tr>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
</tr>
<!--row-->
<tr>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
</tr>
<!--row-->
<tr>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
</tr>
<!--row-->
<tr>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
<!--entry-->
<td style="" columnName="Table in a Extra page width paragraph" class="entry ">
<div>Table in a Extra page width paragraph</div>
</td>
</tr>
</tbody>
</table>
</div>
</div class="body">
</div class="topic_container">
</div class="section_container">
</div class="chapter_container">
</section>
</div class="main-content">
Here’s my CSS code:
<style>
pre {
margin-left: 2em;
white-space: pre-wrap;
}
h2 {
margin: 3em 0 1em 0;
}
h3 {
margin: 2.5em 0 1em 0;
}
h4 {
margin: 2.5em 0 0.75em 0;
}
h5,
h6 {
margin: 2.5em 0 1em;
}
h1+h2,
h1+h2+h2,
h1+p,
h1+p+h2 {
margin: 0.75em 0 0.75em;
}
h2+h3,
h3+h4,
h4+h5,
h5+h6 {
margin-top: 0.5em;
}
p {
margin: 1em 0;
}
hr:not(.top) {
display: block;
background: none;
border: none;
padding: 0;
margin: 2em 0;
height: auto;
}
.element dd,
.element dl {
margin-top: 0em;
margin-bottom: 0.25em;
}
dt {
margin-top: 0.75em;
margin-bottom: 0.5em;
clear: left;
}
.element dt {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
dt+dt {
margin-top: 0;
}
dd dt {
margin-top: 0.25em;
margin-bottom: 0;
}
dd p {
margin-top: 0;
}
dd dl+p {
margin-top: 1em;
}
dd table+p {
margin-top: 1em;
}
p+*>li,
dd li {
margin: 1em 0;
}
dt,
dfn {
font-weight: bold;
font-style: normal;
}
i,
em {
font-style: italic;
}
dt dfn {
font-style: italic;
}
pre,
code {
font-size: inherit;
font-family: monospace;
font-variant: normal;
}
pre strong {
color: black;
font: inherit;
font-weight: bold;
background: yellow;
}
pre em {
font-weight: bolder;
font-style: normal;
}
@media screen {
code {
color: #D93B00;
}
code a:link,
code a:visited {
color: inherit;
}
}
var {
background-color: #f9f9f9;
border: 1px solid #eee;
padding: 0 2px;
}
var sub {
vertical-align: bottom;
font-size: smaller;
position: relative;
top: 0.1em;
}
table {
border-collapse: collapse;
border-style: hidden hidden none hidden;
}
table thead,
table tbody {
border-bottom: solid;
}
table tbody th:first-child {
border-left: solid;
}
table tbody th {
text-align: left;
}
table td,
table th {
border-left: solid;
border-right: solid;
border-bottom: solid thin;
vertical-align: top;
padding: 0.2em;
}
h4 {
position: relative;
z-index: 3;
}
h4+.element,
h4+div+.element {
margin-top: -2.5em;
padding-top: 2em;
}
.element {
background: #F4F4FA;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -2.05em;
height: 2em;
width: 1.8em;
background: #F4F4FA;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
svg a:link,
svg a:visited {
cursor: pointer;
}
svg a text,
svg text a {
fill: blue;
/* Even for text, SVG uses fill over color */
text-decoration: underline;
}
svg a:hover,
svg a:active {
outline: dotted 1px blue;
}
/******************************************************************************/
/* Body */
/******************************************************************************/
body {
counter-reset: example figure issue;
/* Layout */
margin: 0 auto;
/* Typography */
line-height: 1;
font-family: Calibri light;
font-size: 8pt;
widows: 2;
orphans: 2;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
/* Colors */
color: black;
}
@media screen {
html,
body,
.front-page,
.main-content {
width: 100%;
}
nav {
height: 100%;
}
.front-page {
height: 100vh;
}
.main-content {}
}
/** ToC Sidebar *************************************************************/
@media screen {
html,
body {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body #toc {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 90mm;
text-decoration: none;
overflow: auto;
scrollbar-width: thin;
padding: 0 0 0 3mm;
background-color: #5e5b5b;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 100;
}
body #toc a {
text-decoration: none;
color: #000;
}
body #toc ol {
padding: 0;
list-style: none;
}
body #toc li.chapter-title {
margin-top: 6mm;
}
body #toc li.chapter-title>a {
/*color: #fdc300;*/
color: #e8e8e6;
font-family: Calibri light;
font-size: 12pt;
font-weight: bold;
word-wrap: break-word;
display: block;
text-indent: -3mm;
margin-left: 1mm;
}
body #toc li.section-title>a {
padding-left: 3mm;
color: #e8e8e6;
font-family: Calibri light;
font-size: 12pt;
word-wrap: break-word;
display: block;
text-indent: -6mm;
margin-left: 2mm;
}
body #toc li.topic-title>a {
padding-left: 3mm;
color: #e8e8e6;
font-family: Calibri light;
font-size: 10pt;
word-wrap: break-word;
display: block;
text-indent: -8mm;
margin-left: 7mm;
}
#tocShowBtn {
position: absolute;
top: 50%;
height: 5mm;
width: 5mm;
background-color: #787474;
cursor: pointer;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiI+DQoJPGRlZnM+DQoJCTxjbGlwUGF0aD4NCgkJCTxwYXRoIGZpbGw9IiMwMGYiIGZpbGwtb3BhY2l0eT0iLjUxNCIgZD0ibS03IDEwMjQuMzZoMzR2MzRoLTM0eiIvPg0KCQk8L2NsaXBQYXRoPg0KCQk8Y2xpcFBhdGg+DQoJCQk8cGF0aCBmaWxsPSIjYWFkZTg3IiBmaWxsLW9wYWNpdHk9Ii40NzIiIGQ9Im0tNiAxMDI4LjM2aDMydjMyaC0zMnoiLz4NCgkJPC9jbGlwUGF0aD4NCgk8L2RlZnM+DQoJPHBhdGggZD0ibTM0NS40NCAyNDguMjlsLTE5NC4yOSAxOTQuMjhjLTEyLjM1OSAxMi4zNjUtMzIuMzk3IDEyLjM2NS00NC43NSAwLTEyLjM1NC0xMi4zNTQtMTIuMzU0LTMyLjM5MSAwLTQ0Ljc0NGwxNzEuOTEtMTcxLjkxLTE3MS45MS0xNzEuOWMtMTIuMzU0LTEyLjM1OS0xMi4zNTQtMzIuMzk0IDAtNDQuNzQ4IDEyLjM1NC0xMi4zNTkgMzIuMzkxLTEyLjM1OSA0NC43NSAwbDE5NC4yOSAxOTQuMjhjNi4xNzcgNi4xOCA5LjI2MiAxNC4yNzEgOS4yNjIgMjIuMzY2IDAgOC4wOTktMy4wOTEgMTYuMTk2LTkuMjY3IDIyLjM3MyIgdHJhbnNmb3JtPSJtYXRyaXgoLjAzNTQxLS4wMDAxMy4wMDAxMy4wMzU0MSAyLjk4IDMuMDIpIiBmaWxsPSIjZmZmIi8+DQo8L3N2Zz4=');
}
#tocHideBtn {
position: absolute;
top: calc(50% + 6mm);
height: 5mm;
width: 5mm;
background-color: #787474;
cursor: pointer;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjIgMjIiPg0KCTxkZWZzPg0KCQk8Y2xpcFBhdGg+DQoJCQk8cGF0aCBmaWxsPSIjMDBmIiBmaWxsLW9wYWNpdHk9Ii41MTQiIGQ9Im0tNyAxMDI0LjM2aDM0djM0aC0zNHoiLz4NCgkJPC9jbGlwUGF0aD4NCgkJPGNsaXBQYXRoPg0KCQkJPHBhdGggZmlsbD0iI2FhZGU4NyIgZmlsbC1vcGFjaXR5PSIuNDcyIiBkPSJtLTYgMTAyOC4zNmgzMnYzMmgtMzJ6Ii8+DQoJCTwvY2xpcFBhdGg+DQoJPC9kZWZzPg0KCTxwYXRoIGQ9Im0zNDUuNDQgMjQ4LjI5bC0xOTQuMjkgMTk0LjI4Yy0xMi4zNTkgMTIuMzY1LTMyLjM5NyAxMi4zNjUtNDQuNzUgMC0xMi4zNTQtMTIuMzU0LTEyLjM1NC0zMi4zOTEgMC00NC43NDRsMTcxLjkxLTE3MS45MS0xNzEuOTEtMTcxLjljLTEyLjM1NC0xMi4zNTktMTIuMzU0LTMyLjM5NCAwLTQ0Ljc0OCAxMi4zNTQtMTIuMzU5IDMyLjM5MS0xMi4zNTkgNDQuNzUgMGwxOTQuMjkgMTk0LjI4YzYuMTc3IDYuMTggOS4yNjIgMTQuMjcxIDkuMjYyIDIyLjM2NiAwIDguMDk5LTMuMDkxIDE2LjE5Ni05LjI2NyAyMi4zNzMiIGZpbGw9IiNmZmYiIHRyYW5zZm9ybT0ibWF0cml4KC0uMDM1NDEtLjAwMDEzLS4wMDAxMy4wMzU0MSAxOS4wMiAzLjAyKSIvPg0KPC9zdmc+');
}
#tocNavBtnsBar {
position: fixed;
width: 5mm;
height: 100%;
left: 0mm;
margin-left: 90mm;
background-color: #5e5b5b;
z-index: 150;
}
body main {}
.activeHeaderTitle>a {
font-weight: bold;
color: #fdc300 !important;
}
/***** front-page *****/
.front-page>div {
margin-left: 95mm;
}
.front-page>div.title1 {
position: absolute;
left: 3mm;
top: 6mm;
font-family: Calibri light;
font-size: 14pt;
color: #000;
z-index: 10;
}
.front-page>div.title2 {
position: absolute;
left: 0;
top: 8mm;
right: 0;
text-align: center;
font-family: Calibri light;
font-size: 20pt;
font-weight: bold;
color: #e8e8e6;
z-index: 10;
}
.front-page>div.product-image {
position: absolute;
left: 0;
top: 27mm;
right: 0;
bottom: 0;
text-align: center;
overflow: hidden;
z-index: 5;
}
.front-page>div.version-block {
position: absolute;
left: 3mm;
bottom: 6mm;
z-index: 10;
}
.front-page>div.copyright {
position: absolute;
left: 0;
bottom: 6mm;
right: 0;
text-align: center;
z-index: 10;
}
.front-page>div.footer-image {
position: absolute;
bottom: 0;
right: 0;
}
.main-content section {
left: 0;
top: 9mm;
right: 0;
bottom: 0;
margin-left: 95mm;
}
/***** header of main content *****/
.main-content header,
.static-top-header {
height: 9mm !important;
margin-left: 95mm;
border-bottom: 1pt solid #fdc300;
z-index: 10;
}
.static-top-header {
position: fixed;
height: 9mm;
width: calc(100% - 95mm);
box-sizing: border-box;
z-index: 50;
/*border: 2px solid pink;*/
line-height: 9mm;
background-color: white;
}
.main-content header img {
height: 7mm;
float: right;
}
.main-content header nav,
.static-top-header {
height: 100%;
display: inline-block;
vertical-align: middle;
font-family: Calibri light;
font-size: 14pt;
color: #000000;
padding-left: 4mm;
}
.main-content header nav ul {
padding: 0;
margin: 0;
line-height: 9mm;
}
.main-content header nav li {
display: inline-block;
}
.main-content header nav li a {
display: block;
text-decoration: none;
}
/***** content elements *****/
.section_container {
margin-left: 3mm;
}
.section_title {
margin-left: 2mm;
margin-top: 2.4722222222mm
/*6mm-10pt*/
;
font-family: Calibri light;
font-size: 14pt;
color: #000;
}
.topic_title {
margin-left: 2mm;
margin-top: 4.4722222222mm
/*8mm-10pt*/
;
font-family: Calibri light;
font-size: 12pt;
color: #000;
}
.topic_container .body {
margin-top: 3.47222mm
/*7mm-10pt*/
;
font-family: Calibri light;
font-size: 10pt;
color: #000;
}
.topic_container .body a {
font-family: Calibri light;
font-size: 8pt;
font-weight: bold;
color: #e57002;
}
.topic_container .body img.image {
margin-top: 4mm;
}
.topic_container .body table.table {
margin-top: 4mm;
max-width: 161mm;
font-family: Calibri light;
font-size: 8pt;
color: #000;
}
.topic_container .body .entry_header_attributes {
font-family: Calibri light;
font-size: 8pt;
font-weight: bold;
color: #000;
}
/** Note *************************************************************/
table.icons_wrap {
border: 0.5pt solid rgb(255, 191, 0);
width: 100%;
}
table.icons_wrap td,
table.icons_wrap th {
border: none;
}
table.icons_wrap thead,
table.icons_wrap tbody {
border: none;
}
}
</style>