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用於非打印用戶代理的分頁打印

回答

相關問題