Question

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

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

我所需要的只是：

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

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

（许多应用程序，如Lightroom，都有书籍布局功能，但由于与这篇文章没有密切关系的原因，我无法使用其中任何一种。）

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

Answer 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说明了重要的概念。

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

1 个答案: