HTML to image with HtmlRenderer on c#

Question

I use this C# code and HtmlRenderer Library ( HTML Renderer for WinForms HtmlRenderer.WinForms ) for convert GridView to htm and save to image.

But the output is not formatted and is misaligned with respect to the browser GridView :

The browser GridView :

How to do resolve this ?

Thank you in advance for any help.

EDIT #01

The client-side markup of the page Default.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
            background-color: #fff;
        }
        table th
        {
            background-color: #B8DBFD;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border: 1px solid #ccc;
        }
        table, table table td
        {
            border: 0px solid #ccc;
        }
    </style>
</head>
<body>
    <form name="form1" method="post" action="./" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTcxNjI0MDgwMQ9kFgICAw9kFgICAQ88KwARAwAPFgQeC18hRGF0YUJvdW5kZx4LXyFJdGVtQ291bnQCBGQBEBYAFgAWAAwUKwAAFgJmDw8WCh4JR3JpZExpbmVzCyojU3lzdGVtLldlYi5VSS5XZWJDb250cm9scy5HcmlkTGluZXMDHgtDZWxsU3BhY2luZ2YeB0NhcHRpb25lHgxDYXB0aW9uQWxpZ24LKitTeXN0ZW0uV2ViLlVJLldlYkNvbnRyb2xzLlRhYmxlQ2FwdGlvbkFsaWduAB4EXyFTQgKAgDBkFgoCAQ9kFgZmDw8WBh4EVGV4dAUBMR4FV2lkdGgbAAAAAACAVkABAAAAHwYCgAJkZAIBDw8WBh8HBQxKb2huIEhhbW1vbmQfCBsAAAAAAABeQAEAAAAfBgKAAmRkAgIPDxYGHwcFDVVuaXRlZCBTdGF0ZXMfCBsAAAAAAABeQAEAAAAfBgKAAmRkAgIPZBYGZg8PFgYfBwUBMh8IGwAAAAAAgFZAAQAAAB8GAoACZGQCAQ8PFgYfBwUNTXVkYXNzYXIgS2hhbh8IGwAAAAAAAF5AAQAAAB8GAoACZGQCAg8PFgYfBwUFSW5kaWEfCBsAAAAAAABeQAEAAAAfBgKAAmRkAgMPZBYGZg8PFgYfBwUBMx8IGwAAAAAAgFZAAQAAAB8GAoACZGQCAQ8PFgYfBwUPU3V6YW5uZSBNYXRoZXdzHwgbAAAAAAAAXkABAAAAHwYCgAJkZAICDw8WBh8HBQZGcmFuY2UfCBsAAAAAAABeQAEAAAAfBgKAAmRkAgQPZBYGZg8PFgYfBwUBNB8IGwAAAAAAgFZAAQAAAB8GAoACZGQCAQ8PFgYfBwUPUm9iZXJ0IFNjaGlkbmVyHwgbAAAAAAAAXkABAAAAHwYCgAJkZAICDw8WBh8HBQZSdXNzaWEfCBsAAAAAAABeQAEAAAAfBgKAAmRkAgUPDxYCHgdWaXNpYmxlaGRkGAEFCUdyaWRWaWV3MQ88KwAMAQgCAWQNljuZ9mLw3MCbohWE+O59hxlIL5j8BjCUPnprTdzrYw==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div>

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="85116B1B" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAANzFi/Ur8lSmZuih7uBErFXyUQ4NQqPNQ4QaLsVFnifumrw0n5QEvW/D1XEdQcU0wbN2/g8SH7kpdw58FfdWolPc3GTSwHmGRzQbpYaWKkNwA==" />
</div>
    <div>
    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">Customer Id</th><th scope="col">Name</th><th scope="col">Country</th>
        </tr><tr>
            <td style="width:90px;">1</td><td style="width:120px;">John Hammond</td><td style="width:120px;">United States</td>
        </tr><tr>
            <td style="width:90px;">2</td><td style="width:120px;">Mudassar Khan</td><td style="width:120px;">India</td>
        </tr><tr>
            <td style="width:90px;">3</td><td style="width:120px;">Suzanne Mathews</td><td style="width:120px;">France</td>
        </tr><tr>
            <td style="width:90px;">4</td><td style="width:120px;">Robert Schidner</td><td style="width:120px;">Russia</td>
        </tr>
    </table>
</div>   
</form>
</body>
</html>

there is no GridView in html, this is probably a `table` with some css styles applied and it looks like the HtmlRenderer misses the css file or cannot access it. could you show the client-side markup of the page you are trying to convert? — Cee McSharpface, Jul 24 '18 at 08:49
@dlatikay Thanks for reply, please see **Edit #01** in my first question. — Chevy Mark Sunderland, Jul 24 '18 at 08:57
Debug in the browser and check what is overwriting your css. — Phael, Jul 24 '18 at 09:05
You may find this post useful: [Create RDLC report dynamically at run-time from a DataGridView](https://stackoverflow.com/a/40367119/3110834) — Reza Aghaei, Jul 24 '18 at 12:31

HTML to image with HtmlRenderer on c#

0 Answers0