打印CSS樣式不適用於角度項目

Question

我正在嘗試在我的角度項目中使用CSS創建可打印文檔。 對於運行多個頁面的打印文檔，我需要自動避免在標題中打印日期和標題。 同時，我要確保在打印文檔時留有一定的頁邊距。 為了實現這一點，我正在使用此答案中建議的方法。 但是，我無法應用該樣式。

我的CSS代碼如下所示

@media print {
  @page { 
    size: auto;
    margin: 0; 
  }
  body { 
    margin: 2cm !important;
  }
}

我嘗試將此代碼粘貼到app.component.scss文件和styles.scss文件中。 兩種方法似乎都不起作用。 有什么建議么？

Answer 1

您需要在styles.css文件中放入以下CSS

@media print {
  @page { 
    size: auto;
    margin: 0mm; // added mm
  }
  body { 
    margin: 2cm;
  }
}

而且，如果您需要特定於組件的樣式，也可以將其添加到組件的css文件中：

@media print {
  section {
    color: orange;
  }
}

這是一個Stackblitz示例 。 您也可以嘗試打印此頁面（ https://angular-j4ab2g.stackblitz.io ），您會看到標題中的日期已經消失，我的自定義部分顯示為橙色文本。

編輯

我認為刪除頁腳和頁眉的最佳選擇是取消選中打印設置中的復選框

然后，您無需在@page選擇器上添加0mm邊距，在主體選擇器上添加2cm邊距。