table 将 html 转换为 PDF 时未在 iTextSharp 中设置宽度

Question

我正在尝试将 html 转换为 pdf，但我面临的问题是 html table 标签宽度设置不正确..

这是我的html

<table cellpadding='4' cellspacing='4' border='0' width='100%' style='width:100%'>
    <tr style='background-color:#000000'>
        <td colspan='2' align='center' valign='middle' width='100%'>
            <font face='Calibri' size='6' color='#FFFFFF'>Retail Natural Gas Deal Sheet</font>
        </td>
    </tr>
    <tr>
        <td colspan='2' width='100%'>&nbsp;</td>
    </tr>
    <tr>
        <td width='90%' style='width:90%'>
            <table cellpadding='0' cellspacing='0' border='0' width='100%'>
                <tr>
                    <td width='42%'>
                        <font face='Calibri' size='4'>
                            <b>Deal Number</b>
                        </font>
                    </td>
                    <td width='1%'>&nbsp;</td>
                    <td width='57%'>
                        <font face='Calibri' size='4'>
                            <b>15RTLG7149</b>
                        </font>
                    </td>
                </tr>
                <tr>
                    <td colspan='3' width='100%'>&nbsp;</td>
                </tr>
                <tr>
                    <td width='42%'>
                        <font face='Calibri' size='2'>
                            <b>Trade Date</b>
                        </font>
                    </td>
                    <td width='1%'>&nbsp;</td>
                    <td width='57%'>
                        <font face='Calibri' size='2'>February 09, 2015</font>
                    </td>
                </tr>
                <tr>
                    <td width='42%'>
                        <font face='Calibri' size='2'>
                            <b>Price Date</b>
                        </font>
                    </td>
                    <td width='1%'>&nbsp;</td>
                    <td width='57%'>
                        <font face='Calibri' size='2'>February 09, 2015</font>
                    </td>
                </tr>
                <tr>
                    <td width='42%'>
                        <font face='Calibri' size='2'>
                            <b>Authorize Date</b>
                        </font>
                    </td>
                    <td width='1%'>&nbsp;</td>
                    <td width='57%'>
                        <font face='Calibri' size='2'>February 09, 2015</font>
                    </td>
                </tr>
                <tr>
                    <td colspan='3' width='100%'>&nbsp;</td>
                </tr>
            </table>
        </td>
        <td width='10%' style='width:10%' valign='top'>
            <table cellpadding='0' cellspacing='0' border='0' width='100%'>
                <tr>
                    <td colspan='2' align='center' width='100%'>
                        <font face='Calibri' size='2'>
                            <b>Volumes (MMMBtu)</b>
                        </font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

这是我用来生成 pdf 的 C# 代码

        Document pdfDoc = new Document();
        //Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 10f, 0f);
        //HTMLWorker htmlparser = new HTMLWorker(pdfDoc);
        using (MemoryStream memoryStream = new MemoryStream())
        {
            PdfWriter writer = PdfWriter.GetInstance(pdfDoc, memoryStream);
            pdfDoc.Open();
            XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, new StringReader(HTML));
            pdfDoc.Close();
            byte[] bytes = memoryStream.ToArray();
            memoryStream.Close();

            return bytes;
        }

但这就是它在 pdf 中的呈现方式。我找不到正确的答案。我需要帮助。提前致谢。

http://i.stack.imgur.com/8WyBh.jpg

Answer 1

我已将您的 HTML 复制粘贴到文本编辑器（Notepad++；在下面的屏幕截图中标记为 1）。我已在浏览器中打开此 HTML（Chrome；在下面的屏幕截图中标记为 2）。我已将 HTML 转换为 PDF（使用 XML Worker；PDF 在下面的屏幕截图中标记为 3）。

当我将在浏览器中看到的内容与在 PDF 中看到的内容进行比较时，我的印象是 iText 的 XML Worker 做得很好。我在浏览器中看到的内容与我在 PDF 中看到的内容没有太大区别。

但是，当我查看您的 HTML 时，我看到了不一致之处。您是否尝试过在浏览器中查看 HTML？它看起来不像你预期的那样，是吗？似乎问题不是由 iText 引起的，而是由您创建 HTML 的方式引起的。请告诉我们 HTML 在浏览器中的外观是否符合您的预期。如果不是，请解释您的期望。现在，很难理解这个问题，因为我在 PDF 中看到的内容与我在浏览器中看到的内容非常吻合。

更新：

在您的问题中，您没有添加任何边框 (border='0')，因此很难理解您的意思。我现在添加了边框，因此 HTML 看起来像这样：

您希望 PDF 看起来像这样：

如果您像这样简化 HTML，这将非常容易：

<table cellpadding='4' cellspacing='4' border='1' width='100%' style='width:100%'>
    <tr style='background-color:#000000'>
        <td colspan='2' align='center' valign='middle'>
            <font face='Calibri' size='6' color='#FFFFFF'>XXXX XXXXX XXXXX</font>
        </td>
    </tr>
    <tr>
        <td colspan='2'>&nbsp;</td>
    </tr>
    <tr>
        <td width='90%' style='width:90%'>
            <table cellpadding='0' cellspacing='0' border='1' width='100%'>
                <tr>
                    <td width='42%'>
                        <font face='Calibri' size='4'>
                            <b>Deal Number</b>
                        </font>
                    </td>
                    <td width='1%'>&nbsp;</td>
                    <td width='57%'>
                        <font face='Calibri' size='4'>
                            <b>XXXXXXXXXX</b>
                        </font>
                    </td>
                </tr>
                <tr>
                    <td colspan='3' width='100%'>&nbsp;</td>
                </tr>
                <tr>
                    <td width='42%'>
                        <font face='Calibri' size='2'>
                            <b>Trade Date</b>
                        </font>
                    </td>
                    <td width='1%'>&nbsp;</td>
                    <td width='57%'>
                        <font face='Calibri' size='2'>February 09, 2015</font>
                    </td>
                </tr>
                <tr>
                    <td width='42%'>
                        <font face='Calibri' size='2'>
                            <b>Price Date</b>
                        </font>
                    </td>
                    <td width='1%'>&nbsp;</td>
                    <td width='57%'>
                        <font face='Calibri' size='2'>February 09, 2015</font>
                    </td>
                </tr>
                <tr>
                    <td width='42%'>
                        <font face='Calibri' size='2'>
                            <b>Authorize Date</b>
                        </font>
                    </td>
                    <td width='1%'>&nbsp;</td>
                    <td width='57%'>
                        <font face='Calibri' size='2'>February 09, 2015</font>
                    </td>
                </tr>
                <tr>
                    <td colspan='3' width='100%'>&nbsp;</td>
                </tr>
            </table>
        </td>
        <td width='10%' style='width:10%' valign='top'>
            <table cellpadding='0' cellspacing='0' border='1' width='100%'>
                <tr>
                    <td colspan='2' align='center' width='100%'>
                        <font face='Calibri' size='2'>
                            <b>Xxxxxxx (XXXXXXX)</b>
                        </font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

我改变了什么？我在 colspan='2' 所在的 <td> 标签中删除了 width='100%'。这个信息是模棱两可的：你是说这两列一起应该占宽度的 100%。然而：

您已经在 <table> 标签中定义了它，其中还有 width='100%' 和
如果一个单元格的 colspan 为 2，而你说这个单元格应该占据 100% 的宽度，那么就没有办法告诉每列的宽度。把 width='100%' 放在那里是没有意义的。

iTextSharp 根据第一行定义列的宽度，它可以在其中找到有关宽度的信息。在这种情况下，此类信息的第一行宽度是在具有 2 列的 table 中具有 colspan 2 的行。您将这两列的宽度定义为 100%，iTextSharp 将其解释为好像您要说每列占宽度的 50% (100% / 2)。

如果你删除这个不明确的信息，iText 将根据第三行中定义的宽度（这是你所期望的）来定义列的宽度。

table 将 html 转换为 PDF 时未在 iTextSharp 中设置宽度

table width not set in iTextSharp when converting html to PDF

pdf-generation

itextsharp

pdf-conversion