WebKit- आधारित ब्राउज़र से प्रिंट करने के लिए Paginating HTML दस्तावेज़

Question

इंटरनेट एक्सप्लोरर Print Template इंजन, जहां मैं DEVICERECT तत्व का उपयोग एक भौतिक पेज प्रतिनिधित्व करने के लिए कर सकते हैं, तो एक आयताकार दृश्य के रूप में LAYOUTRECT तत्व का उपयोग माध्यम से पृष्ठ में HTML दस्तावेज़ प्रवाह के लिए है और अंकन ड्राइव। इससे रेखाएं आसन्न पृष्ठों के बीच बीच में कट ऑफ होने से रोकती हैं। यह तंत्र विवरण here में वर्णित है।

क्या वेबकिट एक समान सुविधा प्रदान करता है? विशेष रूप से, फैंटॉमजेएस करता है? मैं ऐसी किसी भी चीज़ की तलाश कर रहा हूं जो मौजूदा HTML दस्तावेज़ को पगेट करने की अनुमति दे, जिसमें पूर्वनिर्धारित पृष्ठ-ब्रेक नहीं हैं, और इसे एक नए रूपांतरित HTML या पीडीएफ दस्तावेज़ के रूप में पृष्ठित किया गया है, बिना लाइनों को बीच में कट ऑफ किया जा रहा है।

Answer 1

ब्राउज़र इंजन को सब कुछ का ख्याल रखना चाहिए और आप इसे media="print" के लिए स्टाइलशीट का उपयोग करके सहायता कर सकते हैं।

उदाहरण पृष्ठ विराम के लिए मजबूर करने के लिए इस तरह के स्तर 1 या 2 (<h1> या <h2>) के हर शीर्षक एक नया पृष्ठ उपयोग page-break-before की शुरुआत में रख दिया गया है कि:

h1, h2 { page-break-before:always; } 

क्रोम में IE & ओपेरा आप widows और orphans नियंत्रित कर सकते हैं, लेकिन ऐसा अभी के लिए आप

p { page-break-inside: avoid; } 

इस्तेमाल कर सकते हैं अनुच्छेदों के अंदर पृष्ठ विराम से बचने के लिए यह अभी तक वेबकिट में उतरा नहीं हुआ है।

आप first, left and right pages अलग से मार्जिन को भी नियंत्रित कर सकते हैं।

फ़ैंटॉम का render() प्रिंट मीडिया के लिए स्टाइलशीट का उपयोग करता है यदि आउटपुट एक पीडीएफ फ़ाइल है। rasterize.js उदाहरण प्रिंटिंग समाधान का उपयोग करने के लिए तैयार दिखता है।

Answer 2

यह फ़ंक्शन ठीक काम कर रहा है।

$(function() { 
    $("#print-button").on("click", function() { 
     var table = $("#table1"), 
      tableWidth = table.outerWidth(), 
      pageWidth = 600, 
      pageCount = Math.ceil(tableWidth/pageWidth), 
      printWrap = $("<div></div>").insertAfter(table), 
      i, 
      printPage; 
     for (i = 0; i < pageCount; i++) { 
      printPage = $("<div></div>").css({ 
       "overflow": "hidden", 
       "width": pageWidth, 
       "page-break-before": i === 0 ? "auto" : "always" 
      }).appendTo(printWrap); 
      table.clone().removeAttr("id").appendTo(printPage).css({ 
       "position": "relative", 
       "left": -i * pageWidth 
      }); 
     } 
     table.hide(); 
     $(this).prop("disabled", true); 
    }); 
}); 

यह कई वर्गों में पूरे तालिका विभाजित होगा ...

Here is fiddle

---

कोड this article और this page से लिया।