java页面表格a4打印_如何在A4纸张尺寸页面制作HTML页面？

在2005年11月，AlistApart.com发表了一篇关于他们如何使用HTML和CSS发表一本书的文章 . 见：http://alistapart.com/article/boom

这是该文章的摘录：

CSS2有分页媒体的概念(想想纸张)，而不是连续媒体(想想滚动条) . 样式表可以设置页面大小及其边距 . 页面模板可以给出名称，元素可以说明要打印的页面 . 此外，源文档中的元素可以强制分页 . 以下是我们使用的样式表的摘录：@page {

尺寸：7英寸9.25英寸;

边距：27mm 16mm 27mm 16mm;

}

有了一个美国的出版商，我们得到了以英寸为单位的页面大小 . 作为欧洲人，我们继续进行公制测量 . CSS接受两者 . 设置页面大小和页边距后，我们需要确保在正确的位置有分页符 . 以下摘录显示了如何在章节和附录之后生成分页符：div.chapter，div.appendix {

page-break-after：always;

}

此外，我们使用CSS2声明命名页面：div.titlepage {

页面：空白;

}

也就是说， Headers 页将打印在名称为“空白”的页面上.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时，请记住浏览器可以具有任何大小(想想：“移动”到“大屏幕电视”) . 含义：对于Web CSS，您的页面宽度和图像宽度最好使用可变宽度(％)设置，以支持尽可能多的显示设备和Web浏览客户端 .

EDIT (26-02-2015)

今天，我偶然发现了另一个更近期的article at SmashingMagazine，它也潜入了用HTML和CSS进行打印的设计......以防万一你可以使用另一个教程 .

EDIT (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. */

}

}

如果您认为您确实需要像素( you should actually avoid using pixels )，则必须注意选择正确的DPI进行打印：

72 dpi(网页)= 595 X 842像素

300 dpi(打印)= 2480 X 3508像素

600 dpi(高质量打印)= 4960 X 7016像素

然而，我会避免麻烦，只需使用 cm (厘米)或 mm (毫米)进行大小调整，因为这样可以避免出现根据您使用的客户端而产生的故障 .