Question

我有一个循环运行的代码，当我尝试打印时，它应该在一个页面上有5个票据。

我想在一页上打印一张票

我迷路了怎么办，我正在尝试以下代码：

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>

Answer 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张票。

Answer 2

将您的所有div放在一个单独的隐藏iframe中（根据页面大小调整大小）并打印出来。

<强> HTML

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

<强> JS

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

编辑：我刚读过Prabhu的评论，这也是一个好主意。

Answer 3

创建n个div。

将每个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上，每个div占用一页。

Answer 4

在格式化打印方面，这更像是一个CSS问题而不是JS。考虑使用CSS中的分页符选项，例如page-break-before或page-break-after：http://css-tricks.com/almanac/properties/p/page-break/

使用javascript或jquery在一个页面上打印一行

4 个答案: