如何在 A4 纸张大小的页面中制作 HTML 页面？

Posted 2023-02-14

技术标签:

【中文标题】如何在 A4 纸张大小的页面中制作 HTML 页面？【英文标题】：How to make a HTML Page in A4 paper size page(s)? 【发布时间】：2011-03-21 11:13:01 【问题描述】：

是否可以使 html 页面的行为类似于 MS Word 中的 A4 大小页面？

本质上，我希望能够在浏览器中显示 HTML 页面，并以 A4 尺寸页面的尺寸勾勒出内容。

为了简单起见，我假设 HTML 页面将只包含文本（没有图像等）并且不会有 <br> 标记。

另外，当 HTML 页面被打印出来时，它会以 A4 大小的纸页形式出现。

【问题讨论】：

您可以：github.com/delight-im/HTML-Sheets-of-Paper 可能欺骗：***.com/questions/16649943/css-to-set-a4-paper-size 真正的“用于打印的 HTML” 即将到来！在 ***.com/q/10641667/287948 和 W3C 的 CSS level 3 fragmentation module 上查看所有历史记录，即将推出！这样做的目的是什么？离开 MS Office 是为了网络技术吗？至少我正在尝试但仍然需要一些input how。回答这个问题将结束这个问题开始的故事。 【参考方案1】：

从技术上讲，您可以，但是要让所有浏览器完全按照屏幕上显示的方式打印出页面需要做很多工作。此外，大多数浏览器会在打印输出上强制使用 URL、打印日期和页码，这并不总是需要的。这不能更改或禁用。

相反，我建议根据屏幕上的内容创建 PDF 并提供 PDF 以供下载和/或打印。尽管most available PDF libraries 是付费的，但有一些free alternatives 可用于创建基本的PDF。

【讨论】：

【参考方案2】：

强制 Web 浏览器显示与 A4 像素尺寸相同的页面是相当容易的。但是，渲染事物时可能会有一些怪癖。

假设您的显示器显示 72 dpi，您可以添加如下内容：

<!DOCTYPE html>
<html>
  <head>
    <style>
    body 
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    
    </style>
  </head>
  <body>
  </body>
</html>

【讨论】：

按照 Will Dean 的建议（这很有意义）使用毫米，您可以强制浏览器计算像素宽度/高度：body height: 420mm;宽度：297mm； ... A4 实际上是 210x297 毫米。所以，最后是一张肖像 DINA4：body height:297mm; width:210mm; margin-left:auto; margin-right:auto; 现在做了大量的工作，虽然 210x297 尺寸很好，但它们不应该被视为适合 A4 页面的绝对。一个很好的测试是直接从 Chrome 打印->PDF 并滚动预览页面缩略图；即使没有设置边距，也必须减小整个高度以避免溢出 -> 导致所有偶数页为空白。【参考方案3】：

我已使用 HTML 生成报告，这些报告可以在真实纸张上以真实尺寸正确打印出来。

如果您在 CSS 文件中小心地使用 mm 作为单位，您应该没问题，至少对于单页是这样。不过，人们可以通过更改浏览器中的打印缩放来搞砸你。

我似乎记得我所做的一切都是单页的，所以我不必担心分页 - 这可能会更难。

【讨论】：

【参考方案4】：

完全可以将布局设置为采用 a4 页面的比例。您只需相应地设置宽度和高度（可能与window.innerHeight 和window.innerWidth 核对，尽管我不确定这是否可靠）。

棘手的部分是打印 A4。例如，javascript 仅支持使用 window.print 方法初步打印页面。正如@Prutswonder 建议的那样，从网页创建 PDF 可能是最复杂的方法（除了首先提供 PDF 文档）。然而，这并不像人们想象的那么微不足道。这是一个链接，其中描述了从 HTML 创建 PDF 的所有开源 Java 类：http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html。

显然，一旦您创建了具有 A4 比例打印的 PDF，它将生成干净的 A4 打印页面。这是否值得花时间投资是另一个问题。

【讨论】：

【参考方案5】：

PPI 和 DPI 对文档在浏览器中的打印方式没有任何影响。打印机不会获取有关屏幕点距或图像 DPI 等的信息。如果您正在打印图像，它们将以与屏幕上显示方式成比例的尺寸打印。浏览器的打印处理器会将图像的 DPI 从相当低的 72dpi 增加到文档其余部分的 DPI。假设图像显示为半页宽，然后物理宽度约为 4"。图像的像素宽度约为 300 像素，才能在浏览器中正确显示。当它以标称 300DPI 打印时，处理器已添加像素并且图像将增长到大约 1200 像素，在 300 DPI 时为 4"。

当涉及到矢量或非像素元素（如文本）时，打印机会从驱动程序中选择自己的 DPI，这与屏幕点距或浏览器宽度等无关。如果浏览器是 3000 像素宽，打印处理器将换行文本视情况而定。

这就是创建打印显示困难的原因：每个浏览器和打印机都会以自己的方式解释文本大小（pt、em、px）和间距。根据您使用的打印机、浏览器甚至操作系统的不同，每页的行数和字符数会有所不同。因此，即使您使用浏览器和打印机在计算机上进行测试，并发现您可以在 640x900 像素的框中显示文本并且打印效果很好，下一个尝试打印的人可能会以不同的方式打印。确实没有办法强制每台打印机和浏览器每次都使其相同。

忘记像素，更忘记 DPI，您可以使用像素的唯一方法是设置模拟打印机上可打印区域宽度的表格宽度。在那种情况下，我发现 640px 宽很接近。

【讨论】：

阅读了很多页，他们都认为增加 DPI 会导致打印时尺寸更小（3000px / 300dpi = 10 英寸）。但是当从我的 chrome 浏览器打印时，600 DPI 和 1200 DPI 会导致在纸上的尺寸完全相同。直到我读到这篇文章才真正感到困惑！【参考方案6】：

<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

在你平常的style.css:

table.tableclassname 
  width: 400px;

在你的print.css:

table.tableclassname 
  width: 16 cm;

【讨论】：

【参考方案7】：

寻找类似问题我发现了这个 - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 是一种文档格式，作为取决于图像分辨率的屏幕图像，例如将 A4 文档调整为：

72 dpi（网络）= 595 X 842 像素 300 dpi（打印）= 2480 X 3508 像素（据我所知，这是“A4”，即“210mm X 297mm @ 300 dpi”） 600 dpi （打印）= 4960 X 7016 像素

【讨论】：

【参考方案8】：

为每个页面创建部分，并使用以下代码调整边距、高度和宽度。

如果您打印的是 A4 尺寸。

然后是用户

Size : 8.27in and 11.69 inches

@page Section1 
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;


div.Section1 
    page: Section1;

然后创建一个包含所有内容的 div。

<div class="Section1"> 
    type your content here... 
</div>

或

@media print 
    .page-break  
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    


body, p, a,
span, td  
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;


body 
    margin-left: 2em; 
    margin-right: 2em;


.page 
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;

【讨论】：

你确定它有效吗？我无法在最新的 Firefox 和 Chrome 中重现这一点。是的，我主要是在为 chrome 做开发……和我一起工作得很好。我无法让 @page Section1 使用 Chrome 41.0.2272.77。您真的确定您的答案有效吗？尝试例如访问data:text/html,<style>@page xsize:100pt 200pt</style><div style="page:x">x</div> 并打开打印预览。我认为这和data:text/html,x 没有区别。当我用@page 替换@page x 时，它可以工作，但这不是特定于页面的选择器。对于那些不习惯将 CSS 放入文档的人（就像我在撰写本文时一样），您可以将此代码放在标签中，然后调用 div（例如 Stuff More stuff) 其中“Stuff”和“more stuff”是要包含在单个页面中的内容。【参考方案9】：

我知道这个主题已经很老了，但我想分享我对这个主题的经验。实际上，我正在寻找一个可以帮助我完成日常报告的模块。我正在用 HTML + CSS（而不是 Word、Latex、OO 等）编写一些文档和一些报告。目标是将它们打印在 A4 纸上与朋友分享，...而不是搜索，我决定进行一个有趣的小编码会话来实现一个可以处理“页面”、页码、摘要、标题的简单库, 页脚, .... 最后，我在 ~~2 小时内完成了它，我知道这不是最好的工具，但它几乎可以满足我的目的。您可以在我的 repo 上查看这个项目，并毫不犹豫地分享您的想法。这可能不是您 100% 搜索的内容，但我认为这个模块可以帮助您。

基本上我创建了一个正文“宽度：200mm;”的页面容器高度：290mm（小于A4）。然后我使用了 page-break-after: always;所以浏览器的“打印”选项知道什么时候分页。

回购：https://github.com/kursion/jsprint

【讨论】：

【参考方案10】：

很久以前，2005 年 11 月，AlistApart.com 发表了一篇文章，介绍了他们如何使用 HTML 和 CSS 出版一本书。见：http://alistapart.com/article/boom

这是那篇文章的摘录：

CSS2 有一个分页媒体的概念（想想纸），而不是连续媒体（想想滚动条）。样式表可以设置页面大小及其边距。页面模板可以被命名，元素可以说明他们想要打印在哪个命名页面上。此外，源文档中的元素可以强制分页。这是我们使用的样式表中的一个 sn-p：

@page 
    size: 7in 9.25in;
    margin: 27mm 16mm 27mm 16mm;

有一家美国出版商，我们获得了以英寸为单位的页面大小。作为欧洲人，我们继续使用公制测量。 CSS 两者都接受。

设置页面大小和边距后，我们需要确保在正确的位置有分页符。以下摘录显示了章节和附录之后如何生成分页符：

div.chapter, div.appendix 
    page-break-after: always;

此外，我们使用 CSS2 来声明命名页面：

div.titlepage 
    page: blank;

也就是说，标题页将打印在名称为“空白”的页面上。 CSS2 描述了命名页面的概念，但它们的价值只有在页眉和页脚可用时才会显现出来。

不管怎样……

既然要打印 A4，当然需要不同的尺寸：

@page 
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */

本文深入探讨了设置分页符等内容，因此您可能需要完整阅读。

在您的情况下，诀窍是首先创建打印 CSS。大多数现代浏览器 (>2005) 支持缩放，并且已经能够显示基于打印 CSS 的网站。

现在，您需要让 Web 显示看起来有点不同，并调整整个设计以适应大多数浏览器（包括 2005 年之前的旧浏览器）。为此，您必须创建一个 Web CSS 文件或覆盖打印 CSS 的某些部分。在为 web 显示创建 CSS 时，请记住浏览器可以有任何大小（想想：“移动”到“大屏幕电视”）。含义：对于网络 CSS，最好使用可变宽度 (%) 设置页面宽度和图像宽度，以支持尽可能多的显示设备和网络浏览客户端。

编辑（2015 年 2 月 26 日）

今天，我偶然发现了另一个更新的 article at SmashingMagazine，它也深入研究了使用 HTML 和 CSS 进行打印设计……以防万一你可以使用另一个教程。

编辑（30-10-2018）

我注意到size 不是有效的 CSS3，这确实是正确的——我只是重复了文章中引用的代码，它（如前所述）是很好的旧 CSS2（当你看在这篇文章和这个答案首次发表的那一年）。无论如何，为了方便您的复制和粘贴，这里是有效的 CSS3 代码：

@media print 
    body
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */

如果您认为您确实需要像素（您实际上应该避免使用像素），您必须注意选择正确的 DPI 进行打印：

72 dpi（网络）= 595 X 842 像素 300 dpi（打印）= 2480 X 3508 像素 600 dpi（高质量打印）= 4960 X 7016 像素

然而，我会避免麻烦，只需使用cm（厘米）或mm（毫米）来调整大小，因为这样可以避免根据您使用的客户端可能出现的渲染故障。

【讨论】：

@A.com 没有 px，因为这取决于 DPI...这就是 CSS 支持这些称为cm 等的明显测量单位的原因。我建议您阅读链接的文章和/或至少阅读我的答案。这样做你会很快注意到你的问题实际上并没有真正的意义。此外，如果事情仍然不清楚，您可能希望将您的问题作为一个新问题发布。这是一个问答网站，不是论坛。 \o/ 谢谢。是否可以为每一页插入页码？【参考方案11】：

A4 尺寸为 210x297mm

因此您可以使用 CSS 设置 HTML 页面以适应这些尺寸：

html,body
    height:297mm;
    width:210mm;

【讨论】：

如果我们的动态内容可能长达 3-4 页或更多页怎么办？完美的一页样式。 @jazzbpn 我认为您需要设置 html、body 以适应 100% 的高度和宽度，然后创建自定义标签或 div，并定义上述尺寸【参考方案12】：

我在google上搜索后看到了这个解决方案，搜索“A4 CSS页面模板”（codepen.io）。它使用标记在浏览器中显示 A4（A3、A5，也是纵向）大小的区域。在此标签内显示内容，但绝对位置仍然是相对于浏览器区域。

body 
  background: rgb(204,204,204); 

page 
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);

page[size="A4"]   
  width: 21cm;
  height: 29.7cm; 

page[size="A4"][layout="portrait"] 
  width: 29.7cm;
  height: 21cm;  

@media print 
  body, page 
    margin: 0;
    box-shadow: 0;

<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

这对我有用，无需包含任何其他 css/js-library。适用于当前浏览器（IE、FF、Chrome）。

【讨论】：

将此示例与 FF 53.0.3 一起使用并将两个横向页面一个接一个地放置是行不通的。在常规视图中看起来不错，但在选择打印预览时，它会扩展为 3 页。不是要把老牛拖出沟壑，但我认为box-shadow应该是box-shadow: none;而不是0 它对我有用，我必须改变高度如果我们的动态内容可能长达 3-4 页或更多页怎么办？【参考方案13】：

自 1998 年以来，我在商业报告中使用 680px 在 A4 页面上打印。700px 无法正确适应取决于边距的大小。现代浏览器可以缩小页面以适应打印机上的页面，但如果您使用 680 像素，您几乎可以在任何浏览器中正确打印。

这就是你的 HTML 运行代码 sn-p 并查看结果：

window.print();

<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle：

https://jsfiddle.net/ajofmm7r/

【讨论】：

整页的高度是多少像素？【参考方案14】：

很多方法：

使用毫米mm:

html, body 
    width:  210mm;
    height: 297mm;

使用厘米cm：

html, body 
    width:  21.0cm;
    height: 29.7cm;

使用积分pt:

html, body 
    width:  595pt;
    height: 842pt;

【讨论】：

在此处添加对最后规则的更正：它应该在 pt(point) 而不是 px(pixel) 中。 html,body 高度：842pt;宽度：595pt； 【参考方案15】：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
    <title>DIN A4 Page</title>
    <style type="text/css">
        @page  size: 21cm 29.7cm; margin: 2cm 
        p  line-height: 120%; text-align: justify; background: transparent 
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. 
</p>
</body>
</html>

【讨论】：

以上是关于如何在 A4 纸张大小的页面中制作 HTML 页面？的主要内容，如果未能解决你的问题，请参考以下文章

正常的A4页面边距是多少?

CSS 设置 A4 纸张大小

怎样把打印机a4的纸打a5的纸

arcgis 布局视图怎么切换纸张A4到A3大小？

页面管理

如何获取所有纸张尺寸名称和相应的像素尺寸？