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

是否有可能使一个HTML页面的行为，例如，像一个a4大小的页面在MS Word?

实际上，我希望能够在浏览器中显示HTML页面，并以A4大小页面的尺寸概述内容。

为了简单起见，我假设HTML页面只包含文本(没有图像等)，例如，不会有<br>标记。

另外，当HTML页面被打印出来时，它将显示为a4大小的纸质页面。

当前回答

很久以前，在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的网站。

Now, you'll want to make the web display look a bit different and adapt the whole design to fit most browsers too (including the old, pre 2005 ones). For that, you'll have to create a web CSS file or override some parts of your print CSS. When creating CSS for web display, remember that a browser can have ANY size (think: “mobile” up to “big-screen TVs”). Meaning: for the web CSS your page-width and image-width is best set using a variable width (%) to support as many display devices and web-browsing clients as possible.

编辑(26-02-2015)

今天，我碰巧在SmashingMagazine上看到了另一篇最近的文章，这篇文章也探讨了如何使用HTML和CSS进行打印设计……

编辑(30-10-2018)

这引起了我的注意，因为它的大小不是有效的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(毫米)来确定大小，因为这样可以避免根据您使用的客户机而产生的渲染故障。

2014-02-15 08:24:57

其他回答

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

2010-07-27 07:44:48

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

The tricky part is with printing A4. Javascript for example only supports printing pages rudimentarily with the window.print method. As @Prutswonder suggested creating a PDF from the webpage probably is the most sophisticated way of doing this (other than supplying PDF documentation in the first place). However, this is not as trivial as one might think. Here's a link that has a description of an all open source Java class to create PDFs from HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

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

2010-07-27 08:21:50

A4尺寸为210x297mm

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

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

2014-03-01 12:49:09

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

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

2010-07-27 07:40:45

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

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

2013-01-31 08:28:18

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

推荐文章

最新文章

标签