-1

我在正确使用 HTML 渲染器时遇到问题。它生成 PDF，但由于某种原因，当我的 colspan 为 2 时，它似乎忽略了这一点。

这是整个 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>

这是获取 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;
}

但由于某种原因，生成 PDF 时，PDF 中只有公司信息。没有订单号/订单日期，也没有任何联系信息。

HTML 渲染器是否忽略了额外的 colspan，或者为什么会发生这种情况？

4

1 回答 1

0

HTML 代码似乎是有效的。也许您在添加订单相关信息时破坏了语法。

于 2018-02-26T13:47:51.877 回答