在 A4 页面上渲染 HTML 内容

问题描述 投票:0回答:2

我的文本内容超过 50,000 字。我必须将其以 A4 尺寸一页一页地分开,但第一页之后文字就溢出了。 我需要在 A4 页面上预览 HTML 内容(在打印之前在浏览器上)。问题是我无法跟踪页面高度。因此,当页面结束时,某些内容会超出页面。

有什么方法可以在 A4 页面上呈现动态 HTML 内容吗?

html css pdf pdf-generation html-to-pdf
2个回答
0
投票

您可以使用 css 来做到这一点,如下所示:

<html>
    <head>
        <style type="text/css">
            @page 
            {
                size: a4 portrait;
                margin: 15pt 15pt; 
            }
      </style>
    </head>
    <body>
        your long text ...
    </body>
</html>

另请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/@page 。为了更紧密地控制,请使用

break-inside
CSS 属性;请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside


0
投票

是的,您可以通过使用 CSS 媒体查询并将页面大小设置为 A4 尺寸来实现此目的。您可以在 CSS 中定义 @media 打印查询,并设置页面大小、边距和其他专门用于打印的样式。这将允许您在打印之前在浏览器中预览 A4 页面上显示的内容。

这是一个帮助您入门的基本示例:(A4 宽度、高度和边距)

@media print {
  body {
    width: 210mm;
    height: 297mm;
    margin: 20mm;
 }

}

您可以将此 CSS 应用于 HTML 文档,然后使用浏览器的打印预览功能来查看内容在 A4 页面上的分布情况。根据需要调整样式以满足您的特定布局要求。

© www.soinside.com 2019 - 2024. All rights reserved.