打印到 PDF 设置 A4 大小的 CSS

在Web开发中，我们经常需要实现打印功能。而将HTML页面转换为PDF格式可以使打印更加美观，同时更加易于分享和打印。在进行PDF打印时，需要注意设置页面大小，这里我们介绍如何通过CSS设置A4大小的页面。

设置页面大小

在CSS中，我们可以使用@media规则来设置页面打印时的样式。为了设置页面大小，我们需要使用CSS的@page规则。

首先，我们将页面大小设置为A4：

@page {
  size: A4;
}

这里设置了整个页面的大小为A4。如果我们只需要设置内容的大小，可以使用以下代码：

@page {
  size: 210mm 297mm;
}

这里我们将页面宽度设置为210mm，高度设置为297mm，即A4大小。

完整代码示例

下面是一个完整的示例，其中包括了A4页面大小和其他打印样式：

@media print {
  @page {
    size: A4;
    margin: 20mm 15mm; /* 上下20mm，左右15mm的边距 */
  }

  body {
    margin: 0; /* 去掉默认的边距 */
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }

  /* 标题样式 */
  h1 {
    font-size: 24px;
    margin: 20px 0;
  }

  /* 段落样式 */
  p {
    margin: 0 0 10px 0;
  }
}

总结

通过设置@page规则，我们可以轻松地设置页面打印时的大小和样式。在实际开发中，我们还可以根据需要设置其他样式，例如页眉、页脚等。希望这篇文章可以帮助您实现更好的PDF打印效果。