Question

我正在制作一个可打印的HTML报告，并且它的“部分”应该在新页面中开始。

有没有什么方法可以在HTML / CSS中添加一些内容，以便向浏览器发出需要强制分页（开始新页面）的信息？

我不需要在每个浏览器中使用它，我想我可以告诉人们使用一组特定的浏览器来打印它。

Answer 1

添加名为“pagebreak”（或“pb”）的CSS类，如下所示：

.pagebreak { page-break-before: always; } /* page-break-after works, as well */

然后在您希望分页的位置添加一个空的DIV标记（or any block element that generates a box）。

<div class="pagebreak"> </div>

它不会显示在页面上，但会在打印时分解页面。

P.S。也许这仅适用于使用-after（以及您可能正在对页面上的其他<div>执行的其他操作），但我发现我必须按如下方式扩充CSS类：

.pagebreak {
    clear: both;
    page-break-after: always;
}

Answer 2

试试这个link

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

Answer 3

您可以使用CSS属性page-break-before（或page-break-after）。只需在应该从新行开始的那些块级元素（例如，标题，page-break-before: always，div或p元素）上设置table。

例如，要在任何第二级标题之前和类newpage中的任何元素（例如<div class=newpage> ...）之前引起换行，您将使用

h2, .newpage { page-break-before: always }

Answer 4

试试这个（它适用于 Chrome、Firefox 和 IE）：

... content in page 1 ...
<p style="page-break-after: always;">&nbsp;</p>
<p style="page-break-before: always;">&nbsp;</p>
... content in page 2 ...

Answer 5

只想进行更新。 page-break-after现在是旧财产。

page官方声明

此属性已由break-after属性取代。

Answer 6

只需在需要页面进入下一页的位置添加它（文本“ page 1”将在页面1上，文本“ page 2”将在第二页上）。

Page 1
<div style='page-break-after:always'></div>
Page 2

Answer 7

在浏览器上使用打印命令时，我需要在第3行之后分页。

我添加了

class FansLabelsRight(QWidget):
    def __init__(self, parent):
        super().__init__(parent)
        print('is it working?')
        self.setGeometry(275,65,110,140)
        self.setStyleSheet("background: rgba(255,0,0,50)")
        #self.layout = QLayout(self)
        self.pane1 = QLabel(self)
        self.pane2 = QLabel(self)
        self.pane3 = QLabel(self)
        pixmap1 = QPixmap('rtC.png')
        pixmap2 = QPixmap('rtB.png')
        pixmap3 = QPixmap('rtA.png')
        self.pane1.setPixmap(pixmap1)
        self.pane2.setPixmap(pixmap2)
        self.pane3.setPixmap(pixmap3)
        #self.layout.addWidget(self.pane1)
        #self.layout.addWidget(self.pane2)
        #self.layout.addWidget(self.pane3)
        self.pane1.setGeometry(30,10,pixmap1.width(), pixmap1.height())
        self.pane2.setGeometry(35,30,pixmap2.width(), pixmap2.height())
        self.pane3.setGeometry(40,30,pixmap3.width(), pixmap3.height())
        self.setLayout(self.layout)

        self.show()

每3行和我的父div之后有class Ui_Form(object): def setupUi(self, Form): Form.setObjectName("Form") self.label = QLabel(Form) self.label.setGeometry(QtCore.QRect(60, 10, 61, 81)) self.label.setPixmap(QPixmap("rtA.png")) self.label.setObjectName("label") self.label_2 = QLabel(Form) self.label_2.setGeometry(QtCore.QRect(70, 30, 51, 111)) self.label_2.setPixmap(QPixmap("rtB.png")) self.label_2.setObjectName("label_2") self.label_3 = QLabel(Form) self.label_3.setGeometry(QtCore.QRect(60, 90, 47, 61)) self.label_3.setPixmap(QPixmap("rtC.png")) self.label_3.setObjectName("label_3") self.pushButton = QPushButton(Form) self.pushButton.setGeometry(QtCore.QRect(0, 0, 75, 61)) self.pushButton.setFlat(True) self.pushButton.setObjectName("pushButton") self.pushButton_2 = QPushButton(Form) self.pushButton_2.setGeometry(QtCore.QRect(0, 100, 75, 61)) self.pushButton_2.setFlat(True) self.pushButton_2.setObjectName("pushButton_2") QtCore.QMetaObject.connectSlotsByName(Form) 所以我删除了const fs = require('fs'); const syncImgFolder = (done) => { const files = fs.readdirSync('/path/'); }，它可以按我的意愿工作。

Answer 8

我为此苦苦挣扎了一段时间，但从未奏效。

最后，解决方案是在头部放置一个样式元素。

page-break-after 不能在链接的 CSS 文件中，它必须在 HTML 本身中。

Answer 9

假设您有一个博客，文章如下：

<div class="article"> ... </div>

只需将其添加到CSS即可为我工作：

@media print {
  .article { page-break-after: always; }
}

（已在Chrome 69和Firefox 62上测试并运行）。

参考：

https://www.w3schools.com/cssref/pr_print_pageba.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after;重要说明：这里说的是This property has been replaced by the break-after property.，但对我来说break-after无效。同样，有关break-after的MDN文档似乎并不是专门针对分页符的，所以我更喜欢保留（有效的）page-break-after: always;。

Answer 10

我们可以在要在页面中引入分页符的位置添加样式为<< em> page-break-after：always 的分页符标签。   html页面。


“ page-break-before ”也有效

示例：

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

在使用上述代码打印html文件时，打印预览将显示三页（每个html块“ HTML_BLOCK_n ”对应一个页面），其中在浏览器中，所有这三个块都依次显示另一个。

Answer 11

CSS

        private static readonly List<CultureInfo> SupportedCultures = new List<CultureInfo>
        {
            new CultureInfo("en"),
            new CultureInfo("fr")
        };

// ...

            services.AddMvc()
                .AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix, opts => { opts.ResourcesPath = "Resources"; })
                .AddDataAnnotationsLocalization(options =>
                {
                    options.DataAnnotationLocalizerProvider = (type, factory) =>
                        factory.Create(typeof(Language));
                })
                .SetCompatibilityVersion(CompatibilityVersion.Version_3_0)
                .AddRazorPagesOptions(options =>
                {
                    options.Conventions.AuthorizeAreaFolder("Identity", "/Account/Manage");
                    options.Conventions.AuthorizeAreaPage("Identity", "/Account/Logout");
                });

            services.AddLocalization(o =>
            {
                o.ResourcesPath = "Resources";
            });

            services.Configure<RequestLocalizationOptions>(options =>
            {
                options.DefaultRequestCulture = new RequestCulture("en", "en");
                options.SupportedCultures = SupportedCultures;
                options.SupportedUICultures = SupportedCultures;
            });
// ...


            app.UseRequestLocalization(new RequestLocalizationOptions
            {
                DefaultRequestCulture = new RequestCulture("en"),
                SupportedCultures = SupportedCultures,
                SupportedUICultures = SupportedCultures,
                RequestCultureProviders = new List<IRequestCultureProvider>
                {
                    new QueryStringRequestCultureProvider(),
                    new CookieRequestCultureProvider()
                }
            });

HTML

    public sealed class Language
    {

        public sealed class Login
        {
            public const string PageTitle          = nameof(Login) + nameof(PageTitle);
            public const string SubmitButton       = nameof(Login) + nameof(SubmitButton);
            public const string Username           = nameof(Login) + nameof(Username);
            // ...
        }
    }

Answer 12

这似乎在我的网站上不起作用。在输出了x数量的div后，我将使用具有break-break类的div标签，以便打印的页面将干净地“破坏”。是的-我已经检查并重新检查了我的代码，并在浏览器中查看了源页面。

Answer 13

@ Chris Doggett非常有意义。虽然，我在lvsys.com上找到了一个有趣的技巧，它实际上适用于firefox和chrome。只需将此注释放在您希望插入分页符的任何位置即可。您还可以将<p>标记替换为任何块元素。

<p><!-- pagebreak --></p>

我可以在HTML打印中强制分页吗？

13 个答案: