HTML元素不打印

我正在使用 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;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:16px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:28px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:36px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:50px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:56px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:66px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:74px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:82px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:88px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:94px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:100px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:110px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:116px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:124px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:132px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:138px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:146px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:154px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:160px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:168px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:176px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:182px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:190px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:198px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:204px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:212px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:220px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:226px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:234px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:242px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:248px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:256px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:264px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:272px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:280px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:286px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:292px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:300px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:308px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:314px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:324px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:330px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:336px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:344px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:352px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:358px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:368px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:374px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:382px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:390px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:396px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:6px;height:30px;position:absolute;left:406px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:2px;height:30px;position:absolute;left:414px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:4px;height:30px;position:absolute;left:418px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;">&nbsp;</div>
      <div style="background-color:black;width:0px;height:30px;position:absolute;left:422px;top:0px;">&nbsp;</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>

我试着做一个显示：阻止！重要;到条形码容器但它仍然没有打印它.有任何想法吗？

解决方法

默认情况下不打印背景颜色.它们被设置为透明的.

尝试：

Box-shadow: inset 0 0 0 10000px #000; /*Fake Bg*/

或者,用户可以设置：

从浏览器的“页面设置”中选中“打印背景颜色和图像”

您也可以使用：

-webkit-print-color-adjust: exact;

但这仅在Chrome(和其他Webkit浏览器)中受支持.

原文地址：https://www.jb51.cc/html/225321.html