Question

已经提出了类似的问题，但我还没有找到解决我特定问题的任何问题。我有一个空div：

<div id="data"> </div>

使用javascript将动态生成的文本框附加到其中。 div的css是：

#data{width:230px; height:auto; left:0px; top:60px; position:relative;}

文本框css是（javascript给他们的类“tagN”）：

.tagN{background:url('text.gif'); display:inline; position:relative; font-family:Arial, Helvetica, sans-serif; font-size:12px;}

到目前为止一切正常。唯一的问题是：文本框有时可能超过50个，因为它们每个占用一个打印行，当在IE和Firefox中打印（或打印预览）页面时，页面之间缺少四行。我想过在下面的每50个文本框之后插入一个白色块（文本框生成脚本）：

    function addText(spa1, spa2, fcss, count){
    $('<input type="text">').attr({'id':'d' + progress, 'name':'d' + progress}).data("raw", rawVal).val(toInch(spa1 + count * spa2))
        .css("font-weight", fcss).prop('readonly', true).addClass("tagN").appendTo(data);
}

是否有另一种方法可以告诉浏览器“不打印”到页面底部边缘？我最好是寻找一个javascript解决方案。谢谢！

Answer 1

简单易用的解决方案是将page-break-after css属性设置为每个文本框，以便在打印页面时它将显示在单独的页面上。

参考这个 http://www.w3schools.com/cssref/pr_print_pageba.asp

Answer 2

您可以使用以下css属性拆分为页面

分页-后：总是;

或者，如果您不想在元素内部进行拆分，请添加以下样式

page-break-inside：avoid;

Answer 3

终于解决了！以下是：首先，我发现在一个页面上我想要40行。每行占用16px，因为我动态生成的文本框的css高度为16px。然后我制作了我的标题，包括第一页上的图像等4行长= 64px。所以，从4开始，我创建了一个变量

var pageCounter = 4;

然后，每次动态生成文本框时，我都会在函数中添加以下内容：

pageCounter++; //adds 1
var div40 = pageCounter / 40;
if(div40==Math.floor(pageCounter / 40)){ //if var div40 has reached 40 lines
  $('<input type="text">').attr({'id':'p'+pageCounter, 'name':'p'+pageCounter})
  // create a text box with a unique id and name
  .val("continued on next page...") // value to show on the print sheet
  .prop('readonly', true).addClass("pBreak").appendTo(data);
  // append to main div

这些文本框不应该显示在屏幕上，所以我添加到了pBreak类的CSS中：

.pBreak{display:none;}

然后，在打印时我希望它们显示，所以：

    @media print{
      .pBreak{display:inline; page-break-after:always;
    }

显示带有＆＃34的文本框;接下页继续......＆＃34;每隔40行，也会在同一地点分页。

如果有更简单的方法可以做到，请接受我的意见 - 谢谢！

在n个动态生成的文本框之后，在打印时在div中插入分页符

3 个答案:

在n个动态生成的文本框之后，在​​打印时在div中插入分页符

3 个答案:

在n个动态生成的文本框之后，在打印时在div中插入分页符