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

CSS具有专门用于支持打印的功能，专门用于用于打印的用户代理，其中最知名的可能是Prince。唉，浏览器不是这样的用户代理，并且王子是昂贵的（桌面版500美元）。HTML和CSS用于非打印用户代理的分页打印

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

所有我需要的是：

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

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

（许多应用程序，如Lightroom中，有书排版功能，但原因并非密切相关这篇文章我无法使用其中任何一个。）

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

来源

2016-01-21 Marc Rochkind

我发现，虽然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然而，就死了，因为是Mac OS X的

这里是在Acrobat Reader PDF格式：

正如你所看到的，它是完美的。您只需在<div class=inner>内部布置您的内容，即可设置。如果您需要整页流血，例如书籍封面照片，请将内容直接放入<div class=page>。

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

来源

2016-01-21 21:46:23

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

回答

相关问题