Question

我想打印部分页面并使用以下方法来执行此操作。它会打印页面的那一部分，但不会打印出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>

我更改了我在网上找到的上述示例，以便它可以使用print 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

Answer 1

看看这个：

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变量。

我更新了您的codepen：https://codepen.io/anon/pen/LObyqO

这很有效。我希望这可以帮助您理解这个问题。

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

1 个答案: