TCPDF 完整页表答案

【问题标题】：TCPDF full page tableTCPDF 完整页表
【发布时间】：2020-04-18 09:38:14
【问题描述】：

我尝试了很多方法来使表格适合页面（A4），如图所示：我搜索了很多，但在网上找不到任何有用的东西。我正在使用动态表格，除了表格的宽度外，一切都很好。这是我的代码：

$content = '<table><thead><tr><th class="bg-dark text-white" align="center">#</th><th align="center" class="bg-dark text-white">Code</th><th align="left" class="bg-dark text-white">Description</th><th align="center" class="bg-dark text-white">Item Type</th></tr></thead><tbody><tr style="background-color: #f2f2f2;"><td align="center">1</td><td align="center">1001</td><td align="left">Pofak</td><td align="center">Fixed Price</td></tr><tr ><td align="center">2</td><td align="center">1002</td><td align="left">Ice</td><td align="center">Weight</td></tr><tr style="background-color: #f2f2f2;"><td align="center">3</td><td align="center">1003</td><td align="left">Minoo</td><td align="center">Fixed Price</td></tr><tr ><td align="center">4</td><td align="center">1004</td><td align="left">Bastani</td><td align="center">Fixed Price</td></tr><tr style="background-color: #f2f2f2;"><td align="center">5</td><td align="center">1005</td><td align="left">Chocolate</td><td align="center">Weight</td></tr><tr ><td align="center">6</td><td align="center">1006</td><td align="left">Brush</td><td align="center">Fixed Price</td></tr><tr style="background-color: #f2f2f2;"><td align="center">7</td><td align="center">1007</td><td align="left">Apple</td><td align="center">Weight</td></tr><tr ><td align="center">8</td><td align="center">1008</td><td align="left">Water</td><td align="center">Fixed Price</td></tr><tr style="background-color: #f2f2f2;"><td align="center">9</td><td align="center">1009</td><td align="left">Cleaner</td><td align="center">Fixed Price</td></tr><tr ><td align="center">10</td><td align="center">1001</td><td align="left">Pofak</td><td align="center">Fixed Price</td></tr><tr style="background-color: #f2f2f2;"><td align="center">11</td><td align="center">1002</td><td align="left">Ice</td><td align="center">Weight</td></tr><tr ><td align="center">12</td><td align="center">1003</td><td align="left">Minoo</td><td align="center">Fixed Price</td></tr><tr style="background-color: #f2f2f2;"><td align="center">13</td><td align="center">1004</td><td align="left">Bastani</td><td align="center">Fixed Price</td></tr><tr ><td align="center">14</td><td align="center">1005</td><td align="left">Chocolate</td><td align="center">Weight</td></tr><tr style="background-color: #f2f2f2;"><td align="center">15</td><td align="center">1006</td><td align="left">Brush</td><td align="center">Fixed Price</td></tr></tbody></table>';
$newContent = '
    <style type="text/css">
    table{width:100%;}
    table, table td, table th{
        border-collapse: collapse;
        border: solid 1px #ababab;
    }
    .text-dark, table td{
        color: #343a40;
    }
    .text-white{
        color: #ffffff;
    }
    table td,
    table th {
        font-size: 11px;
        padding: 3px;
        line-height: 1.2;
        font-family:arial;
    }

    .bg-dark {
        background-color: #343a40;
    }
    .bg-secondary {
        background-color: #6c757d;
    }
    .bg-white {
        background-color: #ffffff;
    }
    .text-left {
        text-align: left;
    }
    .text-right {
        text-align: right;
    }
    .text-center {
        text-align: center;
    }
    </style>
    ';
    $newContent .= '<page>'.$content.'</page>';

    try {
        $html2pdf = new Html2Pdf('P', 'A4', 'en', true, 'UTF-8', 5);
        $html2pdf->pdf->SetDisplayMode('real');
        $html2pdf->writeHTML($newContent);
        $PDFName = "ItemLists_".date('Y.m.d_H.i.s').".pdf";
        $html2pdf->output($PDFName, 'I');
    } catch (Html2PdfException $x) {
        $html2pdf->clean();

        $formatter = new ExceptionFormatter($x);
        echo $formatter->getHtmlMessage();
    }

非常感谢

【问题讨论】：

这实际上是 Html2PDF 库中的一个错误。寻找潜在的解决方法。
值得注意的是，顺便说一句，Html2PDF 使用它自己的 HTML 解析器。 style="width: 100%" 将正确转换的宽度存储在 MM 中（尽管 width 属性没有！）但是 Html2PDF 在表格渲染期间似乎并未实际使用它。

标签： php html css tcpdf

【解决方案1】：

使用 PDF 的服务器端对 CSS 来说不是很好。你试过只使用 HTML 吗？

例如：

<table width="100%">
  <!-- your table code -->
</table>

你也可以试试：

<table style="width: 100%;">
  <!-- your table code -->
</table>

这是一个演示在浏览器中工作的 CodePen。 https://codepen.io/tinacious/pen/PowJRbb

【讨论】：

我尝试了所有这些：<table width="100%"><table style="width:100%;"><table class="w100"><link rel="stylesheet" href="style.css" /> 但问题是，它在 html 上运行良好，但是当我想将它保存为 PDF 时喜欢图片。

【解决方案2】：

Html2PDF 不使用 TCPDF 的 HTML 解析器/渲染系统。它实现了它自己的，并且它的实现不会自动增加列以填充 100% 的空间。

因此，在 Html2PDF 中，您不仅需要在表格上设置 100% 的宽度，还需要为每个单元格设置百分比宽度。（并且由于 Html2PDF 中 width 属性的一些奇怪行为，请使用 CSS 设置宽度。）

TCPPDF 的原生writeHTML 将在没有任何规范的情况下将每列设置为相同的宽度。（例如，一个 4 列表的所有单元格占 25%）但是，它不支持您正在使用的 CSS，因此标记需要稍微调整才能走这条路。

要在 Html2PDF 中模仿这种基本行为，您可以简单地为您的单元格显式添加等效宽度。例如，将宽度规范添加到您的 table td, table th 样式规则中。

下面是一个包含以下 CSS 规则的四列表示例：

table { width: 100%; }
table th, table td { width: 25%; }

当然，当您指定适合您的内容的宽度时，它看起来最好。

更新

我将在下面留下一些关于 TCPDF 的讨论，因为它在一定程度上会导致为 Html2pdf 创建一个可能有用的类。 TCPDF 有一些有用的方法来测量字符串的长度。如果您测量列内字符串的大小，则可以创建自己的自动列大小调整器。

我在 github 上的 https://github.com/b65sol/random-classes 创建了一个概念验证类

首先，我们使用类来调解 HTML 的构建。这样就可以添加用于设置宽度的列类，我们不必解析 HTML 来提取我们正在测量的内容。

然后我们必须选择一些策略来选择列宽。例如，下面的演示测量列并根据最长单词找到每个列的最小宽度百分比。（避免分词）然后根据最长单词和最长完整单元格内容之间的差异按比例分配任何额外空间。我不会将此产品称为准备就绪，因为它是一个概念验证，但我希望您（或其他搜索者）发现它是一个有用的起点。

下面的关键部分是：$tablebuilder->determine_column_widths_by_minimum_strategy('100%', 'aaa')

第一个参数为我们提供了我们正在使用的尺寸参考（100% 的页面，因为我需要它以使测量有用），第二个参数提供一些预设填充字符以添加到我们的测量中以说明文本样式和表格填充差异。

这是它运行的演示： https://b65sol.com/so/59517311_new.php

该类本身可在此处获得： https://github.com/b65sol/random-classes

该演示的代码在这里：

<?php
require 'vendor/autoload.php';
include 'random-classes/html2pdf-full-table-optimizer.php';
use Spipu\Html2Pdf\Html2Pdf;

//First let's build a random table!
$wordlist = ['Chocolate', 'Cake', 'Brownies', 'Cupcakes', 'Coreshock', 'Battery', 'Lead', 'Acid', 'Remilia'];
$wordlist2 = ['Reinforcement Learning', 'Initial Latent Vectors', 'Bag-of-Words', 'Multilayer Perceptron Classifier',
  'Deconvolutional Neural Network', 'Convolutional Neural Network'];
$number_of_columns = rand(3,11);
$number_of_rows = rand(8, 15);
$possible_column_names = ['Unit', 'Description', 'Variable', 'Moon', 'Cheese', 'Lollipop', 'Orange', 'Gir', 'Gaz', 'Zim', 'Dib'];
$possible_column_content_generators = [
  function() {return rand(10,100); },
  function() {return rand(1000, 1999); },
  function() use ($wordlist) {return $wordlist[rand(0, count($wordlist)-1)]; },
  function() use ($wordlist) {return $wordlist[rand(0, count($wordlist)-1)] . ' '. $wordlist[rand(0, count($wordlist)-1)];},
  function() use ($wordlist2) {return $wordlist2[rand(0, count($wordlist2)-1)];},
];

shuffle($possible_column_names);
$list_of_generators = [];
$column_classes = [];
$column_names = [];
for($i = 0; $i < $number_of_columns; $i++) {
  $list_of_generators[$i] = $possible_column_content_generators[rand(0, count($possible_column_content_generators)-1)];
  $column_classes[$i] = ['text-left', 'text-right', 'text-center'][rand(0,2)];
  $column_names[$i] = $possible_column_names[$i];
}
//Got our random stuff, onward to generator!

try {
    $html2pdf = new Html2Pdf('P', 'A4', 'en', true, 'UTF-8', 5);
    $html2pdf->pdf->SetDisplayMode('real');
    $tablebuilder = new Html2PdfTableOptimizer($html2pdf->pdf, '11px', 'helvetica');

    //run table builder... using random data for testing.
    for($i = 0; $i < $number_of_columns; $i++) {
      /*Add a header cell, content is the first parameter, CSS class attribute is second.*/
      $tablebuilder->add_header_cell($column_names[$i], $column_classes[$i] . ' bg-dark text-white');
    }

    for($i = 0; $i < $number_of_rows; $i++) {
      //Start a row.
      $tablebuilder->start_data_row();
      for($col = 0; $col < $number_of_columns; $col++) {
        //Add content and our column classes for td elements
        $tablebuilder->add_data_row_cell($list_of_generators[$col](), $column_classes[$col]);
      }
      //End the row.
      $tablebuilder->end_data_row();
    }
    //Get the table HTML.
    $render = $tablebuilder->render_html();

    $newContent = '
      <style type="text/css">
      table{width:100%;}
      table, table td, table th{
          border-collapse: collapse;
          border: solid 1px #ababab;
      }
      .text-dark, table td{
          color: #343a40;
      }
      .text-white{
          color: #ffffff;
      }
      table td,
      table th {
          font-size: 11px;
          padding: 3px;
          line-height: 1.2;
          font-family:arial;
      }

      .bg-dark {
          background-color: #343a40;
      }
      .bg-secondary {
          background-color: #6c757d;
      }
      .bg-white {
          background-color: #ffffff;
      }
      .row-even {
        background-color: #d1d1d1;
      }
      .text-left {
          text-align: left;
      }
      .text-right {
          text-align: right;
      }
      .text-center {
          text-align: center;
      }

      '.$tablebuilder->determine_column_widths_by_minimum_strategy('100%', 'aaa').'

      </style>
      ';
      $newContent .= '<page>'.$render.'</page>';

      if(!empty($_GET['html'])) {
        echo $newContent;
      } else {
        $html2pdf->writeHTML($newContent);
        $PDFName = "ItemLists_".date('Y.m.d_H.i.s').".pdf";
        $html2pdf->output($PDFName, 'I');
      }
} catch (Html2PdfException $x) {
    $html2pdf->clean();

    $formatter = new ExceptionFormatter($x);
    echo $formatter->getHtmlMessage();
}

更新结束

如果您不想明确指定宽度，您可以使用 TCPDF 的 writeHTML 而不是使用 Html2PDF 库，但所有这些都将使用相同大小的列。我实际上认为如果您只指定一两个，它会重新计算列大小，但我错了。此外，TCPDF 与Html2PDF 有一些相同的限制——如果您指定一列的大小，它不会自动调整其他列的大小以适应。

它也不像浏览器那样根据内容调整列的大小。这实际上很难做好，所以我对 TCPDF 没有尝试它并不感到惊讶。一个可能省力的解决方案是使用大小“比例”标记列，并根据选择的每个比例大小的列的数量动态计算每个列的宽度。（例如，数字列是“小”，而描述列将是“大”，因此它会以 10% 的比例划分两个小列，在 80% 处划分一个描述。5% 的两个小列和 45% 的大列每个。这需要一些实验。）

【讨论】：

感谢您的时间，问题是我使用的是动态表，有 10 列可供用户选择，可能是 5 列或 8 列或 2 列是可选的还有另一种方法我可以做到，它是：table th, table td { <?=floor(100 / count($cols))?>%;} 但我正在寻找更好的解决方案
您对Html2PDF 的承诺程度如何？我对代码和示例的所有阅读都表明这是唯一的方法。 TCPDF 可以通过其稍弱的 CSS 解析来做到这一点，但它具有更好的布局系统。我可以建议直接使用 TCPDF 标记。
我尝试了 TCPDF，我意识到他们使用的方法与我使用的方法相同，但仍然不能解决我的问题，如果我更改一个单元格，它将影响其他单元格并且表格宽度仍然不适合页面，TCPDF 和 HTML2PDF 之间的区别在于 TCPDF 使用默认表格大小，就像我的 table th, table td { <?=floor(100 / count($cols))?>%;}
确实，这也是我遇到的问题。我认为它可以让我指定特定的大小并在我设置测试时自动调整其余部分（虽然不理想但不费吹灰之力看起来相当不错），但它没有一点……一点也不。我会做更多的挖掘，看看是否有一些省力的方法来自动调整列的大小。它必须是某种预处理，尽管Html2PDF 或TCPDF 似乎都不是开箱即用的。
不确定它是否会通知您更新，但我添加了一个类，它可以根据内容动态调整基于文本的表格的大小。还有一种称为determine_column_widths_evenly 的策略，可让您指定一些已知大小并让它平均分配剩余空间。

【解决方案3】：

图片：

我认为这种类型的表格最好的方法是使用这种方式：

table th, table td { width:<?=floor(100 / count($cols))?>%;}

在 TCPDF 上他们没有做任何特别的事情，表格无论如何都不适合页面。

【讨论】：