2015-02-07 67 views
1

我有它運行在一個循環中的代碼,它應該當我嘗試打印5張一個頁面上..打印在一個頁面上一行JavaScript或jQuery的

我想在一個打印一票

我丟了怎麼辦,我想下面的代碼:

function Printticket() 
{ 
     $('#print .ticket_new').each(function() { 
      $(this).hide(); 
     }); 
     $('#print .ticket_new').each(function() { 
      $(this).show(); 
      window.print(); 
     }); 
} 

代碼是這樣的

<div id="print"> 
<loop from="1" to="10" index="k"> 
<div id="print_1" class="ticket_new>ticket1</div> 
<div id="print_2" class="ticket_new>ticket2</div> 
<div id="print_3" class="ticket_new>ticket3</div> 
<div id="print_4" class="ticket_new>ticket4</div> 
</loop> 
</div> 
+0

那麼你想打印5頁5門票? – 2015-02-07 06:34:23

+0

是的,你是對的 – cater 2015-02-07 06:37:14

+1

當你打印一個'div'時,讓其他'div'隱藏。我的意思是在打印1st時隱藏第2,3,4頁......通過js或jquery – 2015-02-07 06:42:07

回答

0

浦t將所有div單獨隱藏iframe(根據頁面大小調整尺寸)並打印出來。

HTML

<iframe id="print" name="print"></iframe>

JS

window.frames["print"].focus(); window.frames["print"].print();

編輯:我剛纔讀帕布的評論,這是非常好的方法。

0

創建n個div。

將每個div的高度和寬度設置爲窗口的高度/寬度。

並將票內容分別存放在各個分區中並進行打印。

例子: -

HTML:

<div id="print_1" class="ticket_new>ticket1</div> 
<div id="print_2" class="ticket_new>ticket2</div> 
<div id="print_3" class="ticket_new>ticket3</div> 
<div id="print_4" class="ticket_new>ticket4</div> 

JS:

for(var i=1;i<=4;i++) 
{ 
$("#print_"+i).width($(window).width()); 
$("#print_"+i).width($(window).height()); 
} 

現在所有的內容可以放在佔據每格一個頁面的div。

+0

動態地做到這一點,似乎並不奏效,t gerenartes爲1,然後是2和3,並創造了更多的約6頁以上 – cater 2015-02-07 11:53:15

1

基於DA的suggestion,我創造了這個:

$('button').click(function() { 
 
    $('button').hide(); 
 
    $('li').each(function() { 
 
    $(this).css({ 
 
     "page-break-after": "always" 
 
    }); 
 
    }); 
 
    window.print(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li>ticket1</li> 
 
    <li>ticket2</li> 
 
    <li>ticket3</li> 
 
    <li>ticket4</li> 
 
    </ul> 
 
</div> 
 
<button>Print</button>

或查看fiddle

這將在4個單獨頁面中打印4張票。