Checkmark没有为javascript打印

Question

你好，有人能告诉我为什么我的检查点没有打印吗?我想Javascript代码的第3行是造成问题的。请帮帮忙。我对Javascript不太了解。

<form role="form" class="form-horizontal bucket-form" id="printMe" method="get" >
 <div class="form-group">
  <label>Old </label>
  <input type="checkbox"><span class="checkbox-material"></span>
  <label>New </label>
  <input type="checkbox"><span class="checkbox-material"></span>
 </div>
</form>
<br><br>
<button onclick="printDiv('printMe')">Print only the above div</button>

<script>
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>

检查我这里的代码，https://codepen.io/Nazmulpen/pen/YeoYYE

Answer 1

您可以使用print媒体css来实现这一点。可以向打印预览和打印中要排除的所有元素分配类(例如notToPrint )。然后，使用print媒体css，您可以隐藏它们，并且您只获得希望打印的元素。

​

function printDiv(){
	window.print();
}

@media print
{
.notToPrint { visibility: hidden; }
#printMe { visibility: visible; }
}

<form role="form" class="form-horizontal bucket-form" id="printMe" method="get" >
<div class="form-group">
  <label>Old </label>
  <input type="checkbox"><span class="checkbox-material"></span>
  <label>New </label>
  <input type="checkbox"><span class="checkbox-material"></span>
</div>
</form>
<br><br>
<button onclick="printDiv()">Print only the above div</button>

<div class='notToPrint'>This will not be printed</div>

​

这里还有到科德芬的更新链接