如何制作一个A4纸大小的HTML页面?

小开

从技术上讲，您可以这样做，但是要让所有浏览器打印出与屏幕上显示的一模一样的页面，需要做很多工作。而且，大多数浏览器强制在打印结果上输入URL、打印日期和页码，这并不总是理想的。这不能被改变或禁用。

相反，我建议根据屏幕上的内容创建一个PDF，并将PDF提供给下载和/或打印。虽然大多数可用的PDF库是付费的，但有一些自由选择可用于创建基本的pdf。

小开

强制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>

小开

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

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

我似乎记得我所做的每一件事都是单页的，所以我不必担心分页——那可能要困难得多。

小开

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

棘手的部分是打印A4纸。例如，Javascript只支持使用window.print方法粗略地打印页面。正如@ prutwonder所建议的那样，从网页中创建PDF可能是最复杂的方法(除了首先提供PDF文档之外)。然而，这并不像人们想象的那么微不足道。这里有一个链接，描述了一个从HTML创建pdf的所有开源Java类:http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

显然，一旦你创建了一个A4比例的PDF打印，它将导致一个干净的A4打印页面。这是否值得投入时间是另一个问题。

小开

PPI和DPI对于如何从浏览器中打印文档没有任何影响。打印机不需要屏幕点间距或图像的DPI等信息，如果你打印图像，他们将打印的大小与它们在屏幕上显示的比例相似。浏览器的打印处理器会将图像的DPI从72dpi提高到文档其他部分的DPI。假设图像显示为半页宽，那么它的物理宽度约为4英寸。图像的像素宽度大约为300px，以便在浏览器中正确显示。当它以标称的300DPI打印时，处理器已经添加了像素，图像将增长到1200px左右，在300DPI下是4英寸。

当涉及到矢量或非基于像素的元素，如文本，打印机从驱动程序中选择自己的DPI，这与屏幕点间距或浏览器宽度无关。如果浏览器宽度为3000px，打印处理器将适当地换行文本。

以下是创建打印显示的困难之处:每个浏览器和打印机都将以自己的方式解释文本大小(pt, em, px)和间距。根据你使用的打印机、浏览器甚至操作系统的不同，每页的行数和字符数也会有所不同。因此，即使你在电脑上使用浏览器和打印机进行测试，并发现你可以在一个640x900px的方框中显示文本，并且它在打印时非常完美，下一个尝试打印的人可能会得到不同的打印结果。确实没有办法强制每个打印机和浏览器每次都得到相同的结果。

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

小开

<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;
}

小开

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

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

72 dpi (web) = 595 X 842像素
300 dpi(打印)= 2480 X 3508像素 (这是我所知道的“A4”。"210mm X 297mm @ 300 dpi")

小开

为每一页创建节，并使用下面的代码来调整页边距、高度和宽度。

如果你打印的是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;
}

小开

我知道这个话题很老了，但我想分享一下我关于这个话题的经验。实际上，我正在寻找一个可以帮助我完成每日报告的模块。我正在用HTML + CSS(而不是Word, Latex, OO，…)写一些文档和报告。我们的目标是把它们打印在A4纸上，与朋友们分享。而不是搜索，我决定有一个小的有趣的编码会话来实现一个简单的库，可以处理“页面”，页码，摘要，页眉，页脚，....最后，我在~~2小时内完成了它，我知道这不是最好的工具，但它几乎可以满足我的目的。你可以看看我回购的这个项目，不要犹豫分享你的想法。这可能不是你在100%的搜索，但我认为这个模块可以帮助你。

基本上我创建了一个页面的主体“宽度:200mm;”和容器的高度:290mm(小于A4)。然后我使用了page-break-after: always;因此，浏览器的“打印”选项知道何时拆分页面。

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

小开

最佳答案

很久以前，在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. */
}

这篇文章深入探讨了设置换页等问题，所以你可能想要完整地阅读它。

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

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

编辑(26-02-2015)

今天，我碰巧发现了另一个最近的在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 (web) = 595 X 842像素
300 dpi(打印)= 2480 X 3508像素
600 dpi(高质量打印)= 4960 X 7016像素

然而，我会避免麻烦，简单地使用cm(厘米)或mm(毫米)来确定大小，因为这样可以避免根据您使用的客户端而出现的渲染故障。

小开

A4大小为210年x297mm

所以你可以用CSS设置HTML页面来适应这些大小:

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

小开

我在谷歌上搜索“A4 CSS页面模板”(codepend .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库包括在内。适用于当前的浏览器(IE, FF, Chrome)。

小开

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

这是HTML给你运行代码段，看看结果:

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/

小开

有很多方法:

使用毫米mm:

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

使用公分cm:

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

使用pt点:

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

小开

<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>