Wkhtmltopdf के लिए तालिका पंक्ति के अंदर पृष्ठ विराम से कैसे बचें

Question 1

मैं एक पृष्ठ के साथ html पृष्ठ से पीडीएफ रिपोर्ट उत्पन्न कर रहा हूं ।

मैं इस उद्देश्य के लिए wkhtmltopdf का उपयोग कर रहा हूं ।

जब pdf उत्पन्न होता है तो वह tr टैग में कहीं भी टूट जाता है ।

मैं इससे बचना चाहता हूं।

Question 2

अद्यतन 17.09.2015: आपके द्वारा उपयोग किए जा रहे संस्करण की जाँच करें: wkhtmltopdf 0.12.2.4 समस्या को ठीक करने के लिए कहा गया है (मैंने जाँच नहीं की है) ।

यह wkhtmltopdf में एक ज्ञात मुद्दा है। वेबकिट (WKhtmltopdf में WK) द्वारा उपयोग किया जाने वाला पेज ब्रेकिंग एल्गोरिथ्म वास्तव में बड़ी तालिकाओं के लिए अच्छा काम नहीं करता है। मेरा सुझाव है कि टेबल को छोटे-छोटे टुकड़ों में तोड़ना, जो आसानी से पृष्ठों में विभाजित हो जाते हैं और सीएसएस का उपयोग करते हैं:

table, tr, td, th, tbody, thead, tfoot {
    page-break-inside: avoid !important;
}

निम्नलिखित wkhtmltopdf मुद्दों पर भी एक नज़र है, उनके पास दिलचस्प टिप्पणियां हैं जो उदाहरण के लिए तालिका विभाजन की समस्या पर चर्चा करती हैं। एक JS समाधान है जो प्रोग्राम को 168 में टेबल को विभाजित करता है जो आपकी मदद कर सकता है (हालांकि मैं इसका उपयोग नहीं करता हूं)।

अद्यतन ०.११.२०१३ ऊपर दिए गए १६.2013 अंक में इस बारे में बहुत चर्चा है। किसी ने wttmltopdf के एक संस्करण को संकलित करने में कामयाबी हासिल की है जो बेहतर टेबल ब्रेकिंग का समर्थन करता है, लेकिन दुर्भाग्य से ऐसा लगता है कि यह आधिकारिक तौर पर जारी नहीं हुआ है और इसमें अन्य बग शामिल हो सकते हैं। मुझे नहीं पता कि इसे कैसे प्राप्त किया जाए और मुझे नहीं पता कि विंडोज पर कैसे संकलित किया जाए, लेकिन कोई भी व्यक्ति ~~यहां~~ उदाहरण के लिए टिप्पणी की जांच कर सकता है (नीचे नया अपडेट देखें)।

अपडेट 24.02.2014 आपको यह सुनकर प्रसन्नता होगी कि wttmltopdf 0.12 में अन्य लोगों के बीच इस सुविधा में बहुत सुधार किया गया है। हालाँकि, 0.12.1 की प्रतीक्षा करें और किसी भी नए संस्करण का उपयोग शुरू करने से पहले अच्छी तरह से परीक्षण करें, यह अभी भी थोड़ा अस्थिर है, हालांकि एंटीअलिज़ के साथ काम करने वाले नए लोग एक महान काम कर रहे हैं (एस्कुलज़ चट्टानों)! Wkhtmltopdf.org और github पर अपडेट रखें । Google कोड साइट अप्रचलित है और धीरे-धीरे माइग्रेट की जा रही है।

Question 3

यह पुरानी पोस्ट है, लेकिन जब से मैं बहुत समय बर्बाद कर रहा हूं उचित समाधान खोजने की कोशिश कर रहा हूं, मैं इसे यहां डालूंगा, शायद यह किसी के लिए उपयोगी होगा।

इसलिए मैंने जो पढ़ा, उससे समस्या

page-break-inside: avoid

यह है कि यह काम नहीं करता है लेकिन वास्तव में यदि आप इसे उस तत्व पर सेट करते हैं जिसमें display:blockयह अपेक्षित है (जैसा कि एसओ में कहीं उल्लेख किया गया है)। इसलिए टेबल सीएसएस की सरल संरचना के लिए

td div, th div{
    page-break-inside: avoid;
}

और तालिका संरचना

<table>
....
<tr>
    <td><div>some text</div></td>
    <td><div>more text</div></td>
</tr>
....
</table>

उम्मीद के मुताबिक काम करेंगे।

मेरे पास उपद्रवियों के साथ थोड़ा अधिक जटिल मामला था, इसलिए ऊपर से समाधान इसे मोरों के लिए तोड़ रहा था, जो वांछित प्रभाव नहीं था। मैंने इसे प्रत्येक पंक्तिबद्ध पंक्ति के लिए divs का उपयोग करके हल किया। मेरा jquery js सभी काम कर रहा है:

$(window).load(function () {
    var sizes = {};
    $('#the_table tr:first th').each(function (a, td) {         
        var w = $(td).width();
        if (sizes.hasOwnProperty('' + a)) {
            if (sizes['' + a] < w)
                sizes['' + a] = w;
        }
        else {
            sizes['' + a] = w;
        }
    });

    var tableClone = $('#the_table').clone();
    $('#the_table').replaceWith('<div class="container"></div>');

    var curentDivTable;
    var cDiv = $('.container');
    tableClone.find('tr').each(function (i, ln) {
        var line = $(ln);
        if (line.hasClass('main_row')) {
            var div = $('<div class="new-section"><table><tbody>')
            currentDivTable = div.find('tbody');
            cDiv.append(div);               
        }
        currentDivTable.append(line);
    });
    //optional - maybe in % its better than px
    var sum = 0;
    $.each(sizes, function (a, b) {
        sum += b;
    });
    var widths = {};
    $.each(sizes, function (a, b) {
        var p = Math.ceil(b * 100 / sum);
        widths['' + a] = p + '%';
    });
    //setup
    $('.container table').each(function (a, tbl) {
        $(tbl).find('tr:first td, tr:first th').each(function (b, td) {
            $(td).width(widths['' + b]);
        });
        $(tbl).addClass('fixed');
    });
});

सीएसएस:

div.new-section {
    page-break-inside: avoid;
}
.container, .new-section, .new-section table.fixed{
    width: 100%;
}

.new-section table.fixed{
    table-layout:fixed;
}

मुझे नहीं पता कि क्या सब कुछ चाहिए और मुझे नहीं लगता कि यह सही है, लेकिन यह काम करता है। क्रोम पर ही परीक्षण किया गया

Question 4

0.12 के बाद से यह समस्या हल हो गई है, लेकिन कभी-कभी, जब पृष्ठ में फिट होने के लिए कोई तालिका बहुत लंबी होती है, तो wkhtmltopdf इसे दो भागों में तोड़ता है और नए पृष्ठ पर कॉलम हेडर को दोहराता है और ये कॉलम हेडर पहली पंक्ति में सुपरपोज्ड दिखाई देते हैं।

मैं wkhtmltopdf github मुद्दों अनुभाग पर इस समस्या का एक अस्थायी समाधान पाया: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2531

इस लाइन को अपने दृश्य सीएसएस में जोड़ें:

tr {
  page-break-inside: avoid; 
}

Question 5

मैं दिनों के लिए इस समस्या में खोद रहा हूँ, और आखिरकार सही समाधान पाया। आप इस प्रोजेक्ट को phpwkhtmltopdf का संदर्भ दे सकते हैं । निर्देशिका में देखें articleऔर आपको 3 समस्याओं के लिए 3 समाधान मिलेंगे। संक्षेप में, अंतिम समाधान सीएसएस शैली जोड़ रहा है

thead {
    display: table-row-group;
}
tr {
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
}
table {
    word-wrap: break-word;
}
table td {
    word-break: break-all;
}

आप कर रहे हैं चीनी, इस साइट की जांच करने के लिए स्वतंत्र महसूस अगर关于wkhtmltopdf,你一定想知道这些 आप चाहें तो सार की जाँच करें wkhtmltopdf के लिए सार

Question 6

मैंने पाया कि wkhtmltopdf 0.12.2.1 ने इस समस्या को ठीक कर दिया है।

Question 7

किसी कारण के लिए मेरे विशेष मामले में पिछले उत्तरों में से किसी ने भी मेरे लिए काम नहीं किया। जो काम खत्म हुआ, वह वास्तव में कई चीजों का मेल था।

मैंने (Ubuntu 16.04 में) Wkhtmltopdf python आवरण को pipkit का उपयोग करके pdfkit नामक स्थापित किया , और फिर apt-get के माध्यम से Wkhtmltopdf को स्थापित करने के बजाय मैंने नीचे दी गई स्क्रिप्ट का अनुसरण करते हुए स्थैतिक बाइनरी (संस्करण 0.12.3) स्थापित किया ।
```
#!/bin/sh

sudo apt-get install -y openssl build-essential xorg libssl-dev
wget http://download.gna.org/wkhtmltopdf/0.12/0.12.3/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
tar -xJf wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
cd wkhtmltox
sudo chown root:root bin/wkhtmltopdf
sudo cp -r * /usr/
```
इस सीएसएस को जोड़ा (जैसा कि यहां दिए गए उत्तर में सुझाया गया है):
```
tr, td div, th div{
    page-break-inside: avoid;
}
```

और फिर यहां दिए गए टैग और टैग भी लगाएं (इनके बिना भी मेज बदसूरत तरीके से टूट जाएगी):<thead><tbody>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
    </tbody>
</table>

इन संशोधनों के साथ मैं अब HTML को जेनरेट करने के लिए माको टेम्प्लेट का सफलतापूर्वक उपयोग कर सकता हूं और फिर उस Wkhtmltopdf को फ़ीड कर सकता हूं और एक सुंदर रूप से पृष्ठांकित पीडीएफ प्राप्त कर सकता हूं।

Question 8

मैंने अपनी तालिकाओं में सभी प्रकार के हेरफेर करने की कोशिश की, लेकिन मैंने जो कुछ भी कोशिश की, वह पृष्ठ विराम को एक पंक्ति के बीच में नहीं रोक सका। हताशा में मैंने विभिन्न संस्करणों की कोशिश की, और निम्नलिखित पाया:

वाक्थमलटॉपडाउन 0.12.2.1: खराब

वाक्थमलटॉपडाउन 0.12.3: खराब

वाक्थमलटॉप ०.१२.१: अच्छा

मेरा समाधान 0.12.1 संस्करण में डाउनग्रेड करना था, जिसने मेरे मुद्दों को हल किया। दी, वे शायद आंशिक रूप से मेरे HTML के बारे में सुपर ओसीडी नहीं होने के कारण हैं, लेकिन जैसा कि HTML TinyMCE (उपयोगकर्ताओं द्वारा) के अंदर उत्पन्न होता है, मेरे पास वास्तव में ज्यादा विकल्प नहीं हैं।

इसके अलावा, नेस्टेड टेबल मेरे लिए किसी भी संस्करण में काम नहीं करते हैं।

Question 9

एक ट्रे को तोड़ने के बिना पीडीएफ के अंदर पेज ब्रेक का उपयोग कैसे करें?

यहाँ समाधान है कि आप किसी भी HTML फ़ाइल में उपयोग कर सकते हैं .....

अपनी ट्रे शुरू करने के बाद आपको ट्रे के अंदर एक div लेना है और div को यह css देना है:

<tr>
      <div style="page-break-inside:avoid !important; page-break-after:auto !important; overflow: hidden; display:block !important; width:100% ">
     </tr>

Question 10

मैं एक ही मुद्दे को कई परीक्षण n त्रुटियों के बाद जोड़ रहा था इस सीएसएस ने इस मुद्दे को हल किया

tr {
    display: inline-table;
}

Question 11

नैनोटेल्प जो कहता है, इसके अतिरिक्त, यहाँ मैनुअल टेबल पेज ब्रेकिंग एल्गोरिदम का कार्यशील कार्यान्वयन है। https://github.com/AAverin/JSUtils/tree/master/wkhtmltopdfTableSititHack

Question 12

ऊपर दिए गए जवाब मेरे काम नहीं आए। मुझे विशेष रूप से ज़ूम विकल्प को मेरे pdfkit config को निष्क्रिय करना था।

PDFKit.configure do |config|

  config.default_options = {
    print_media_type: false,
    page_size: "A4",
    encoding: "UTF-8",
    ## Make sure the zoom option is not enabled!
    ## zoom: '1.3',
    disable_smart_shrinking: false,
    footer_right: "Page [page] of [toPage]"
  }

end

Question 13

किसी को भी इसके साथ समस्या होने के लिए, एक बात याद रखें कि टेबल को शरीर का सीधा बच्चा होना चाहिए , अन्यथा सीएसएस काम नहीं करेगा (कम से कम मेरे साथ ऐसा ही हुआ)।

Question 14

मुझे यह हास्यास्पद समाधान मिला, लेकिन यह मेरे लिए बहुत अच्छा काम कर रहा है :)

मैंने इस तरह से एक बहुत लंबी पंक्तिबद्ध स्तंभ रखा है

<td rowspan="XXX TOTAL ROWS" style="width:0px"></td>

और फिर मेज नहीं टूटेगी।

Question 15

एक और विकल्प: प्रत्येक trको अपने आप में रखें tbodyऔर फिर पे ब्रेक ब्रेक सीएसएस नियमों को लागू करें tbody। टेबल्स मल्टीपल सपोर्ट करते हैंtbody एस का ।

थोड़ा अतिरिक्त मार्कअप, लेकिन मेरे लिए शालीनता से काम करता है।

Question 16

मैंने कुछ सुझाए गए समाधानों के संयोजन का उपयोग करके समस्या को हल किया।

मैंने अपनी तालिका को एक div में लपेटा और निम्नलिखित CSS को परिभाषित किया।

.wrapping-div {
        display: block;
        page-break-inside: avoid !important;
    }

.wrapping-div table, .wrapping-div tbody, .wrapping-div tr, .wrapping-div td, .wrapping-div th {
        page-break-inside: avoid !important;
    }

समाप्त होने पर तालिका संरचना निम्न उदाहरण के रूप में परिभाषित की गई थी:

<div class="wrapping-div">
 <table>
  <tbody>
   <tr>
    <th>
      header
    </th>
    <td>
      content
    </td>
   </tr>
  </tbody>
 </table>
</div>

मुझे td या th टैग के अंदर कोई div बनाने की आवश्यकता नहीं थी।

समस्या को हल करने का प्रयास करते समय मैंने जो महत्वपूर्ण बातें देखीं:

टेबल में सभी को शामिल किया जाना चाहिए
Div में डिस्प्ले: ब्लॉक होना चाहिए
जब कोई तालिका किसी पृष्ठ में फिट नहीं होती है, तो यह स्वचालित रूप से पूरी तालिका को अगले पृष्ठ पर ले जाएगी (मैंने इसे बड़ी तालिका के साथ आज़माया नहीं है)
यदि आप CSS से केवल ".wrapping-div table" चयनकर्ता को हटाते हैं , तो यह तालिका को दो पृष्ठों में विभाजित करने की अनुमति देगा, लेकिन इसे सही ढंग से प्रस्तुत करेगा, दो पृष्ठों में एक सेल को नहीं तोड़ना (यह वर्ड पर डिफ़ॉल्ट व्यवहार की तरह है) )

आशा है कि ये आपकी मदद करेगा।

Question 17

मैंने इस मुद्दे के साथ बहुत संघर्ष किया है, नवीनतम h4cc / wkhtmltopdf-amd64 संस्करण 0.12.4 का उपयोग करके और अंत में इसे पैकेज के संस्करण को अपग्रेड करके काम कर रहा है 0.12.3!

Question 18

पेज ब्रेक से बचने के लिए, हम सीएसएस विकल्प से बचने के लिए पेज ब्रेक का उपयोग कर सकते हैं।

tr { page-break-inside: avoid; }

किसी भी सामग्री (छवि / पाठ) को तोड़ें और उसे अगले पृष्ठ में प्रदर्शित करें

.sample-image { page-break-before: always; }

Question 19

क्या आपके पास टेबल हेड है? और एक टेबल बॉडी?

<table>
<tbody>
<tr><th>Name</th><th>Value</th></tr>
<tr><td>url</td><td>stackoverflow.com</td></tr>
<tr><td>ip</td><td>123.123.123.123</td></tr>
</tbody>
</table>

यह एक तालिका का उचित स्वरूपण है, जबकि अधिकांश ब्राउज़र कम देखभाल नहीं कर सकते हैं, आपके द्वारा उल्लेख किए गए जैसे कन्वर्टर्स , यदि आपके लापता <tbody>या <th>टैग मैं आपको पहले जोड़ने का प्रयास करने का सुझाव देता हूं।