使用jquery.print.js插件打印出现空白内容的解决方法

jquery.print.js插件打印空白内容解决方法

jquery.print.js插件是一款基于jQuery的打印插件，可以很方便的实现文档或者元素的打印，但是在使用过程中，有时候会出现打印出现空白内容的情况，这是由于浏览器对打印的兼容性问题导致的。下面介绍一下：

使用@media print方法

@media print是CSS3中的一个媒体查询，可以将元素在打印的时候进行样式的调整，从而实现打印的内容更加完整。使用@media print方法的步骤如下：

在需要打印的文档或者元素中添加@media print样式，如：

@media print {
	  body {
	    font-size: 12pt;
	  }
	}

使用jquery.print.js插件调用打印，如：

$("#print").print();

根据自己的需求修改@media print的样式，以达到打印的完整性。

使用js控制打印方法

使用js控制打印方法是指使用js来控制打印的内容，从而实现打印的完整性。使用js控制打印方法的步骤如下：

使用js调用打印，如：

window.print();

在打印之前，使用js获取当前文档的所有元素，如：

var elements = document.getElementsByTagName("*");

遍历所有元素，将不需要打印的元素隐藏，如：

for (var i = 0; i < elements.length; i++) {
	  if (elements[i].className.indexOf("no-print") != -1) {
	    elements[i].style.display = "none";
	  }
	}

调用打印，如：

window.print();

打印完成后，再将隐藏的元素显示出来，如：

for (var i = 0; i < elements.length; i++) {
	  if (elements[i].className.indexOf("no-print") != -1) {
	    elements[i].style.display = "block";
	  }
	}

使用上述两种方法，都可以有效的解决jquery.print.js插件打印出现空白内容的问题，从而让打印的内容更加完整。

千锋教育是高品质web前端培训机构，千锋教育拥有大量实力web前端培训讲师，提供优质的web培训课程，web前端培训，欢迎报名千锋教育。