将网页打印为pdf以显示所有css样式

Question

我创建了一个按钮(printerFriendly)，打开一个新的选项卡，其中包含我想要打印的网页部分。3具体章节。

该表应用了css，根据数据使用不同的颜色显示表的某些方面，我希望在打印时显示该颜色。在这个新的选项卡中，我进行了打印预览，我看到页面的各个部分叠在一起。各部分之间没有间隔。我正在研究解决方案，我相信一种方法是将页面打印为pdf。它告诉我将media="print"添加到index.html:

<link rel="stylesheet" href="css/style.css" media="print">

但这扩展了主页面的表的导航和数据选择，看起来很糟糕。

我希望页面打印成pdf格式，我希望每个部分的css颜色样式也能打印出来。

这是我到目前为止应用的css，它可以打印：

@media print {
body *{
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 500;
color: #101010;
background: #f6f5fa;
visibility: hidden;
}
#section-to-print, #section-to-print *{
visibility: visible;
}
#section-to-print {
position:absolute; 
left:0;
top:0;
}
#section-to-print2, #section-to-print2 *{
visibility: visible;
}
#section-to-print2 {
position:absolute; 
left:0;
top:0;
}
/*
#section-to-print3, #section-to-print3 *{
visibility: visible;
}
#section-to-print3 {
position:absolute; 
left:0;
top:0;
}
*/
}

我已经把#section-to-print3注释掉了，因为这是我想要打印的第三个部分，但当我应用这个css时，它是我进行打印预览时唯一显示的部分，其他两个都找不到。

任何提示的帮助都将不胜感激！

Answer 1

您的"secion to print"css规则都说position:absolute;left:0;top:0。因此，该类中的任何文本/内容都将打印在一起。只有最上面的一个才会在屏幕上显示或打印出来。

从这些规则中删除这三条语句。然后项目将按顺序打印。

您可以在每个部分之间放置一个分页符，每个规则中都有一个page-break-before:always。

此页面提供了有关各种打印CSS规则的良好信息：https://www.noupe.com/design/css-perfect-print-stylesheet-98272.html