如何在A4纸张尺寸页面中制做HTML页面？

是否可使HTML页面的行为相似于MS Word中的A4大小的页面？

本质上，我但愿可以在浏览器中显示HTML页面，并以A4尺寸页面的尺寸概述内容。

为了简单起见，我假设HTML页面仅包含文本（没有图像等），而且没有例如<br>标记。

另外，当打印HTML页面时，它将以A4尺寸的纸页形式出现。

---

#1楼

在每一个页面上建立一个部分，并使用如下代码调整边距，高度和宽度。

若是要打印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;
}

---

#2楼

我知道这个主题已经很老了，可是我想分享一下我对该主题的经验。 实际上，我正在搜索一个能够帮助我处理平常报告的模块。 我正在用HTML + CSS编写一些文档和报告（而不是Word，Latex，OO等）。 其目标是将它们打印在A4纸上，以便与朋友共享。...而不是进行搜索，我决定进行一次小型有趣的编码会议，以实施一个简单的lib，该lib能够处理“页面”，页码，摘要，标题，页脚，....最后，我在~~ 2h内完成了此操做，我知道这不是有史以来最好的工具，但就个人目的而言几乎能够。 您能够在个人仓库中查看该项目，并随时分享您的想法。 也许不是您要100％搜索的内容，可是我认为该模块能够为您提供帮助。

基本上，我建立一个页面“宽度：200mm”； 和高度为290mm（小于A4）的容器。 而后我使用page-break-after：always; 所以浏览器的“打印”选项知道什么时候拆分页面。

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

---

#3楼

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

也就是说，标题页将被打印在名称为“ 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时，请记住浏览器能够具备任意大小（请考虑：“移动”到“大屏幕电视”）。 含义：对于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. */
   } 
}

若是您认为确实须要像素（ 实际上应该避免使用pixel ），则必须选择正确的DPI进行打印：

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

可是，我会避免麻烦，只需使用cm （厘米）或mm （毫米）来进行大小调整，由于这样能够避免出现渲染故障，具体取决于您使用的客户端。

---

#4楼

A4尺寸为210x297mm

所以，您能够设置HTML页面以使其适合CSS尺寸：

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

---

#5楼

从技术上讲，您能够，可是要使全部浏览器彻底按照屏幕上的显示打印出页面，须要大量的工做。 一样，大多数浏览器在打印输出上强制使用URL，打印日期和页码，但这并不是老是如此。 这不能更改或禁用。

相反，我建议您根据屏幕上的内容建立一个PDF并将其提供给下载和/或打印。 尽管大多数可用的PDF库都是付费的，可是有一些免费的替代方法可用于建立基本PDF。