1. घर
  2. सवाल और जवाब
  3. JQuery - div की ऊंचाई पाएं, फिर ओवरले div

JQuery - div की ऊंचाई पाएं, फिर ओवरले div

2016-12-27 7 views
7

पर लूप बनाएं I HTML पृष्ठ के हिस्से को एक पीडीएफ दस्तावेज में परिवर्तित करने के लिए wkhtmltopdf का उपयोग कर रहा है जो कई पेज लंबा हो सकता है (उपयोगकर्ता इनपुट को परिवर्तित करने के पाठ के आधार पर)।JQuery - div की ऊंचाई पाएं, फिर ओवरले div

wkhtmltopdf सही ढंग से काम कर रहा है। अब मैं उस उपयोगकर्ता को इंगित करना चाहता हूं जहां उपयोगकर्ता अपना पीडीएफ दस्तावेज बनाने से पहले पेज ब्रेक होगा।

मैं कैसे करूँ ओवरले इंगित करने के लिए जहां पृष्ठ विराम सबसे होने की संभावना है HTML पाठ है कि पीडीएफ दस्तावेज़ में रूपांतरित किया जाने के शीर्ष पर एक घंटा टैग (< hr />) को दोहराने के लिए एक HTML div टैग फॉर्म की सामग्री को पीडीएफ दस्तावेज में परिवर्तित करने से पहले?

मुझे लगता है कि एचटीएमएल div टैग (पृष्ठ ब्रेक को इंगित करने) को प्रत्येक 5 सेमी (इस पोस्ट के प्रयोजन के लिए) को ओवरले करने के लिए एक JQuery/जावास्क्रिप्ट लूप स्थिति होना होगा, मान लें कि पेज ब्रेक पर होगा पीडीएफ प्रत्येक 5 सेमी)।

मैंने इसे स्वयं करने के लिए कई बार कोशिश की है, लेकिन मुझे jq/js कोड सही नहीं मिल रहा है (और यह मुझे मार रहा है)।

जेएस/जेक के बिना नीचे दिए गए कोड का fiddle है।

यहाँ HTML है:

<body> 
    <div id="main_area"> 
     <div id="text"> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     </div> 
     <div id='page_break'></div>   
    </div> 
</body>

यहाँ सीएसएस है:

मैं HTML div टैग (पेज तोड़ने का संकेत) के लिए निम्न कोई प्रिंट सीएसएस जोड़ दें, तो div टैग होगा wkhtmltopdf द्वारा पीडीएफ दस्तावेज़ में मुद्रित/रूपांतरित नहीं किया जा सकता है, यदि आप सोच रहे हैं कि पेज ब्रेक टैग पीडीएफ दस्तावेज़ में कैसे संभाला जाएगा।

@media print { 
    /* prevents the element from being printed in the pdf */ 
    .no_print, .no_print * { 
     display: none !important 
    } 
} 
#main_area { 
    padding: 2px; 
    width:100%; 
    background:#fff; 
    color:#333; 
} 
#text { 
    z-index:1; 
} 
#page_break { 
    position: absolute; 
    width: 100%; 
    height: 5px; 
    background: red; 
    top: 5cm; 
    z-index:0; 
    opacity: 0.2; 
}

स्रोत

2016-12-27 user1261774

उत्तर

2

Fiddle

यह करने के लिए सबसे आसान तरीका है, स्टैकिंग पारदर्शी <div> रों वांछित दूरी और एक दृश्य निचले बॉर्डर की ऊंचाई है कि कर रहा है। हम मूल HTML में div#page_break को में इन <div> एस का पुनरुत्थान कर सकते हैं। z-index का उपयोग करने की कोई आवश्यकता नहीं है, क्योंकि positioned elements are always layered on top of unpositioned elements। इसलिए हम इस में सीएसएस बदलकर शुरू कर सकते हैं:

#main_area { 
    padding: 2px; 
    width: 100%; 
    background: #fff; 
    color: #333; 
} 
#page_break { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    opacity: 0.2; 
} 
#page_break > div { 
    width: 100%; 
    height: 5cm; 
    border-bottom: 5px solid red; 
    margin-bottom: -5px; 
    /* negative margin above ensures that the distance 
     between two rulers is exactly the height of the div 
    */ 
}

अगर हम अब मूल HTML के प्रासंगिक बिट पर विचार करें,

<div id="main_area"> 
    <div id="text"> 
     ... 
    </div> 
    <div id='page_break'></div> 
</div>

हम अभी तक किसी भी शासक नहीं देख सकेंगे, क्योंकि हम जोड़ा शासक कंटेनर लेकिन हमने इसे अभी तक रखने के लिए <div> एस नहीं दिया है।

<div id="main_area"> 
    <div id="text"> 
     ... 
    </div> 
    <div id='page_break'> 
     <div></div> <!-- first ruler, 5cm from top --> 
     <div></div> <!-- second ruler, 10cm from top --> 
     <div></div> <!-- third ruler, 15cm from top --> 
    </div> 
</div>

आदेश में एक संलग्न करने के लिए: हर बच्चे <div> हम जोड़ने के लिए, हम एक नए शासक है, जिसकी पहली #main_area के शीर्ष और प्रत्येक अगले शासक से 5 सेमी स्थिति में है पिछले नीचे 5 सेमी स्थिति में है प्राप्त करेंगे नई <div> jQuery में एक और तत्व के लिए, हम उपयोग कर सकते हैं .appendTo:

$('<div>').appendTo('#page_break');

यदि आवश्यक हो, हम इस तरह के .height के रूप में नए <div> के गुणों को समायोजित करने में एक और विधि कॉल सम्मिलित कर सकते हैं,:

$('<div>').height(400).appendTo('#page_break'); // 400 pixels

अब हमें इसे अक्सर पर्याप्त शासकों को रखने के लिए पर्याप्त बार दोहराना होगा।

var textHeight = $('#text').height();

यह पिक्सेल में एक ऊंचाई है: .height फिर से हमारे दोस्त होता है। सौभाग्य से, सीएसएस मानक there is a fixed number of pixels in a centimeter (यहां तक ​​कि प्रिंट में) के अनुसार, इसलिए हम बिल्कुल कुछ गणना कर सकते हैं:

var pixelsPerInch = 96; 
var cmPerInch = 2.54; 
var pixelsPerCm = pixelsPerInch/cmPerInch;

pixelsPerCm 37,8 बारे में है। @ pottedmeat7 के चर onePixel इस के विपरीत है, यानी प्रति सेंटीमीटर सेंटीमीटर। 5 सेमी लगभग 18 9 पीएक्स होता है।

अब हम <div> एस #page_break को #text की ऊंचाई तक भरने तक लूप को रोल करने के लिए पर्याप्त जानते हैं। सबसे सामान्य स्थिति है, जहां सभी दूरी 5 सेमी करने के लिए निर्धारित किया जाता है, बस 5 सेमी से #text की ऊंचाई विभाजित करने के लिए हमें की आवश्यकता है:

var divisions = Math.floor((textHeight/pixelsPerCm)/5); 

var breaks = $('#page_break'); 
for (var i = 0; i < divisions; ++i) { 
    $('<div>').appendTo(breaks); 
}

हम मंजिल divisions, क्योंकि अन्यथा आप पाठ जब भी नीचे एक झूलते शासक मिल जाएगा textHeight 5 सेमी का सटीक एकाधिक नहीं है। breaks एक अनुकूलन है इसलिए jQuery को लूप के प्रत्येक पुनरावृत्ति पर #page_break चयनकर्ता को देखने की आवश्यकता नहीं है।

स्रोत

2017-01-02 00:41:53 Julian

2

तो मुझे लगता है कि अगर मैं सही ढंग से समझता हूं तो आप उस उपयोगकर्ता को दृश्य संकेतक चाहते हैं जहां पेज ब्रेक हो सकता है, यानी। किसी पृष्ठ के सीएम में या इस टेस्ट केस 5 सीएम के लिए आकार।

यदि ऐसा होता है तो क्या आप हर 5 सेमी में "पृष्ठ-ब्रेक" div जोड़ नहीं सकते?

var onePixel = 0.02645833; 
 
var onePage = 5;//in CM 
 
var height = Math.floor(jQuery(document).height() * onePixel); 
 
var mainBody = jQuery("body"); 
 
for(var i=onePage; i<height; i+=onePage) { 
 
    mainBody.append("<div id='page_break' style='top:"+i+"cm;'></div>"); 
 
}
@media print { 
 
     /* prevents the element from being printed in the pdf */ 
 
     .no_print, .no_print * { 
 
      display: none !important 
 
     } 
 
    } 
 
    #main_area { 
 
     padding: 2px; 
 
     width:100%; 
 
     background:#fff; 
 
     color:#333; 
 
    } 
 
    #text { 
 
     z-index:1; 
 
    } 
 
    #page_break { 
 
     position: absolute; 
 
     width: 100%; 
 
     height: 5px; 
 
     background: red; 
 
     top: 5cm; 
 
     z-index:0; 
 
     opacity: 0.2; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
     <div id="main_area"> 
 
      <div id="text"> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      </div>  
 
     </div> 
 
    </body>

स्रोत

2016-12-30 00:06:11 pottedmeat7

+0

डेनिस फोले, हां, एक दृश्य संकेतक जहां HTML ब्रेक HTML में हो सकता है, लेकिन मुझे आपका कोड काम नहीं मिल रहा है। – user1261774

+0

ओप्स दो अलग-अलग स्थानों में संपादन कर रहा था, एक चर को याद किया, फिर से प्रयास करें – pottedmeat7

+0

pottedmeat7, धन्यवाद, लेकिन मैं '

'टैग पर लूप कैसे प्रदर्शित कर सकता हूं, न कि शरीर टैग? ऐसा लगता है कि यह '
' पर स्वयं काम नहीं कर रहा है। – user1261774

संबंधित मुद्दे

 संबंधित मुद्दे