是否可以使 HTML 页面的行为类似于 MS Word 中的 A4 大小页面？
本质上，我希望能够在浏览器中显示 HTML 页面，并以 A4 尺寸页面的尺寸勾勒出内容。
为了简单起见，我假设 HTML 页面将只包含文本（没有图像等）并且不会有 <br> 标记。
另外，当 HTML 页面被打印出来时，它会以 A4 大小的纸页形式出现。
【问题讨论】：
很久以前，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 进行打印设计……以防万一你可以使用另一个教程。
编辑（2018 年 10 月 30 日）
我注意到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 进行打印：
然而，我会避免麻烦，只需使用cm（厘米）或mm（毫米）来调整大小，因为这样可以避免根据您使用的客户端可能出现的渲染故障。
【讨论】：
cm 等的明显测量单位的原因。我建议您阅读链接的文章和/或至少阅读我的答案。这样做你会很快注意到你的问题实际上并没有真正的意义。此外，如果事情仍然不清楚，您可能希望将您的问题作为一个新问题发布。这是一个问答网站，不是论坛。 \o/
强制 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>
【讨论】：
body { height:297mm; width:210mm; margin-left:auto; margin-right:auto; }
A4 尺寸为 210x297mm
因此您可以使用 CSS 设置 HTML 页面以适应这些尺寸：
html,body{
height:297mm;
width:210mm;
}
【讨论】：
为每个页面创建部分，并使用以下代码调整边距、高度和宽度。
如果您打印的是 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;
}
【讨论】：
@page Section1 使用 Chrome 41.0.2272.77。您真的确定您的答案有效吗？尝试例如访问data:text/html,<style>@page x{size:100pt 200pt}</style><div style="page:x">x</div> 并打开打印预览。我认为这和data:text/html,x 没有区别。当我用@page 替换@page x 时，它可以工作，但这不是特定于页面的选择器。
我在google上搜索后看到了这个解决方案，搜索“A4 CSS页面模板”（codepen.io）。它使用
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）。
【讨论】：
box-shadow: none;而不是0
我已经使用 HTML 生成报告，这些报告可以在真实纸张上以真实尺寸正确打印出来。
如果你在 CSS 文件中小心地使用 mm 作为单位，你应该没问题，至少对于单页来说是这样。不过，人们可以通过更改浏览器中的打印缩放来搞砸你。
我似乎记得我所做的一切都是单页的，所以我不必担心分页 - 这可能会更难。
【讨论】：
<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;
}
【讨论】：
PPI 和 DPI 对文档在浏览器中的打印方式没有任何影响。打印机不会获取有关屏幕点距或图像 DPI 等的信息。如果您正在打印图像，它们将以与屏幕上显示方式成比例的尺寸打印。浏览器的打印处理器会将图像的 DPI 从相当低的 72dpi 增加到文档其余部分的 DPI。假设图像显示为半页宽，然后物理宽度约为 4 英寸。图像的像素宽度约为 300 像素才能在浏览器中正确显示。当它以标称 300DPI 打印时，处理器已添加像素并且图像将增长到大约 1200 像素，在 300 DPI 时为 4"。
当涉及到矢量或非像素元素（如文本）时，打印机会从驱动程序中选择自己的 DPI，这与屏幕点距或浏览器宽度等无关。如果浏览器是 3000 像素宽，打印处理器将换行文本视情况而定。
这就是创建打印显示困难的原因：每个浏览器和打印机都会以自己的方式解释文本大小（pt、em、px）和间距。根据您使用的打印机、浏览器甚至操作系统的不同，每页的行数和字符数会有所不同。因此，即使您使用浏览器和打印机在计算机上进行测试，并发现您可以在 640x900 像素的框中显示文本并且打印效果很好，下一个尝试打印的人可能会以不同的方式打印。确实没有办法强制每台打印机和浏览器每次都使其相同。
忘记像素，甚至忘记 DPI，您可以使用像素的唯一方法是设置模拟打印机上可打印区域宽度的表格宽度。在那种情况下，我发现 640px 宽很接近。
【讨论】：
寻找类似问题我发现了这个 - http://www.indigorose.com/forums/archive/index.php/t-13334.html
A4 是一种文档格式，作为取决于图像分辨率的屏幕图像，例如将 A4 文档调整为：
【讨论】：
我知道这个主题已经很老了，但我想分享我对这个主题的经验。实际上，我正在寻找一个可以帮助我完成日常报告的模块。我正在用 HTML + CSS（而不是 Word、Latex、OO 等）编写一些文档和一些报告。目标是将它们打印在 A4 纸上与朋友分享，...而不是搜索，我决定进行一个有趣的小编码会话来实现一个可以处理“页面”、页码、摘要、标题的简单库, 页脚, .... 最后，我在 ~~2 小时内完成了它，我知道这不是有史以来最好的工具，但对于我的目的来说几乎没问题。您可以在我的 repo 上查看这个项目，并毫不犹豫地分享您的想法。这可能不是您 100% 搜索的内容，但我认为这个模块可以帮助您。
基本上我创建了一个正文“宽度：200mm;”的页面容器高度：290mm（小于A4）。然后我使用了 page-break-after: always;所以浏览器的“打印”选项知道什么时候分页。
【讨论】：
很多方法：
使用毫米mm:
html, body {
width: 210mm;
height: 297mm;
}
使用厘米cm：
html, body {
width: 21.0cm;
height: 29.7cm;
}
使用积分pt:
html, body {
width: 595pt;
height: 842pt;
}
【讨论】：
从技术上讲，您可以，但是要让所有浏览器完全按照屏幕上显示的方式打印出页面需要做很多工作。此外，大多数浏览器会在打印输出上强制使用 URL、打印日期和页码，这并不总是需要的。这不能更改或禁用。
相反，我建议根据屏幕上的内容创建 PDF 并提供 PDF 以供下载和/或打印。尽管most available PDF libraries 是付费的，但有一些free alternatives 可用于创建基本的PDF。
【讨论】：
自 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：
【讨论】：
完全可以将布局设置为采用 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 打印页面。这是否值得花时间投资是另一个问题。
【讨论】：
<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>
【讨论】：