浏览器打印中的分页符问题

Question

这是我的HTML页面在打印视图中的外观。

当它分成2个字符时，我需要将其放在新页面上，为此需要在这些元素之前的div下方插入（我正在为其他预定义的新页面执行此操作）。

<div style='page-break-before: always'>

但是我不能这样做，因为这些内容是动态的，我也不知道到底哪个 HTML元素会落在这个地方。

如果我设法在分页符处跟踪 HTML元素，我将在其上方放置分页代码。这需要在带有jQuery的html页面上完成，因为打印视图不支持js。

我试图这样做，但在这里也失败了。看来打印视图不支持position: absolute。

$(document).ready(function(){
    $("body").append("<div style='position: absolute;top: 760px;page-break-before: always'>");
});

Answer 1

Try this article

请确保您使用

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

Answer 2

由于page-break- *在Google chrome上不起作用，因此这是对我有效的解决方案。我为所有不想在两个页面之间分开的HTML元素设置了display: inline-block。

.msgbx,.svnotice, .imgdescbx img {
   display: inline-block;
 }