早在2005年11月，AlistApart.com就发表了一篇关于如何使用HTML和CSS来发表一本书的文章。 请参阅： http ： //alistapart.com/article/boom

这篇文章的摘录如下：

CSS2有一个分页媒体的概念(思考纸)，而不是连续的媒体(思考滚动条)。 样式表可以设置页面大小和边距。 可以为页面模板指定名称，元素可以指定要打印哪个指定页面。 而且，源文档中的元素可以强制分页。 这里是我们使用的样式表的一个片段：

@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. */ }

这篇文章潜入诸如设置页面中断等等，所以你可能想要完全阅读。

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

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

编辑(26-02-2015)

今天，我碰巧碰到另一个更新的SmashingMagazine文章，它也潜入HTML和CSS打印devise中，以防万一您可以使用另一个教程。

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

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

创build每个页面的部分，并使用下面的代码来调整边距，高度和宽度。

如果您正在打印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; }

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

要么

@media print { .page-break { height:0; page-break-before:always; margin:0; border-top:none; } } body, p, span, td, a {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; }

A4尺寸是210x297mm

所以你可以设置HTML页面以适应CSS的大小：

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

我使用HTML来生成报告，在真实纸张上以实际大小正确打印出来。

如果在CSS文件中谨慎使用mm作为您的单位，您应该可以，至less对于单个页面。 不过，人们可以通过更改浏览器中的打印缩放来解决问题。

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

在你正常的style.css ：

table.tableclassname { width: 400px; }

在你的print.css ：

table.tableclassname { width: 16 cm; }

PPI和DPI使文档如何从浏览器打印完全没有区别。 打印机不会在屏幕点距或图像的DPI等信息上进行打印，如果打印的图像尺寸与屏幕上显示的尺寸成比例， 浏览器的打印处理器会将图像的DPI从72dpi等较低的值增加到文档其余部分的任何DPI。 比如说图片显示为半页宽，那么它的物理宽度大约为4英寸，图片的像素宽度大约是300px，以便在浏览器中正确显示，当它以标称的300DPI打印时，处理器已经添加了像素并且图像将增长到1200px，这在300 DPI是4“。

当涉及基于vector或非像素的文本元素时，如果浏览器宽度为3000像素，则打印机会从驱动程序中select自己的DPI(与打印点距或浏览器宽度无关)，打印处理器将根据需要包装文本。

inheritance人是什么使创build打印显示很难：每个浏览器和打印机将以自己的方式解释文本大小(pt，em，px)和间距。 取决于你使用的打印机，浏览器，甚至是操作系统，你每页都会得到不同数量的行和字符。 所以即使您使用浏览器和打印机在计算机上进行testing，并发现您可以在640×900像素的文本框中显示文本，并且打印完美，下一个尝试打印的人可能会以不同的方式进行打印。 真的没有办法迫使每台打印机和浏览器每次都得到相同的结果。

忘记像素，而且还忘记DPI，唯一可以使用像素的是设置模拟打印机可打印区域宽度的表格宽度。 在这种情况下，我发现宽640px是接近。

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

72 dpi(网)= 595×842像素

300 dpi(打印)= 2480 X 3508像素(我知道这是“A4”，即“210mm X 297mm @ 300 dpi”)

600 dpi(打印)= 4960×7016像素

从技术上讲，你可以，但是要让所有浏览器按照屏幕上的显示完全打印页面将需要很多工作。 此外，大多数浏览器强制打印输出的URL，打印date和页码，这并不总是需要的。 这不能被改变或禁用。

相反，我build议根据屏幕上的内容创build一个PDF，并提供下载和/或打印的PDF。 尽pipe大多数可用的PDF库都已付费，但有几个免费的替代品可用于创build基本的PDF。

我知道这个主题已经很老了，但我想分享一下我的经验。 其实，我正在寻找一个模块，可以帮助我的日常报告。 我正在写一些文档和HTML + CSS(而不是Word，Latex，OO，…)的一些报告。 对象将打印在A4纸上，与朋友分享… …而不是search，我决定有一个小的搞笑编码会话，实现一个简单的库，可以处理“页面”，页码，摘要，标题，页脚，….最后，我在~~ 2h做了，我知道这不是最好的工具，但对我的目的来说几乎没有问题。 你可以在我的回购看看这个项目，不要犹豫分享你的想法。 这可能不是你正在寻找的100％，但我认为这个模块可以帮助你。

基本上我创build了一个“宽度：200mm”的页面 和容器高度：290mm(小于A4)。 然后我使用了页面中断：总是; 所以浏览器的“打印”选项知道何时分割页面。

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

我在谷歌search后看到这个解决scheme，search“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; } }

A4A4 portrait

完全可以将布局设置为假定a4页面的比例。 你只需要相应地设置宽度和高度(可能检查window.innerHeight和window.innerWidth虽然我不知道这是否可靠)。

棘手的部分是打印A4。 例如，Javascript只支持用window.print方法基本打印页面。 正如@Prutswonderbuild议从网页创build一个PDF可能是这样做的最复杂的方式(除了首先提供PDF文档)。 然而，这并不像人们想象的那样微不足道。 下面的链接描述了所有开源的Java类，用于从HTML创buildPDF： http : //www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html 。

很显然，一旦您创build了A4比例的PDF打印，将会在您的页面上打印出一张干净的A4打印。 是否值得花时间投资是另一个问题。

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

这就是HTML给你运行代码片段 ，看看结果：

window.print();

很多方法可以做到：

html,body{ height:297mm; width:210mm; } html,body{ height:29.7cm; width:21cm; } html,body{ height: 842px; width: 595px; }