TCPDF पूर्ण पृष्ठ तालिका

11

मैंने चित्र पर दिखाए गए पृष्ठ (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();
    }

बहुत धन्यवाद

php  html  css  tcpdf 
— मोहसेन न्यूतोआ
स्रोत
यह वास्तव में Html2PDF लाइब्रेरी में एक बग है। संभावित वर्कअराउंड में देख रहे हैं।
— ईपीबी
यह ध्यान देने योग्य है, btw, कि Html2PDF यह स्वयं के HTML पार्सर का उपयोग करता है। style="width: 100%"MM में सही रूप से परिवर्तित चौड़ाई को संग्रहीत करता है (हालाँकि चौड़ाई विशेषता नहीं करता है!) हालांकि Html2PDF वास्तव में इसे टेबल रेंडरिंग के लिए उपयोग नहीं करता है।
— ईपीबी

जवाबों:

4

Html2PDF TCPDF के HTML पार्सर / रेंडर सिस्टम का उपयोग नहीं करता है। यह अपने आप लागू होता है, और यह क्रियान्वयन 100% स्थान को भरने के लिए कॉलम को स्वचालित रूप से नहीं बढ़ाएगा।

जैसे, Html2PDF में, आपको न केवल टेबल पर 100% चौड़ाई सेट करने की आवश्यकता है, बल्कि आपको प्रत्येक सेल के लिए प्रतिशत चौड़ाई सेट करने की आवश्यकता है। (और widthHtml2PDF में विशेषता के साथ कुछ अजीब व्यवहार के कारण, चौड़ाई निर्धारित करने के लिए CSS का उपयोग करें।)

टीसीपीडीएफ के मूल writeHTMLप्रत्येक कॉलम को उसी चौड़ाई में सेट करेंगे जो किसी भी विनिर्देश से अनुपस्थित हो अन्यथा। (उदाहरण के लिए, 4-स्तंभ तालिका में सभी कोशिकाएँ 25% पर होती हैं) हालाँकि, यह आपके द्वारा उपयोग किए जा रहे CSS का समर्थन नहीं करता है, इसलिए मार्कअप को उस मार्ग पर जाने के लिए थोड़ा ट्वीकिंग की आवश्यकता होगी।

Html2PDF में इस मूल व्यवहार की नकल करने के लिए, आप स्पष्ट रूप से अपनी कोशिकाओं में समान चौड़ाई जोड़ सकते हैं। उदाहरण के लिए, अपनी table td, table thशैली के नियमों में एक चौड़ाई विनिर्देश जोड़ना ।

यहां चार-स्तंभ तालिका के लिए निम्नलिखित सीएसएस नियमों के साथ एक उदाहरण दिया गया है:

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का उपयोग करने के बजाय टीसीपीडीएफ का उपयोग कर सकते हैं Html2PDF, लेकिन वह सब जो समान आकार के कॉलम का उपयोग करेगा। मैंने वास्तव में सोचा था कि यह स्तंभ आकारों का कुछ पुनर्गणना करेगा यदि आप केवल एक या दो निर्दिष्ट करते हैं, लेकिन मैं गलत था। इसके अलावा, टीसीपीडीएफ कुछ समान सीमाओं से ग्रस्त है, जैसे Html2PDF- यदि आप एक कॉलम का आकार निर्दिष्ट करते हैं, तो यह स्वचालित रूप से दूसरे कॉलम को फिट करने के लिए आकार नहीं देगा।

यह उस तरह से सामग्री को आकार नहीं देता जिस तरह से ब्राउज़र करता है। यह वास्तव में बहुत अच्छा करने के लिए कठिन है तो मुझे आश्चर्य नहीं है कि टीसीपीडीएफ इसकी कोशिश नहीं करता है। संभावित रूप से कम-प्रयास समाधान आपके स्तंभों को 'अनुपात' के साथ टैग करना और प्रत्येक आनुपातिक आकार के स्तंभों में से कितने के आधार पर प्रत्येक के लिए मक्खी पर चौड़ाई की गणना करना होगा। (उदा। संख्यात्मक कॉलम 'छोटे' हैं, और एक विवरण स्तंभ 'बड़ा' होगा और इसलिए यह 10% पर दो छोटे और 80% पर एक एकल विवरण तोड़ता है। दो छोटे 5% पर और बड़े कॉलम 45% पर। प्रत्येक। यह कुछ प्रयोग होगा।)

— ईपीबी
स्रोत
आपके समय के लिए धन्यवाद, समस्या यह है कि मैं डायनेमिक टेबल का उपयोग कर रहा हूं, 10 कॉलम हैं जो उपयोगकर्ताओं द्वारा चुने जा सकते हैं, शायद 5 कॉल या 8 कॉल या शायद 2 कॉल जो कि वैकल्पिक है एक और तरीका है जिससे मैं यह कर सकता हूं और वह है : table th, table td { <?=floor(100 / count($cols))?>%;}लेकिन मैं एक बेहतर समाधान की तलाश में हूँ
— मोहसिन न्यूटो
1
आप कैसे Html2PDFहैं? मेरे सभी कोड और उदाहरणों को पढ़ना यही एकमात्र तरीका है। टीसीपीडीएफ ऐसा कर सकता है क्योंकि यह सीएसएस पार्सिंग से थोड़ा कम सक्षम है, लेकिन इसमें एक बेहतर लेआउट सिस्टम है। मैं सीधे TCPDF के लिए मार्कअप का सुझाव दे सकता हूं।
— ईपीबी
मैंने TCPDF की कोशिश की और मुझे एहसास हुआ कि वे उसी विधि का उपयोग करते हैं जैसा मैं उपयोग करता हूं लेकिन फिर भी यह मेरे मुद्दे को हल नहीं करता है, अगर मैं एक सेल को बदल देता हूं तो यह अन्य कोशिकाओं पर प्रभाव डालेगा और तालिका की चौड़ाई अभी भी पृष्ठ पर फिट नहीं होती है। TCPDF और HTML2PDF के बीच अंतर यह है कि TCPDF मेरी तरह ही डिफ़ॉल्ट टेबल साइज का उपयोग कर रहा हैtable th, table td { <?=floor(100 / count($cols))?>%;}
— मोहसिन न्यूटोआ
वास्तव में, यह समस्या है कि मैं भी भाग गया। मैंने सोचा कि यह मुझे केवल विशिष्ट लोगों के आकार को निर्दिष्ट करने और बाकी को समायोजित करने की अनुमति देगा जब मैंने अपना परीक्षण स्थापित किया (जो कि आदर्श नहीं है, लेकिन थोड़े प्रयास से यथोचित रूप से अच्छा लगेगा), लेकिन यह बिल्कुल नहीं है ... । मैं थोड़ा और खुदाई करूँगा और देखूंगा कि क्या स्तंभों को ऑटो-साइज़ करने के कुछ कम प्रयास हैं। यह रूप में न यद्यपि preprocessing किसी प्रकार का होना चाहिए था Html2PDFया TCPDFयह बॉक्स से बाहर करने के लिए दिखाई देते हैं।
— ईपीबी
निश्चित नहीं है कि यह आपको अपडेट के बारे में सूचित करता है, लेकिन मैंने एक वर्ग जोड़ा है जो गतिशील रूप से पाठ-आधारित तालिकाओं को उनकी सामग्री के आधार पर आकार देता है। एक रणनीति भी determine_column_widths_evenlyहै जो आपको कुछ ज्ञात आकारों को निर्दिष्ट करने देती है और शेष स्थान को समान रूप से वितरित करती है।
— EPB
0

CSS के लिए PDF का सर्वर-साइड के साथ काम करना बहुत अच्छा नहीं है। क्या आपने केवल 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 पर ठीक काम करता है, लेकिन जब मैं इसे पीडीएफ के रूप में सहेजना चाहता हूं तो यह चित्र जैसा होगा।
— मोहसिन न्यूतो
0

चित्र: यहां छवि विवरण दर्ज करें

मुझे लगता है कि इस तरह की तालिकाओं के लिए सबसे अच्छा तरीका इस तरह से है:

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

TCPDF पर उन्होंने कुछ विशेष नहीं किया है, तालिका वैसे भी पृष्ठ पर फिट नहीं होती है।

— मोहसेन न्यूतोआ
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.