TCPDF忽略了一些CSS。

huangapple go评论62阅读模式
英文:

TCPDF ignored some CSS

问题

TCPDF似乎无法正确渲染您提供的CSS规则。您可以尝试以下解决方法:

  1. 内联样式:尝试将CSS样式直接嵌入到HTML表格元素中,而不是使用外部样式表。这样,TCPDF可能更容易识别和应用样式。

  2. 使用TCPDF样式:TCPDF具有自己的样式系统,您可以使用TCPDF提供的样式方法来设置表格样式,而不是依赖于外部CSS。这可能需要稍微改变您的代码,以适应TCPDF的样式设置方法。

  3. 打印为图像:如果以上方法都无法解决问题,您还可以考虑将HTML表格渲染为图像,然后将图像插入到PDF中。这将确保表格以预期的方式显示,但可能会增加文件大小。

请根据您的需求尝试上述方法,看看哪种方法最适合您的情况。希望这有助于解决问题。

英文:

I am trying to use TCPDF to create a simple table with the following design:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;style&gt;
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  td,
  th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }
&lt;/style&gt;

&lt;body&gt;

  &lt;h2&gt;HTML Table&lt;/h2&gt;

  &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Company&lt;/th&gt;
      &lt;th&gt;Contact&lt;/th&gt;
      &lt;th&gt;Country&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
      &lt;td&gt;Maria Anders&lt;/td&gt;
      &lt;td&gt;Germany&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Centro comercial Moctezuma&lt;/td&gt;
      &lt;td&gt;Francisco Chang&lt;/td&gt;
      &lt;td&gt;Mexico&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Ernst Handel&lt;/td&gt;
      &lt;td&gt;Roland Mendel&lt;/td&gt;
      &lt;td&gt;Austria&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Island Trading&lt;/td&gt;
      &lt;td&gt;Helen Bennett&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Laughing Bacchus Winecellars&lt;/td&gt;
      &lt;td&gt;Yoshi Tannamuri&lt;/td&gt;
      &lt;td&gt;Canada&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Magazzini Alimentari Riuniti&lt;/td&gt;
      &lt;td&gt;Giovanni Rovelli&lt;/td&gt;
      &lt;td&gt;Italy&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

&lt;/body&gt;

<!-- end snippet -->

But when I use the following code in TCPDF it ignores the colors in the CSS:

    $pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, &#39;UTF-8&#39;, false);

    // set document information
    $pdf-&gt;SetCreator(PDF_CREATOR);
    $pdf-&gt;SetAuthor(&#39;Nicola Asuni&#39;);
    $pdf-&gt;SetTitle(&#39;TCPDF Example 001&#39;);
    $pdf-&gt;SetSubject(&#39;TCPDF Tutorial&#39;);
    $pdf-&gt;SetKeywords(&#39;TCPDF, PDF, example, test, guide&#39;);

    // set default header data
    $pdf-&gt;SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE . &#39; 001&#39;, PDF_HEADER_STRING, array(0, 64, 255), array(0, 64, 128));
    $pdf-&gt;setFooterData(array(0, 64, 0), array(0, 64, 128));

    // set header and footer fonts
    $pdf-&gt;setHeaderFont(array(PDF_FONT_NAME_MAIN, &#39;&#39;, PDF_FONT_SIZE_MAIN));
    $pdf-&gt;setFooterFont(array(PDF_FONT_NAME_DATA, &#39;&#39;, PDF_FONT_SIZE_DATA));

    // set default monospaced font
    $pdf-&gt;SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);

    // set margins
    $pdf-&gt;SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
    $pdf-&gt;SetHeaderMargin(PDF_MARGIN_HEADER);
    $pdf-&gt;SetFooterMargin(PDF_MARGIN_FOOTER);

    // set auto page breaks
    $pdf-&gt;SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);

    // set image scale factor
    $pdf-&gt;setImageScale(PDF_IMAGE_SCALE_RATIO);

    // set some language-dependent strings (optional)
    if (@file_exists(dirname(__FILE__) . &#39;/lang/eng.php&#39;)) {
        require_once(dirname(__FILE__) . &#39;/lang/eng.php&#39;);
        $pdf-&gt;setLanguageArray($l);
    }

    // ---------------------------------------------------------

    // set default font subsetting mode
    $pdf-&gt;setFontSubsetting(true);

    // Set font
    // dejavusans is a UTF-8 Unicode font, if you only need to
    // print standard ASCII chars, you can use core fonts like
    // helvetica or times to reduce file size.
    $pdf-&gt;SetFont(&#39;dejavusans&#39;, &#39;&#39;, 14, &#39;&#39;, true);

    // Add a page
    // This method has several options, check the source code documentation for more information.
    $pdf-&gt;AddPage();

    // get HTMl file and turn to a raw string
    $html =  view(&#39;my-html-file&#39;)-&gt;render(); // it&#39;s a method in Laravel that converts the HTML to string

    // Print text using writeHTMLCell()
    $pdf-&gt;writeHTMLCell(0, 0, &#39;&#39;, &#39;&#39;, $blade_view_html, 0, 1, 0, true, &#39;&#39;, true);

    // ---------------------------------------------------------

    // Close and output PDF document
    // This method has several options, check the source code documentation for more information.
    $pdf-&gt;Output(&#39;example_001.pdf&#39;, &#39;I&#39;);
}

The result is different:

TCPDF忽略了一些CSS。

In the docs I did not find any reason as to why specifically (maybe) this CSS rule is not supported, because some other CSS rules are supported, for example:

https://tcpdf.org/examples/example_048/

答案1

得分: 1

TCPDF对CSS的支持非常有限,不支持所有属性。实际上,迄今为止没有一款PHP PDF库完全支持CSS。如果您有进一步的问题,请参考此帖子并查阅官方文档

对于您的情况,生成PDF的一种方法是将类添加到所需的行,例如使用以下类:

.grey1 {
    background-color: #dddddd;
}

然后,首先创建以下HTML(html1.html):

<style>
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  td,
  th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }

  .grey1 {
    background-color: #dddddd;
  }
</style>

<body>
  <h2>HTML Table</h2>

  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr class="grey1">
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <!-- 其他行省略 -->
  </table>
</body>

然后,您可以使用以下PHP代码生成PDF:

<?php
require_once('./tcpdf/config/lang/eng.php');
require_once('./tcpdf/tcpdf.php');

$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

// 设置文档信息
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('Ken Lee');
$pdf->SetTitle('PDF');
$pdf->SetSubject('PDF');
$pdf->SetKeywords('TCPDF, Createch');

// 设置页眉和页脚字体
$pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));

// 设置默认的等宽字体
$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);

// 设置页边距
$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
$pdf->SetHeaderMargin(0);
$pdf->SetFooterMargin(0);

// 移除默认页脚
$pdf->setPrintFooter(false);

// 设置自动分页
$pdf->SetAutoPageBreak(TRUE, 0);

// 设置图像缩放因子
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);

// 设置一些依赖语言的字符串(可选)
if (@file_exists(dirname(__FILE__).'/lang/eng.php')) {
    require_once(dirname(__FILE__).'/lang/eng.php');
    $pdf->setLanguageArray($l);
}

// ---------------------------------------------------------

$pdf->SetFont('times', '', 12);

$pdf->AddPage();

$html = file_get_contents('html1.html');

$pdf->writeHTML($html, true, false, true, false, '');

$y1 = chr(mt_rand(65, 90));
$y2 = chr(mt_rand(65, 90));
$y3 = chr(mt_rand(48, 57));
$y4 = chr(mt_rand(65, 90));
$y5 = chr(mt_rand(48, 57));
$y6 = chr(mt_rand(65, 90));
$y7 = chr(mt_rand(48, 57));
$y8 = chr(mt_rand(48, 57));
$y9 = chr(mt_rand(65, 90));

$ry = $y1.$y2.$y3.$y4.$y5.$y6.$y7.$y8.$y9;

$pdf->Output($ry.".pdf",'FD');
?>

生成的结果将是:

TCPDF忽略了一些CSS。

英文:

TCPDF has a very limited CSS support. It doesn't support all attributes. (Actually there is no PHP PDF library which supports fully CSS up to the present moment).

Please see this post and consult the official documentation if you have further questions

For your case, one of the ways to generate the pdf is to add the class to required rows , such as using the following class:

  .grey1 {
background-color: #dddddd;
}

So, first create the following HTML (html1.html)

&lt;style&gt;
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.grey1 {
background-color: #dddddd;
}
&lt;/style&gt;
&lt;body&gt;
&lt;h2&gt;HTML Table&lt;/h2&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;th&gt;Company&lt;/th&gt;
&lt;th&gt;Contact&lt;/th&gt;
&lt;th&gt;Country&lt;/th&gt;
&lt;/tr&gt;
&lt;tr class=&quot;grey1&quot;&gt;
&lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
&lt;td&gt;Maria Anders&lt;/td&gt;
&lt;td&gt;Germany&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Centro comercial Moctezuma&lt;/td&gt;
&lt;td&gt;Francisco Chang&lt;/td&gt;
&lt;td&gt;Mexico&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;grey1&quot;&gt;
&lt;td&gt;Ernst Handel&lt;/td&gt;
&lt;td&gt;Roland Mendel&lt;/td&gt;
&lt;td&gt;Austria&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Island Trading&lt;/td&gt;
&lt;td&gt;Helen Bennett&lt;/td&gt;
&lt;td&gt;UK&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;grey1&quot;&gt;
&lt;td&gt;Laughing Bacchus Winecellars&lt;/td&gt;
&lt;td&gt;Yoshi Tannamuri&lt;/td&gt;
&lt;td&gt;Canada&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Magazzini Alimentari Riuniti&lt;/td&gt;
&lt;td&gt;Giovanni Rovelli&lt;/td&gt;
&lt;td&gt;Italy&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;

Then, you can use PHP such as the following to generate the PDF:

&lt;?php
require_once(&#39;./tcpdf/config/lang/eng.php&#39;);
require_once(&#39;./tcpdf/tcpdf.php&#39;);
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, &#39;UTF-8&#39;, false);
// set document information
$pdf-&gt;SetCreator(PDF_CREATOR);
$pdf-&gt;SetAuthor(&#39;Ken Lee&#39;);
$pdf-&gt;SetTitle(&#39;PDF&#39;);
$pdf-&gt;SetSubject(&#39;PDF&#39;);
$pdf-&gt;SetKeywords(&#39;TCPDF, Createch&#39;);
// $pdf-&gt;SetProtection(array(&#39;copy&#39;), &#39;&#39;, null, 0, null);
// set header and footer fonts
$pdf-&gt;setHeaderFont(Array(PDF_FONT_NAME_MAIN, &#39;&#39;, PDF_FONT_SIZE_MAIN));
// set default monospaced font
$pdf-&gt;SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);
// set margins
$pdf-&gt;SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
$pdf-&gt;SetHeaderMargin(0);
$pdf-&gt;SetFooterMargin(0);
// remove default footer
$pdf-&gt;setPrintFooter(false);
// set auto page breaks
$pdf-&gt;SetAutoPageBreak(TRUE, 0);
// set image scale factor
$pdf-&gt;setImageScale(PDF_IMAGE_SCALE_RATIO);
// set some language-dependent strings (optional)
if (@file_exists(dirname(__FILE__).&#39;/lang/eng.php&#39;)) {
require_once(dirname(__FILE__).&#39;/lang/eng.php&#39;);
$pdf-&gt;setLanguageArray($l);
}
// ---------------------------------------------------------
$pdf-&gt;SetFont(&#39;times&#39;, &#39;&#39;, 12);
$pdf-&gt;AddPage();
$html=file_get_contents(&#39;html1.html&#39;);
$pdf-&gt;writeHTML($html, true, false, true, false, &#39;&#39;);
$y1=chr(mt_rand(65, 90));
$y2=chr(mt_rand(65, 90));
$y3=chr(mt_rand(48, 57));
$y4=chr(mt_rand(65, 90));
$y5=chr(mt_rand(48, 57));
$y6=chr(mt_rand(65, 90));
$y7=chr(mt_rand(48, 57));
$y8=chr(mt_rand(48, 57));
$y9=chr(mt_rand(65, 90));
$ry=$y1.$y2.$y3.$y4.$y5.$y6.$y7.$y8.$y9;
$pdf-&gt;Output($ry.&quot;.pdf&quot;,&#39;FD&#39;);
?&gt;

The result will be :

TCPDF忽略了一些CSS。

huangapple
  • 本文由 发表于 2023年5月14日 21:17:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/76247674.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定