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

有人问过类似的问题，但我还没有找到任何解决我具体问题的方法。 我有一个空div：

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

文本框css为（javascript为其提供类“tagN”）：

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

函数addText（spa1、spa2、fcss、计数）{
$（''）.attr（{'id'：'d'+进度，'name'：'d'+进度}）.data（“raw”，rawVal）.val（toInch（spa1+count*spa2））
.css（“font-weight”，fcss）.prop（'readonly'，true.）.addClass（“tagN”）.appendTo（数据）；
}

是否有其他方法告诉浏览器“不要打印”到页面的下页边距？我正在寻找一个javascript解决方案最好。

---

谢谢大家!

简单易行的解决方案是在每个文本框的

css属性后设置
分页符，以便在打印页面时，它将显示在单独的页面上

参考此
您可以使用以下css属性拆分到页面

分页符后：始终

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

内部分页符：避免

终于解决了！以下是方法：
首先，我想在一页上写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

然后，在打印时，我希望它们显示出来，因此：

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

每40行显示一个带有“下一页继续…”的文本框，并在相同的位置显示分页符

如果有一个更简单的方法来做上述，我将欢迎您的意见-谢谢

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{display:none;}

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