我使用this library生成条形码，我需要打印包含条形码的页面。
当我启动打印对话框时，虽然占用了空间，但我找不到条形码。
$(document).ready(function() {
window.print();
});@media print {
.barcode-container {
display: block !important;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subpage">
<div class="barcode-container">
<div style="font-size:0;position:relative;width:422px;height:30px;">
<div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
</div>
</div>
<p class="bold">ID: 60105</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus volutpat lorem a auctor. In lorem nisi, vulputate vel dapibus eu, tristique non lacus. Proin maximus nulla a imperdiet accumsan. Nullam diam tortor, hendrerit a libero vel, placerat
ullamcorper urna. Vivamus consequat placerat lectus, mattis porttitor felis feugiat non. Quisque non elementum est. Quisque semper tincidunt nunc quis condimentum. Morbi tristique ipsum quis velit accumsan tincidunt. Etiam et imperdiet ex, at posuere
enim. Curabitur vitae lacinia libero.</p>
</div>
我尝试对条形码容器执行display: block !important;但它仍然没有打印出来。有什么想法吗？
答案 0 :(得分：8)
默认情况下不打印背景颜色。它们设置为透明。
尝试：
box-shadow: inset 0 0 0 10000px #000; /*Fake Bg*/
或者，用户可以设置：
从浏览器的“页面设置”
中勾选“打印背景颜色和图像”您也可以使用：
-webkit-print-color-adjust: exact;
但仅在 Chrome （以及其他Webkit浏览器）中支持此功能。
答案 1 :(得分：2)
Chrome css属性＆＃34; -webkit-print-color-adjust：exact;＆＃34;将使它在chrome中正常工作。
$(document).ready(function() {
window.print();
});@media print {
.barcode-container>div{
display: block !important;
-webkit-print-color-adjust: exact;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subpage">
<div class="barcode-container">
<div style="font-size:0;position:relative;width:422px;height:30px;">
<div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
</div>
</div>
<p class="bold">ID: 60105</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus volutpat lorem a auctor. In lorem nisi, vulputate vel dapibus eu, tristique non lacus. Proin maximus nulla a imperdiet accumsan. Nullam diam tortor, hendrerit a libero vel, placerat
ullamcorper urna. Vivamus consequat placerat lectus, mattis porttitor felis feugiat non. Quisque non elementum est. Quisque semper tincidunt nunc quis condimentum. Morbi tristique ipsum quis velit accumsan tincidunt. Etiam et imperdiet ex, at posuere
enim. Curabitur vitae lacinia libero.</p>
</div>
答案 2 :(得分：2)
您可以在 Chrome 上使用-webkit-print-color-adjust: exact;，在 Firefox
color-adjust: exact;
$(document).ready(function() {
window.print();
});@media print {
.barcode-container {
display: block !important;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subpage">
<div class="barcode-container">
<div style="font-size:0;position:relative;width:422px;height:30px;">
<div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;"> </div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;"> </div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;"> </div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
<div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;"> </div>
</div>
</div>
<p class="bold">ID: 60105</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus volutpat lorem a auctor. In lorem nisi, vulputate vel dapibus eu, tristique non lacus. Proin maximus nulla a imperdiet accumsan. Nullam diam tortor, hendrerit a libero vel, placerat
ullamcorper urna. Vivamus consequat placerat lectus, mattis porttitor felis feugiat non. Quisque non elementum est. Quisque semper tincidunt nunc quis condimentum. Morbi tristique ipsum quis velit accumsan tincidunt. Etiam et imperdiet ex, at posuere
enim. Curabitur vitae lacinia libero.</p>
</div>