TCPDF 不呈现所有 CSS 属性
Posted
技术标签:
【中文标题】TCPDF 不呈现所有 CSS 属性【英文标题】：TCPDF not render all CSS properties 【发布时间】：2011-03-25 03:54:52 【问题描述】：我尝试制作一个包含 CSS 和 html 的 PDF，但我的 CSS 没有出现在我的 PDF 中。唯一考虑的是字体大小和字体颜色。
我给你代码（抱歉，有点长……）
$config = sfTCPDFPluginConfigHandler::loadConfig('my_config');
$doc_title = "Fiche Logement";
$html = <<<EOF
<style>
.informations
padding: 10px;
margin: 10px;
border: 1px dotted black;
.informations table
margin-top: 10px;
#modif
margin: 20px;
text-align: left;
float: right;
#modif th
padding-left: 10px;
#modif td
padding-left: 10px;
#adresse
width: 307px;
float: left;
#reservataire
width: 307px;
float: right;
#intergen
width: 307px;
float: right;
#infos
width: 290px;
float: left;
#handicap
padding-bottom: 12px;
width: 324px;
float: right;
#charges
margin-bottom: 20px;
width: 307px;
float: left;
#loyer
width: 307px;
float: right;
#commentaires
clear: both;
h2
font-variant: small-caps;
text-align: center;
font-size: 19px;
font-weight: bold;
padding: 0px 0px 2px 5px;
margin: 15px 0px 20px 0px;
color: #000000;
border-top: 1px dotted black;
border-bottom: 1px dotted black;
h3
width: 250px;
font-variant: small-caps;
font-size: 15px;
font-weight: bold;
padding: 0px 0px 0px 5px;
margin: 0px;
color: #225D6D;
border-top: 1px dotted black;
border-bottom: 1px dotted black;
</style>
<div id='intergen' class='informations'>
<h3>Intergénérationnel</h3>
<table>
<tr>
<th>Intergénérationnel :</th> <td><?php echo \$logement->getIntergen() ?></td>
</tr>
</table>
</div>
<div id='infos' class='informations'>
<h3>Informations logement</h3>
<table>
<tr>
<th>Bâtiment :</th> <td><?php echo \$logement->Parclogement->getBatiment() ?></td>
</tr>
<tr>
<th>Taille :</th> <td><?php echo \$logement->getTaille() ?></td>
</tr>
<tr>
<th>Type :</th> <td><?php echo \$logement->getTypelog() ?></td>
</tr>
<tr>
<th>Surface habitable :</th> <td><?php if(\$logement->getSurfacehab() == 0) echo 'Non Spécifié'; else echo \$logement->getSurfacehab(). " m²"; ?></td>
</tr>
<tr>
<th>Chauffage :</th> <td><?php echo \$logement->getChauffage() ?></td>
</tr>
<tr>
<th>Ascenseur :</th> <td><?php echo \$logement->getAscenseur() ?></td>
</tr>
</table>
</div>
<div id='handicap' class='informations'>
<h3>Infrastructures handicapés</h3>
<table>
<tr>
<th>Immeuble accessible :</th> <td><?php echo \$logement->getAccessibl() ?></td>
</tr>
<tr>
<th>Ascenceur accessible :</th> <td><?php echo \$logement->getAscenseuracc() ?></td>
</tr>
<tr>
<th>Logement adaptable :</th> <td><?php echo \$logement->getAdaptable() ?></td>
</tr>
<tr>
<th>Logement adapté :</th> <td><?php echo \$logement->getAdapte() ?></td>
</tr>
</table>
</div>
EOF;
//create new PDF document (document units are set by default to millimeters)
$pdf = new sfTCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true);
// set document information
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor(PDF_AUTHOR);
$pdf->SetTitle($doc_title);
//set default header data
$pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE, PDF_HEADER_STRING);
//set margins
$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);
//set auto page breaks
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
//set header and footer fonts
$pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));
$pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));
//set default monospaced font
$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);
// Fixe la taille de la page
$pdf->SetDisplayMode(90);
//initialize document
$pdf->SetFont('helvetica', '', 10);
$pdf->AddPage();
// output some HTML code
$pdf->writeHTML($html , true, false, true, false, '');
//reset pointer to the last page
$pdf->lastPage();
// Close and output PDF document
$pdf->Output('fichelogement.pdf', 'I');
// Stop symfony process
throw new sfStopException();
【问题讨论】：
我知道这是一个非常古老的问题。但是仍然相关，因为我不得不满足于同样的问题。一种可能的解决方案是使用 line-height 和 text-indent 代替尝试使用填充/边距。 【参考方案1】：首先，您应该注意 PDF 和 HTML 以及几乎没有任何共同点的不同格式。如果 TCPDF 允许您使用 HTML 和 CSS 提供输入数据，那是因为它为这两种语言实现了一个简单的解析器，并试图弄清楚如何将其翻译成 PDF。因此，TCPDF 只支持 HTML 和 CSS 规范的一小部分是合乎逻辑的，即使在受支持的东西中，它也可能不如一流的网络浏览器那么完美。
也就是说，问题是：支持什么，不支持什么？文档基本上跳过了问题，让您享受试错法。
查看源代码，我们可以看到有一个名为 TCPDF::getHtmlDomArray() 的受保护方法，除其他外，它解析 CSS 声明。我可以看到font-family、list-style-type 或text-indent 之类的东西，但据我所知，没有margin 或padding，而且毫无疑问，根本没有float。
总结一下：使用 TCPDF，您可以使用 CSS 进行一些基本格式设置。如果您需要从 HTML 转换为 PDF，那是错误的工具。 （如果是这样，我可以建议wkhtmltopdf吗？）
【讨论】：
+1 对于这个答案，我们一直在使用 TCPDF 中可用的“writeHTMLCell”函数，并且 CSS 边距属性似乎被完全忽略了，但是当附加 HTML 单元格时，有参数可以传递指定绝对坐标或相对坐标。 仅供参考，这个答案已经过时了。我不确切知道支持什么，不支持什么，但我知道在<table> 标签上你可以设置填充。由于某种原因，它在<td> 上不起作用，因此您将不得不用表格进行大量包装。【参考方案2】：
支持的标签有：a、b、blockquote、br、dd、del、div、dl、dt、em、font、h1、h2、h3、h4、h5、h6、hr、i、img、li、ol , p, pre, small, span, strong, sub, sup, table, tcpdf, td, th, thead, tr, tt, u, ul
所有 HTML 属性必须用双引号括起来
【讨论】：
【参考方案3】：TCPPDF 5.9.010 (2010-10-27) - 添加了对表格的 CSS 属性“border-spacing”和“padding”的支持。
【讨论】：
【参考方案4】：我最近在使用我的 CSS 时遇到了同样的问题。看看下面的代码。在我将标准 CSS 更改为 PHP 可以理解的格式后，它对我有用
下面的代码示例
$table = '<table cellspacing="0" cellpadding="55%">
<tr valign="bottom">
<td class="header1" rowspan="2" align="center" valign="middle"
>Category</td>
<td class="header1" rowspan="2" align="center" valign="middle"
>Project Description</td>
</tr></table>';
【讨论】：
或者您可以使用单引号而不是转义双引号。 有趣的是你应该提到这一点。我一直在一个项目（5.9.104（2011-08-01））中使用旧版本的 TCPDF。这可能只与这个版本和更早的版本有关，但是当写入支持 HTML 的 TCPDF 单元时，HTML 属性引号 必须 是双引号。否则，该属性将被忽略。【参考方案5】：TCPD 6.2.11 (2015-08-02)
当包含在<style> 标记中时，有些东西将不起作用，但是如果将它们添加到 HTML 标记中的style="" 属性中，它们就会起作用。例如。表格填充 - 这不起作用：
table
padding: 5px;
这确实：
<table style="padding: 5px;">
【讨论】：
这应该是答案【参考方案6】：在我写这篇文章的那一刻，TCPDF 只支持表格填充。
Link to their forum page with that information
【讨论】：
【参考方案7】：自 5.7 版起，TCPDF 包含对 CSS 边框的支持。 尚不支持边距、填充和浮动。 查看 TCPDF 网站http://www.tcpdf.org 并咨询官方论坛以获取更多信息。
【讨论】：
【参考方案8】：我最近遇到了同样的问题，并找到了一种解决方法，尽管它只有在您可以更改 html 代码以适应时才有用。
我使用表格来实现我的填充布局，因此为了创建一个相当于带有内部填充的 div，我制作了一个 3 列/3 行的表格，并将内容放在中心行/列中。第一和最后一列/行用于填充。
例如。
<table>
<tr>
<td > </td>
<td> </td>
<td > </td>
</tr>
<tr>
<td> </td>
<td>content goes here</td>
<td> </td>
</tr>
<tr>
<td > </td>
<td> </td>
<td > </td>
</tr>
</table>
希望对您有所帮助。
乔
【讨论】：
对于顶部\底部填充，我添加了我发现了这个：
// Remove tag bottom and top margins
$tagvs = array( 'p' => array(
0 => array('h' => 0, 'n' => 0),
1 => array('h' => 0, 'n' => 0)
)
);
$pdf->setHtmlVSpace($tagvs);
在这里：https://tcpdf.org/examples/example_061/
使用它来删除“p”标签属性（底部和顶部），然后将“p”文本放置在单元格内。
【讨论】：
【参考方案10】：在没有额外表格元素的情况下设置自定义填充只是一个小技巧。 用这种方式就行了（TCPD 6.2.11）
<table border="0" style="padding-left: 10px; padding-bottom: 15px;">
<tr>
<td style="border: 1px solid grey;"> One two three </td>
<td style="border: 1px solid grey;"> Four five six </td>
</tr>
</table>
【讨论】：
请记住，如果您使用填充 CSS，则不能在您的<table> 标记中也包含 cellpadding="0" cellspacing="0"，否则它们会覆盖 CSS。以上是关于TCPDF 不呈现所有 CSS 属性的主要内容，如果未能解决你的问题，请参考以下文章
“aspNetDisabled”类在哪里定义，为啥 ASP.NET 会为它呈现干扰性的重复 CSS“类”属性？