1

在此处输入图像描述

这就是我希望我的 pdf 的样子。但是当我将此html转换为pdf时，输出是这样的

在此处输入图像描述

下面的 HTML 代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test pdf</title>
</head>

<body>
<table width="100%" height="113" border="2" cellpadding="0" cellspacing="0">
  <tr>
    <td width="150" height="113" rowspan="2"><img src="images/mylogo.jpg" alt=" " height="113" width="150" /></td>
    <td height="93" align="right"><h1>INVOICE</h1></td>
  </tr>
  <tr>
    <td bgcolor="#993366"></td>
  </tr>
</table>

</body>
</html>

我尝试过使用 div 并尝试了各种选项，但最终输出类似于上面的输出。

谁能指出我正确的方向？

4

2 回答 2

2

使用 Mpdf。创建pdf文件非常有用。

http://www.mpdf1.com/mpdf/index.php

于 2013-06-11T06:26:35.883 回答
1

行跨度和计算第二行的高度似乎存在问题。这似乎是 dompdf 在处理此代码时的错误行为。我向问题跟踪器发布了一份报告（如果您有兴趣）。

您可以在没有表格的情况下创建相同的布局，从而实现更精确的控制。您是否考虑过以不同的方式创建标题？例如

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test pdf</title>
  </head>

  <body>
    <div style="height: 113px; margin: 0px; padding: 0px; background-color: #993366; border: 2px solid gray">
      <div style="float: left; width: 150px;"><img src="http://placekitten.com/150/113" alt=" " height="113" width="150" /></div>
      <div style="background-color: white; padding: 30px 0px 30px 0px; text-align: right;"><h1 style="margin: 0px;">INVOICE</h1></div>
    </div>
  </body>
</html>
于 2013-06-11T15:37:07.093 回答