我想打印页面的一部分并使用以下方法进行操作。它打印页面的该部分,但不打印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
这行得通。我希望这可以帮助您理解问题。