chrome pdf 列印邊距問題處理

需求

将網頁列印成pdf,Chrome 可直接将網頁儲存(列印)為 PDF (無需安裝 Adobe )，或者郵件點選列印，但是式樣跟網頁上顯示的有很大不同。

問題是無法選擇「紙張大小」，Chrome 在儲存為 PDF 檔案時，預設紙張大小是 A4。若布局為縱向，顯示大小為 210mm×297mm ；若布局為橫向，顯示大小為 297mm×210mm。

列印方式

• 位址：列印位址：https://oss.phxg.cn/download/genFileByGotenberg/%E4%BC%98%E5%B1%B1%E7%BE%8E%E5%9C%B0A%E5%8C%BA?url=aHR0cHM6Ly93d3cuYmFpZHUuY29tLw==
• 使用方式：url=後面的位址就是列印的網頁位址，注意點就是：列印的位址需要通過base64加密即可
• 或者直接将完整的路徑複制到浏覽器位址欄或者調用接口都可以

知識科普

需要了解一下DPI ( Dot Per Inch )的名額。Windows 下的網頁列印的預設 DPI 為 96dpi。按照 1 英寸=25.41mm 換算， A4 紙張可實際顯示的像素寬度為 794px×1123px ，即列印網頁的寬度為 794px。

實際列印還會有頁邊距，如果頁邊距為 5mm (窄邊距)，網頁内容最大寬度約 750px ，若頁邊距為 19mm (預設邊距)，網頁内最大元素分辨率約 650px。

基于此，很多網頁在列印時會變形，因為列印時内容容器的寬度隻有 750px 或者 650px ，但現在的網頁内容大多都是基于至少 1000px 以上寬度設計的，這時候浮動容器會錯位、超過寬度的圖檔和表格會顯示不完全。

處理邊距的問題

<style type="text/css" media="print">
/* 設定列印的邊距問題，@page用于修改列印頁的樣式， 僅僅 margin, padding, border 和 background 等列印時需要的屬性可以使用, 其他屬性将直接忽略*/
/* 并且不要用vh、vm機關。給@page設定margin可以在所有列印頁生效。如果想單獨設定第一頁等需要加僞類 */
/*  
:first列印文檔的時候，第一頁的樣式
:left對列印文檔的左側頁樣式
:right列印文檔的所有右頁
*/
@page {
    size: auto;  
    margin: 0;
}
.page_wrapper {
   margin: 0 auto;
   width: 100%; // 移動端使用
   width: 210mm; // pc端使用
   background: rgb(248, 247, 247);
   overflow: hidden;
   border: 1px solid #eee;
}
</style>
           

列印的時候才生效的css樣式

<style token string">"less" scoped>
@media print{
  // 設定列印的時候才會生效的樣式
     .notPrint {
         display: none;
     }
 }
</style>
           

谷歌浏覽器為例

• 實際列印效果使用者完全可以自己設定列印頁面間距
• @page設定margin為0時，預設沒有顯示是否顯示頁眉頁腳選項，邊距設定為自定義時會顯示頁眉頁腳選項

列印效果