javascript - 通过 javascript 添加分页符

Question

我正在尝试添加 page braker在每个 html 部分的末尾，这是我的代码:

printHtml += '<div id="#pageBraker">end of current page</div>';
$("#pageBraker").css("display","none");
$("#pageBraker").css("display","block");
$("#pageBraker").css("page-break-before","always");

在每个部分的末尾，我都看到 end of current page 没有控制台错误。我的问题是:

1.如何将@media 添加到我的pageBraker 或我的HTML 中？

2.这样动态插入的方式对吗？

这是我的全部代码:

//elemsToPrint - list of elements I want to print but with page breaker between
for (var index = 0; index < elemsToPrint.length; index++) {
    printElement = elemsToPrint[index];
    printHtml += $(content).parent().html();
    printHtml += '<div id="#pageBraker">end of current page</div>';
    $("#pageBraker").css("display","none");
    $("#pageBraker").css("display","block");
    $("#pageBraker").css("page-break-before","always");
    //send to printer
    _printElement(printHtml);
}

最终目标是每个部分(printHtml)将打印在单独的页面中。

感谢您的帮助。

Answer 1

为此，您无需在 for-loop 中应用任何样式。相反，在样式表中执行此操作:

#pageBraker {
  display: none;
}

@media print {
  #pageBraker {
    display: block; 
    page-break-before: always;
  }
}

此处您使用的是 @print 媒体查询，它仅在打印 View 中应用此特定样式。在打印 View 之外，#pageBraker 不会显示。