关于打印

最新推荐文章于 2023-03-27 10:28:41 发布

原创最新推荐文章于 2023-03-27 10:28:41 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#打印 #window.print

1.window.print()

window.print();
// 如果想要打印局部内容
const currentHtml = document.body.innerHTML; //获取当前页面
document.body.innerHTML = document.getElementById('print').innerHTML; //设置当前页面内容为需要打印的内容
window.print(); //开始打印
window.location.reload(); //刷新页面
document.body.innerHTML = currentHtml;// 重设页面

这种直接调用的会有一定的后遗症，那就是如果打印后还有操作流程比如返回首页，倒计时等等，这种功能就会失效，必须重新刷新页面window.location.reload()这种用户体验不是很好

2.使用iframe引入

创建一个打印页面print.html，然后使用iframe引入，此方法不会引起后面的页面失效

<iframe src="print.html" frameborder="0" id="printIframe" name="printIframe"></iframe>
//打印
document.getElementById('printIframe').contentWindow.print();

3.关于打印样式

//打印样式就需要使用媒体查询
@media print {
	@page {
	    margin: 10px; //可以去掉打印的页眉页脚
	    size: A4 portrait; //打印纸张A4纸，纵向打印 横向是landscape
	  }
	//打印页面的样式
}

4.一些打印插件

1.crabbly print.js

引入：<script src='js/print.min.js'></script>
html: <div id="print">这是要打印的内容</div>
js: document.getElementById('btn').onclick = function() {
	printJS('print','html')
}

其他具体的可参考上述链接地址：https://printjs.crabbly.com/#documentation

2.printThis

引入：<script src='js/printThis.js'></script>
html: <div id="print">这是要打印的内容</div>
js:	document.getElementById('btn').onclick = function() {
	$("#print").printThis();
}

还有一些可选参数，具体可参考链接地址： https://jasonday.github.io/printThis/

3.jQuery.print

引入：<script src='./js/jQuery.print.min.js'></script>
html: <div id="print">这是要打印的内容</div>
js:	document.getElementById('btn').onclick = function() {
	$("#print").print();
}

还有一些可选参数，具体可参考链接地址： https://github.com/DoersGuild/jQuery.print

4.PrintArea

引入：<script src='./js/jquery.printarea.js'></script>
html: <div id="print">这是要打印的内容</div>
js:	document.getElementById('btn').onclick = function() {
	$("#print").printArea()();
}