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

388

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

本质上，我希望能够在浏览器中显示HTML页面，并在A4尺寸页面的尺寸中概述内容。

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

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

html  css  printing 
— 扎巴
source
12
— CAW
— Mark Boulder's
1
将真正的“HTML打印”是comig！在stackoverflow.com/q/10641667/287948上查看所有历史记录，以及W3C的CSS 3级分段模块，即将来临！
— 彼得·克劳斯
这样做的意图是什么？是否要离开MS Office使用Web技术？至少我正在尝试，但是仍然需要一些输入。回答将结束故事，这个问题开始了。
— Stefan '18

Answers:

318

早在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显示网站。

现在，您将要使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（毫米）进行大小调整，因为这可以避免根据您使用的客户端而出现毛刺。

— 电子寿司
source
1
感谢您更新此答案以符合当前标准！
— jumps4fun
好的，但是有多少像素
— A.com
@ A.com没有px，因为这取决于DPI ...这就是CSS支持这些明显的度量单位（称为cmet al）的原因。我建议您阅读链接的文章和/或至少是我的答案。这样一来，您会很快注意到您的问题实际上没有任何意义。另外，如果情况仍然不清楚，您可能希望将问题作为新问题发布。这是一个问答网站，而不是论坛。\ o /
— e-sushi
67

强制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>
— 蒂姆·麦克纳马拉
source
19
按照Will Dean的建议（很有意义），使用毫米，您可以强制浏览器计算像素的宽度/高度：body {height：420mm; 宽度：297mm; …
— 蒂姆·麦克纳马拉
49
A4实际上是210x297毫米。
— Fouronnes 2011年
8
因此，最后是肖像DINA4：body { height:297mm; width:210mm; margin-left:auto; margin-right:auto; }
— daVe
1
尽管210x297尺寸不错，但现在已经做了很多工作，但不应认为它们绝对适合A4页面。一个很好的测试是直接从Chrome浏览器打印-> PDF并滚动浏览预览页面的缩略图；即使未设置边距，也必须减小全高，以免溢出->导致所有偶数页都为空白。
— cbmtrx
如果我们拥有的动态内容可能长达3-4页或更多，该怎么办？
— jazzbpn
36

A4尺寸为210x297mm

因此，您可以设置HTML页面以使其适合CSS尺寸：

html,body{
    height:297mm;
    width:210mm;
}
— 苏菲
source
如果我们拥有的动态内容可能长达3-4页或更多，该怎么办？
— jazzbpn
24

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

如果要打印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;
}
— 皮尔·阿卜杜勒
source
您确定它正在运作吗？我无法在最新的Firefox和Chrome中重现此内容。
— Dan7
是的，主要是我正在为chrome进行开发...与我合作得很好。
— Pir Abdul
3
我无法@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 x使用@page，那么它的工作原理，但不是一个页面特定的选择。
— 罗布W
对于那些不习惯将CSS放入文档中的人（在撰写本文时本人而言），您可以将此代码放入<style> </ style>标记中，然后调用div（例如，<div class = page> Stuff </ div > <div class = page>更多内容</ div>），其中“内容”和“更多内容”是要包含在单个页面中的内容。
— mkingsbu
16

我已经使用HTML生成了可以在实际纸张上以实际尺寸正确打印的报告。

如果您小心地将mm用作CSS文件中的单位，则应该可以，至少对于单页而言。但是，人们可以通过在浏览器中更改打印缩放来搞砸您。

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

— 威尔·迪恩
source
14

在Google搜索后，我看到了此解决方案，搜索了“ A4 CSS页面模板”（codepen.io）。使用<page>标签在浏览器中显示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）。

— 卡斯努克
source
将此示例与FF 53.0.3一起使用，然后将两个横向页面并排放置是不起作用的。在常规视图中看起来不错，但是在选择“打印预览”时，它将扩展为3页。
— lofihelsinki
并不是要把box-shadow: none;
— 老牛
它对我
— 有用
如果我们拥有的动态内容可能长达3-4页或更多，该怎么办？
— jazzbpn
11 
<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;
}
— 雅各布
source
10

PPI和DPI对文档在浏览器中的打印方式完全没有影响。打印机不接收有关屏幕点距或图像DPI的信息。如果要打印图像，则它们的打印尺寸将与它们在屏幕上的显示方式成比例。浏览器的打印处理器会将图像的DPI从相当低的72dpi提升到文档其余部分的DPI。假设图片显示为半页宽，然后物理上为大约4英寸宽。图片的像素宽度约为300像素，才能在浏览器中正确显示。到以标称300DPI打印时，处理器已添加了像素并且图片将增长到1200px左右，在300 DPI下为4“。

当涉及到矢量或非像素元素（例如文本）时，打印机从驱动程序中选择与屏幕点距或浏览器宽度等无关的DPI。如果浏览器为3000px宽，则打印处理器将适当包装文本。

这使创建打印显示变得很困难：每个浏览器和打印机都会以自己的方式解释文本大小（pt，em，px）和间距。根据您使用的打印机，浏览器甚至操作系统，您每页将获得不同数量的行和字符。因此，即使您使用浏览器和打印机在计算机上进行测试并弄清楚可以在640x900px的框中显示文本，并且可以完美打印，下一个尝试打印的人也可能会以不同的方式进行打印。确实没有办法强迫每个打印机和浏览器每次都使它们相同。

忘了像素，而忘了DPI，您唯一可以使用像素的方法是设置表格宽度，该表格宽度模拟打印机上可打印区域的宽度。在那种情况下，我发现640px的宽度接近。

— 昆汀·汉弗莱斯（Quintin Humphreys）
source
阅读许多页面，他们都建议增加DPI将在打印时缩小尺寸（3000px / 300dpi = 10英寸）。但是，从我的Chrome浏览器进行打印时，600 DPI和1200 DPI导致纸张尺寸完全相同。直到我读到这篇文章时，我真的很困惑！
— 王胜
8

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

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

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

— 伊夫·兰格（Yves Lange）
source
6

从技术上讲，您可以，但是要使所有浏览器完全按照屏幕上的显示打印出页面，需要大量的工作。同样，大多数浏览器在打印输出上强制使用URL，打印日期和页码，但这并非总是如此。这不能更改或禁用。

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

— Prutswonder
source
5

自1998年以来，我已经在商业报告中使用680像素来打印在A4页面上。700像素可能无法正确显示，具体取决于页边距的大小。现代浏览器可以缩小页面以适合打印机上的页面，但是如果使用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/

— lynx_74
source
整页的高度（以px为单位）是多少？
— khaverim
3

完全有可能将布局设置为假设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打印。这是否值得花时间进行投资是另一个问题。

— FK82
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.