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

问题描述

是否可以使 HTML 页面行为，例如像 MS Word 中的 A4 尺寸的页面？

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

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

此外，当 HTML 页面打印时，它将作为 A4 尺寸的纸页出来。

最佳解决方案

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

以下是该文章的摘录：

CSS2 has a notion of paged media (think sheets of paper), as opposed to continuous media (think scrollbars). Style sheets can set the size of pages and their margins. Page templates can be given names and elements can state which named page they want to be printed on. Also, elements in the source document can force page breaks. Here is a snippet from the style sheet we used:
@page {    size: 7in 9.25in;    margin: 27mm 16mm 27mm 16mm; } 
Having a US-based publisher, we were given the page size in inches. We, being Europeans, continued with metric measurements. CSS accepts both.

After setting the up the page size and margin, we needed to make sure there are page breaks in the right places. The following excerpt shows how page breaks are generated after chapters and appendices:
div.chapter, div.appendix {     page-break-after: always; } 
Also, we used CSS2 to declare named pages:
div.titlepage {   page: blank; } 
That is, the title page is to be printed on pages with the name 「blank.」 CSS2 described the concept of named pages, but their value only becomes apparent when headers and footers are available.

无论如何…

由于您要打印 A4，当然需要不同的尺寸：

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm; /* change the margins as you want them to be. */
}

该文章涉及到设置 page-breaks 等等，所以你可能想要完全阅读。

在你的情况下，诀窍是先创建打印 CSS 。大多数现代浏览器 (> 2005) 支持缩放，并且已经能够基于打印 CSS 显示网站。

现在，您将要使网页显示看起来有所不同，并使整个设计适应大多数浏览器 (包括 2005 年的旧版本) 。为此，您必须创建一个 Web CSS 文件或覆盖打印 CSS 的某些部分。当创建网页显示的 CSS 时，请记住浏览器可以有任何大小 (想想：「mobile」最多为「big-screen TV」) 。含义：对于 Web CSS，您的 page-width 和 image-width 最好使用可变宽度 (％) 设置，以尽可能多地支持显示设备和 web-browsing 客户端。

编辑 (26-02-2015)

今天，我碰巧碰到另一个，更近的 article at SmashingMagazine，它也深入到 HTML 和 CSS 打印设计，以防万一你可以使用 yet-another-tutorial 。

次佳解决方案

强制浏览器显示与 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>

第三种解决方案

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

如果您正在打印 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, span, td, a {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;

  }

第四种方案

我使用 HTML 来生成实际纸张上真实尺寸的 print-out 的报告。

如果您仔细使用 mm 作为您的单位在 CSS 文件中，您应该可以，至少对于单页。不过，人们可以通过在浏览器中更改打印缩放来解决问题。

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

第五种方案

A4 尺寸为 210x297mm

所以你可以设置 HTML 页面适合这些大小与 CSS：

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

第六种方案

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

第七种方案

寻找类似的问题我发现这个 – http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 是一种文档格式，作为要依赖于图像分辨率的屏幕图像，例如 A4 文档的大小可以调整为：

72 dpi(网络)= 595 X 842 像素
300 dpi(打印)= 2480 X 3508 像素 (这是”A4″，据我所知，即「210mm X 297mm @ 300 dpi」)
600 dpi(打印)= 4960 X 7016 像素

第八种方案

PPI 和 DPI 对于如何从浏览器打印文档绝对没有什么不同。如果要打印的图像的大小与屏幕上的显示比例相似，则打印机不会获取有关屏幕点距或图像 DPI 的信息。浏览器的打印处理器会将图像的 DPI 从 72dpi 的较低像素增加到文档其余部分的 DPI 。说，图像显示为半页宽，物理距离约为 4「，图像的像素宽度约为 300 像素，以便在浏览器中正确显示，当它以标称 300DPI 打印时，处理器已添加像素并且图像将增长到大约 1200 像素，在 300 DPI 是 4「。

当涉及到矢量或非像素的元素 (如文本) 时，如果浏览器的宽度为 3000 像素，打印机将根据需要将文本包装，打印机将从驱动程序中选择不同于屏幕点距或浏览器宽度等的 DPI 。

对于创建打印显示有什么困难：每个浏览器和打印机将以自己的方式解释文本大小 (pt，em，px) 和间距。取决于您使用的打印机，浏览器甚至操作系统，每页可以获得不同的行数和字符数量。所以即使您使用浏览器和打印机在计算机上进行测试，并确定您可以在 640×900 像素的框中显示文本，并且完美打印，那么试图打印的下一个人可能会以不同的方式打印出来。实际上没有办法强制每个打印机和浏览器每次得到相同的。

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

第九种方案

从技术上讲，您可以，但是需要大量的工作才能使所有浏览器完全按照显示在屏幕上的方式打印出页面。此外，大多数浏览器强制在 print-out 上打印 URL，打印日期和页面编号，这并不总是需要。这不能改变或禁用。

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

第十种方案

我知道这个话题很旧，但我想分享我关于这个话题的经验。其实我正在搜索一个可以帮助我的日常报告的模块。我在 HTML + CSS(而不是 Word，Latex，OO，…) 中写入一些文档和一些报告。目的是将它们打印在 A4 纸上以与朋友分享… 而不是搜索，我决定进行一个小的有趣的编码会话来实现一个可以处理”pages”，页码，摘要，页眉，页脚的简单的 lib 最后，我在~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~您可以在我的回购站看看这个项目，不要犹豫分享你的想法。这可能不是你在 100％搜索，但我认为这个模块可以帮助你。

基本上我创建一个页面的「width：200mm;」容器高度：290mm(小于 A4) 。然后我用 page-break-after：总是所以浏览器的”print” 选项知道何时拆分页面。

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

参考文献

How to make a HTML Page in A4 paper size page(s)?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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