打印网页的一部分无法使用 css 更改



我想打印页面的一部分并使用以下方法进行操作。它打印页面的该部分,但不打印CSS效果

<body>
  <h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>
  <b>Div 1:</b> <a href="javascript:printDiv('printthis')">Print</a><br>
  <div id="printthis" class="printthis">
    <div id="div1" class="div1">This is the div1's print output</div>
    <div id="divx2" class="div2">This is the div2's print output</div>
    <div id="divx3" class="div3">This is the div3's print output</div>
  </div>

  <br><br>
  <b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br>
  <div id="div2">This is the div2's print output</div>
  <br><br>
  <b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br>
  <div id="div3">This is the div3's print output</div>
  <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
</body>

我更改了我在网络上找到的上述示例,以便它可以使用打印 css。

由于某种原因,当我打印时它没有实现 css

https://codepen.io/anon/pen/QOGdXv

当前打印输出不反映事件字体大小或其他属性,它只显示三行。

This is the div1's print output
This is the div2's print output
This is the div3's print output

看看这个:

https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/#force-background-images-and-colors

你可能需要这个 CSS:

-webkit-print-color-adjust: exact;
        print-color-adjust: exact;

编辑:

在你的javascript中,你没有使用你提供的css,而是引用了一个非现有的css文件。我缩小了您的样式并将其添加为printDivCSS变量。

我更新了你的代码笔:https://codepen.io/anon/pen/LObyqO

这行得通。我希望这可以帮助您理解问题。

最新更新