HTML Renderer ignoring colspan

Question

I am having issues using the HTML Renderer properly. It generates the PDF, but for some reason, when I have a colspan of 2, it seems to ignore this.

Here is the entire HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Receipt</title>

<style>
    .invoice-box {
        max-width: 800px;
        margin: auto;
        padding: 30px;
        border: 1px solid #eee;
        box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        font-size: 16px;
        line-height: 24px;
        font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        color: #555;
    }

    .invoice-box table {
        width: 100%;
        line-height: inherit;
        text-align: left;
    }

    .invoice-box table td {
        padding: 5px;
        vertical-align: top;
    }

    .invoice-box table tr td:nth-child(2) {
        text-align: right;
    }

    .invoice-box table tr.top table td {
        padding-bottom: 20px;
    }

    .invoice-box table tr.top table td.title {
        font-size: 45px;
        line-height: 45px;
        color: #333;
    }

    .invoice-box table tr.information table td {
        padding-bottom: 40px;
    }

    .invoice-box table tr.heading td {
        background: #eee;
        border-bottom: 1px solid #ddd;
        font-weight: bold;
    }

    .invoice-box table tr.details td {
        padding-bottom: 20px;
    }

    .invoice-box table tr.item td{
        border-bottom: 1px solid #eee;
    }

    .invoice-box table tr.item.last td {
        border-bottom: none;
    }

    .invoice-box table tr.total td:nth-child(2) {
        border-top: 2px solid #eee;
        font-weight: bold;
    }


    .invoice-box table tr.top table tr td {
        width: 100%;
        display: block;
        text-align: center;
    }

    .invoice-box table tr.information table tr td {
        width: 100%;
        display: block;
        text-align: center;
    }

/** RTL **/
    .rtl {
        direction: rtl;
        font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
    }

    .rtl table {
        text-align: right;
    }

    .rtl table tr td:nth-child(2) {
        text-align: left;
    }
    </style>
</head>

<body>
<div class="invoice-box">
    <table cellpadding="0" cellspacing="0">
        <tr class="top">
            <td colspan="2">
                <table>
                    <tr>
                        <td class="title">
                            <img src="" style="width:100%; max-width:300px;">
                        </td>

                        <td>
                            Order number #: xxxxxxxx<br>
                            Order Date: February 26 2018
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="information">
            <td colspan="2">
                <table>
                    <tr>
                        <td>
                            CompanyS<br>
                            address<br>
                            state
                        </td>

                        <td>
                            Contact<br>
                            Email
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="details">
            <td>
            </td>

            <td>
            </td>
        </tr>

        <tr class="heading">
            <td>
            </td>

            <td>
            </td>
        </tr>

        <tr class="item">
            <td>
            </td>

            <td>
            </td>
        </tr>


        <tr class="total">
            <td></td>

            <td>
            </td>
        </tr>
    </table>
  </div>

</body>
</html>

And here is the code to get the HTML:

var emailContentUrl = url;

var html = FetchResponseHtml(emailContentUrl);

var pdf = PdfGenerator.GeneratePdf(html, PageSize.A4);

FetchResponseHtml:

public string FetchResponseHtml(string emailContentUrl)
{
    var request = (HttpWebRequest)WebRequest.Create(emailContentUrl);

    var response = (HttpWebResponse)request.GetResponse();

    var responseHtml = "";
    if (response.StatusCode == HttpStatusCode.OK)
    {
        var receiveStream = response.GetResponseStream();
        StreamReader readStream = null;

        if (response.CharacterSet == null)
        {
            readStream = new StreamReader(receiveStream);
        }
        else
        {
            readStream = new StreamReader(receiveStream, Encoding.GetEncoding(response.CharacterSet));
        }

        responseHtml = readStream.ReadToEnd();

        response.Close();
        readStream.Close();
    }

    return responseHtml;
}

But for some reason, when the PDF is generated, the PDF only has the company info. There is no Order Number/Order Date nor any contact info.

Is HTML Renderer ignoring extra colspans, or why does this happen?

You should not accuse PDFsharp, looks like a problem of PdfGenerator. — I liked the old Stack Overflow, Feb 26 '18 at 14:29

score 0 · Answer 1 · answered Feb 26 '18 at 13:47

0

The HTML code seems to be valid. Maybe you are breaking the syntax while adding Order related information.

answered Feb 26 '18 at 13:47

demoncrate

390
2
14

I am not, because when I send the email to the customer, I use the same HTML in the email, I just choose to attach a PDF with the same document. The body of the email looks correct, the PDF does not. – Jannik Feb 26 '18 at 13:49
Try playing around with the width and removing elements from the HTML until you reach the problematic element. – demoncrate Feb 26 '18 at 13:52
I had a similar problem recently, these HTML to PDF converters never work as they should. – demoncrate Feb 26 '18 at 13:52

HTML Renderer ignoring colspan

1 Answers1