TCPDF 不呈现所有 CSS 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3404095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TCPDF not render all CSS properties
提问by Elorfin
I try to make a PDF writing CSS and HTML but my CSS doesn't appear in my PDF. The only thing considered is the font-size and font-color.
我尝试制作一个编写 CSS 和 HTML 的 PDF，但我的 CSS 没有出现在我的 PDF 中。唯一考虑的是字体大小和字体颜色。
I give you the code (sorry, it's a little long...)
我给你代码（抱歉，有点长......）
$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>Batiment :</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(). " m2";} ?></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();
回答by álvaro González
In the first place, you should note that PDF and HTML and different formats that hardly have anything in common. If TCPDF allows you to provide input data using HTML and CSS it's because it implements a simple parser for these two languages and tries to figure out how to translate that into PDF. So it's logical that TCPDF only supports a little subset of the HTML and CSS specification and, even in supported stuff, it's probably not as perfect as in first class web browsers.
首先，您应该注意到 PDF 和 HTML 以及几乎没有任何共同点的不同格式。如果 TCPDF 允许您使用 HTML 和 CSS 提供输入数据，那是因为它为这两种语言实现了一个简单的解析器，并试图弄清楚如何将其转换为 PDF。因此，TCPDF 仅支持 HTML 和 CSS 规范的一小部分是合乎逻辑的，即使在支持的内容中，它也可能不如一流的 Web 浏览器完美。
Said that, the question is: what's supported and what's not? The documentation basically skips the issue and let's you enjoy the trial and error method.
说到这里，问题是：支持什么，不支持什么？文档基本上跳过了这个问题，让你享受试错法。
Having a look at the source code, we can see there's a protected method called TCPDF::getHtmlDomArray()that, among other things, parses CSS declarations. I can see stuff like font-family, list-style-typeor text-indentbut there's no marginor paddingas far as I can see and, definitively, there's no floatat all.
查看源代码，我们可以看到有一个受保护的方法，它被称为TCPDF::getHtmlDomArray()解析 CSS 声明。我可以看到类似的东西font-family，list-style-type或者text-indent但没有margin或padding就我所能看到的，确切地说，根本没有float。
To sum up: with TCPDF, you can use CSS for some basicformatting. If you need to convert from HTML to PDF, it's the wrong tool. (If that's the case, may I suggest wkhtmltopdf?)
总结：使用 TCPDF，您可以使用 CSS 进行一些基本格式设置。如果您需要从 HTML 转换为 PDF，那么它就是错误的工具。（如果是这样，我可以建议wkhtmltopdf吗？）
回答by Rajkumar
Supported tags are: 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
支持的标签有：a、b、blockquote、br、dd、del、div、dl、dt、em、字体、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
All the HTML attributes must be enclosed in double-quotes
所有 HTML 属性都必须用双引号括起来
回答by KotaKomputer
TCPDF 5.9.010 (2010-10-27) - Support for CSS properties 'border-spacing' and 'padding' for tables were added.
TCPDF 5.9.010 (2010-10-27) - 添加了对表格的 CSS 属性“边框间距”和“填充”的支持。
回答by dschnizzy
I recently ran into the same problem having the TCPDF work with my CSS. Take a look at the code below. It worked for me after I changed the standard CSS to a format PHP would understand
我最近遇到了同样的问题，让 TCPDF 与我的 CSS 一起工作。看看下面的代码。在我将标准 CSS 更改为 PHP 可以理解的格式后，它对我有用
Code Sample Below
下面的代码示例
$table = '<table width="100%" cellspacing="0" cellpadding="55%">
<tr valign="bottom">
<td class="header1" rowspan="2" align="center" valign="middle"
width="6%">Category</td>
<td class="header1" rowspan="2" align="center" valign="middle"
width="26%">Project Description</td>
</tr></table>';
回答by William Turrell
TCPDF 6.2.11 (2015-08-02)
TCPDF 6.2.11 (2015-08-02)
Some things won't work when included within <style>tags, however they will if added in a style=""attribute in the HTML tag. E.g. table padding – this doesn'twork:
当包含在<style>标签中时，有些东西将不起作用，但是如果将它们添加style=""到 HTML 标签的属性中，它们就会起作用。例如表格填充——这不起作用：
table {
padding: 5px;
}
This does:
这确实：
<table style="padding: 5px;">
回答by Jonathas Pacífico
At the moment I write this, TCPDF only supports padding for tables.
在我写这篇文章的时候，TCPDF 只支持表格的填充。
回答by user412934
Since version 5.7 TCPDF includes support for CSS borders. Margins, padding and float are not yet supported. Check the TCPDF website at http://www.tcpdf.organd consult the official forum for further information.
由于版本 5.7 TCPDF 包括对 CSS 边框的支持。尚不支持边距、填充和浮动。查看 TCPDF 网站http://www.tcpdf.org并咨询官方论坛以获取更多信息。
回答by Joe
I recently ran into the same problem, and found a workaround though it'll only be useful if you can change the html code to suit.
我最近遇到了同样的问题，并找到了一种解决方法，尽管它只有在您可以更改 html 代码以适应时才有用。
I used tables to achieve my padded layout, so to create the equivalent of a div with internal padding I made a table with 3 columns/3 rows and put the content in the centre row/column. The first and last columns/rows are used for the padding.
我使用表格来实现我的填充布局，因此为了创建具有内部填充的 div 的等效项，我制作了一个具有 3 列/3 行的表格，并将内容放在中心行/列中。第一列和最后一列/行用于填充。
eg.
例如。
<table>
<tr>
<td width="10"> </td>
<td> </td>
<td width="10"> </td>
</tr>
<tr>
<td> </td>
<td>content goes here</td>
<td> </td>
</tr>
<tr>
<td width="10"> </td>
<td> </td>
<td width="10"> </td>
</tr>
</table>
Hope that helps.
希望有帮助。
Joe
乔
回答by Domingo
I found this:
我找到了这个：
// 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);
in here: https://tcpdf.org/examples/example_061/
在这里：https: //tcpdf.org/examples/example_061/
Use it to remove 'p' tags properties (bottom and top), then position the 'p' text inside a cell.
使用它删除“p”标签属性（底部和顶部），然后将“p”文本定位在单元格内。
回答by Alexander Fedorov
Just a small tip for setting custom padding without extra table elements. Just use this way, it works (TCPDF 6.2.11)
只是一个小技巧，用于在没有额外表格元素的情况下设置自定义填充。就用这种方式，它的工作原理（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>
