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

时间：2010-07-27 07:26:37

标签： html css printing

是否可以制作HTML页面，例如，像MS Word中的A4大小的页面？

基本上，我希望能够在浏览器中显示HTML页面，并在A4尺寸页面的尺寸中勾勒出内容。

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

此外，打印HTML页面时，它将显示为A4大小的纸页。

15 个答案:

答案 0 :(得分：265)

在很久以前，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。大多数现代浏览器（＆gt; 2005）支持缩放，并且已经能够基于打印CSS显示网站。

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

编辑（2015年2月26日）

今天，我偶然发现了另一个更近期的article at 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（毫米）进行大小调整，因为这可以避免根据您使用的客户端出现可能出现的故障。

答案 1 :(得分：62)

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

答案 2 :(得分：31)

A4尺寸 210x297mm

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

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

答案 3 :(得分：20)

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

如果要打印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;
}

答案 4 :(得分：16)

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

如果您在CSS文件中小心使用mm作为单位，那么您应该没问题，至少对于单页而言。但是，人们可以通过改变浏览器中的打印缩放来搞砸你。

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

答案 5 :(得分：12)

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

答案 6 :(得分：10)

PPI和DPI对文档从浏览器打印的方式完全没有影响。如果您打印的图像打印的图像尺寸与屏幕上显示的大小相似，则打印机不会获取有关屏幕点距或图像的DPI等信息。浏览器的打印处理器会将图像的DPI从72dpi等较低的值增加到文档其余部分的DPI。假设图像显示为半页宽，则其物理宽度约为4英寸。图像的像素宽度约为300像素，可在浏览器中正确显示。当它以标称300DPI打印时，处理器已添加像素并且图像将增长到大约1200px，300 DPI是4“。

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

这是创建打印显示的难点：每个浏览器和打印机都会以自己的方式解释文本大小（pt，em，px）和间距。根据您使用的打印机，浏览器甚至OS，您将获得每页不同数量的行和字符。因此，即使您使用浏览器和打印机在计算机上进行测试，并且发现可以在640x900px的盒子中显示文本并且打印完美，下一个尝试打印的人可能会以不同的方式打印。实际上没有办法强制每台打印机和浏览器每次都让它相同。

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

答案 7 :(得分：10)

寻找类似的问题我发现了这个问题 - 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”）
  • 600 dpi （打印）= 4960 X 7016像素

答案 8 :(得分：8)

我知道这个主题很老，但我想分享一下我对这个主题的经验。实际上，我正在搜索一个可以帮助我完成日常报告的模块。我正在用HTML + CSS（而不是Word，Latex，OO，......）编写一些文档和一些报告。目标是将它们打印在A4纸上与朋友分享，...我决定有一个小的有趣的编码会话来实现一个简单的lib，可以处理“页面”，页码，摘要，标题，页脚，....最后，我做了~~ 2h，我知道这不是最好的工具，但它几乎可以达到我的目的。您可以在我的回购中查看此项目，并毫不犹豫地分享您的想法。它可能不是你在100％搜索的东西，但我认为这个模块可以帮助你。

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

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

答案 9 :(得分：8)

我在谷歌搜索后看到了这个解决方案，搜索“A4 CSS页面模板”（codepen.io）。它使用＆lt; page＆gt;在浏览器中显示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-library。适用于当前浏览器（IE，FF，Chrome）。

答案 10 :(得分：6)

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

相反，我建议根据屏幕上的内容创建PDF并提供PDF以供下载和/或打印。虽然付费most available PDF libraries，但有一些free alternatives可用于创建基本PDF。

答案 11 :(得分：5)

自1998年以来，我在商业报告中使用 680px 打印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/

答案 12 :(得分：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。是否值得花时间投资是另一个问题。

答案 13 :(得分：2)

许多方法：

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


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

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

答案 14 :(得分：0)

<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>
相关问题
最新问题