用于非打印用户代理的分页打印的 HTML 和 CSS答案

【问题标题】：HTML and CSS for Paged Printing from Non-Print User Agents用于非打印用户代理的分页打印的 HTML 和 CSS
【发布时间】：2016-01-21 21:46:23
【问题描述】：

CSS 具有专门支持打印的功能，专为用于打印的用户代理而设计，其中最著名的可能是 Prince。唉，浏览器不是这样的用户代理，Prince 很贵（桌面版 500 美元）。

所以我开始研究一个密切相关的问题：是否可以使用浏览器（Chrome，在我的例子中）的打印功能产生正确分页和格式化的输出，用户代理（浏览器）输出到屏幕，而不是打印机，虽然它能够打印浏览器窗口的内容。（这与打印用户代理不同。）任何尝试过它的人都会发现，Chrome（可能还有其他浏览器）不支持 CSS @page 规则。这意味着没有实用的方法来区分左右页面，但就我而言，这并不重要。

我只需要：

分页输出，并且
精确控制打印页面上的位置。

通常，当您打印浏览器页面时，确切的格式并不重要。想想运输标签、登机牌或会议记录。但是，就我而言，打印页面是关键部分，浏览器呈现只是一个预览。具体来说，我正在尝试为一本照片书准备 PDF 文件，以便上传到 MagCloud，这是一种按需杂志印刷服务（由图书印刷公司 Blurb 拥有）。

（许多应用程序，例如 Lightroom，都有书籍排版功能，但由于与本文无关的原因，我无法使用其中任何一个。）

所以我还要回答的问题是：从浏览器生成精确打印输出的简单方法是什么？

【问题讨论】：

标签： css google-chrome browser printing

【解决方案1】：

我发现，虽然 Chrome 不支持 @page，但它支持 page-break-before 样式。因此，要获得分页打印输出，您所要做的就是这样：

<!doctype html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            position: relative;
            page-break-before: always;
            width: 5.5in;
            height: 8.5in;
        }
        .inner {
            position: relative;
            top: .25in;
            left: .25in;
            width: 5in;
            height: 8in;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div class=page>
        <div class=inner>
            <p>This is page one.
        </div>
    </div>
    <div class=page>
        <div class=inner>
            <p>This is page two.
        </div>
    </div>
</body>
</html>

请注意，我使用的是英寸而不是像素，因此巧妙地避免了打印页面的像素分辨率问题。（它恰好是 96，但我没有使用这个事实，而且在不同的系统上它可能会有所不同。）毫米也可以。

这是它在我的浏览器中的样子：

我发现内置的 Windows 10 PDF 打印驱动程序不准确，生成的页面不反映我在 CSS 中设置的大小。然而，免费的 CutePDF Writer 和 Mac OS X 一样，已经死了。

这是 Acrobat Reader 中的 PDF：

如您所见，它非常完美。您所要做的就是在<div class=inner> 中布置您的内容，然后就可以了。如果您想要整页出血，例如书籍封面照片，请将内容直接放入<div class=page>。

在我的应用程序中，我从 PHP 程序生成了实际的 HTML，但是这个静态 HTML 说明了重要的概念。

【讨论】：