css - 将网页打印为 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

你的'section-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