TCPDF 전체 페이지 테이블

그림과 같이 테이블을 페이지 (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는 TCPDF의 HTML 파서 / 렌더링 시스템을 사용하지 않습니다. 자체 구현하고 공간의 100 %를 채우기 위해 열을 자동으로 늘리지 않습니다.

따라서 Html2PDF에서는 표에 100 % 너비를 설정해야 할뿐만 아니라 각 셀에 대해 백분율 너비를 설정해야합니다. widthHtml2PDF 의 속성에 이상한 동작이 있기 때문에 CSS를 사용하여 너비를 설정하십시오.

TCPDF의 기본 writeHTML설정은 사양이 없을 경우 각 열을 동일한 너비로 설정합니다. (예를 들어, 4 열 테이블에는 25 %의 모든 셀이 있습니다.) 그러나 사용중인 CSS를 지원하지 않으므로 해당 경로로 이동하려면 마크 업을 약간 조정해야합니다.

Html2PDF에서이 기본 동작을 모방하기 위해 셀에 동등한 너비를 명시 적으로 추가하면됩니다. 예를 들어 table td, table th스타일 규칙에 너비 사양을 추가합니다 .

다음은 4 열 테이블에 대한 다음 CSS 규칙이 포함 된 예입니다.

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

물론 내용에 맞는 너비를 지정할 때 가장 좋습니다.

최신 정보

아래에 TCPDF에 대한 토론을 남겨두고 잠재적으로 유용한 클래스를 만들 수 Html2pdf있습니다. TCPDF에는 문자열 길이를 측정하는 유용한 방법이 있습니다. 열 내부의 문자열 크기를 측정하면 자체 열 자동 크기 조정기를 만들 수 있습니다.

https://github.com/b65sol/random-classes 에서 github에 개념 증명 클래스를 만들었습니다.

먼저이 클래스를 사용하여 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();
}

업데이트 종료

너비를 명시 적으로 지정하지 않으려면 라이브러리 writeHTML를 사용하는 대신 TCPDF를 사용할 수 Html2PDF있지만 동일한 크기의 열을 사용하기 만하면됩니다. 실제로 하나 또는 두 개만 지정하면 열 크기를 다시 계산할 것이라고 생각했지만 잘못되었습니다. 또한 TCPDF에는 다음과 같은 제한 Html2PDF이 있습니다. 한 열의 크기를 지정하면 다른 열의 크기가 자동으로 조정되지 않습니다.

또한 브라우저와 같은 방식으로 컨텐츠의 열 크기를 조정하지 않습니다. 이것은 실제로 잘하기가 어렵 기 때문에 TCPDF가 시도하지 않는 것에 놀라지 않습니다. 잠재적으로 노력이 적은 솔루션은 '비율'크기로 열에 태그를 지정하고 선택한 각 비례 크기 열의 수에 따라 각각의 너비를 즉시 계산하는 것입니다. (예 : 숫자 열은 '작은'이고 설명 열은 '큰'이므로 각각 10 %에서 작은 설명 2 개와 80 %에서 단일 설명 2 개를 나눕니다. 5 %에서 2 개의 작은 열 및 45 %에서 큰 열 약간의 실험이 필요합니다.)

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 th, table td { width:<?=floor(100 / count($cols))?>%;}

TCPDF에서는 특별한 작업을 수행하지 않았으므로 테이블이 페이지에 맞지 않습니다.