[分享]css3打印pdf

CSS3有一个非常有用的功能，它可以用来控制Web页面在打印时的样式，比如设置页面内容宽度、字体大小、页边距等。这对于需要打印网页内容的用户来说非常方便，可以避免在打印时出现错位等问题。除了控制Web...

CSS3有一个非常有用的功能，它可以用来控制Web页面在打印时的样式，比如设置页面内容宽度、字体大小、页边距等。这对于需要打印网页内容的用户来说非常方便，可以避免在打印时出现错位等问题。

除了控制Web页面的打印样式外，CSS3还可以用来将Web页面导出为PDF文件。这是非常有用的功能，因为PDF文件可以跨平台、跨设备进行浏览，在不同的设备上都可以保持内容的格式和布局。如果你需要在不同设备上阅读同一个文档，那么将其保存为PDF文件是一个不错的选择。

@media print {
  /* 设置页面的页边距 */
  @page {
    margin: 2cm;
  }

  /* 设置页面中间的内容区域宽度 */
  body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
  }
} 

上面的代码用@media print指令来定义Web页面在打印时的样式。它首先通过@page指令来设置页面的页边距，并将左右边距和上下边距都设为2cm。接着，它通过body元素来设置页面中间的内容区域宽度和字体大小等信息。

当你将Web页面导出为PDF文件时，浏览器会自动应用这些样式，并将其转换为PDF文件格式。因此，你可以在不同设备上打印和查看同一个文档，而无需担心其格式和布局问题。