javascript怎么获取本地默认打印机 js调用打印机打印文档

转载

网线小游侠 2024-06-03 16:59:37

文章标签 浏览器打印功能调用 js实现浏览器打印 html 点击事件句柄 文章分类 JavaScript 前端开发

最近做了一个调用浏览器打印的功能，之前没做过，百度了一下，觉得非常简单，现在贴出代码以及需要注意的地方。

$(document).on('click', '.printBtn', function(){
		//创建一个打印窗口 
		var printWindow = window.open("打印窗口","_blank");
		//将明细页面拷贝到新的窗口，这样新的窗口就有了明细页面的样式
		var htmlbox = $("html").html();
		printWindow.document.write(htmlbox);
		//获得要打印的内容
		var printbox = $("#printDiv").html();
		//将要打印的内容替换到新窗口的body中
		printWindow.document.body.innerHTML = printbox;
		//脚本向窗口(不管是本窗口或其他窗口)写完内容后，必须关闭输出流。在延时脚本的最后一个document.write()方法后面，必须确保含有document.close()方法，不这样做就不能显示图像和表单。
		//并且，任何后面调用的document.write()方法只会把内容追加到页面后，而不会清除现有内容来写入新值。
		printWindow.document.close();
		//打印
		//chrome浏览器使用jqprint插件打印时偶尔空白页问题
		//解决方案：有时候页面总是加载不出来，打印出现空白页，可以设置延迟时间来等待页面的渲染，但是渲染时间的长短跟页面的大小有关，是不固定的。所以这里使用事件监听器。
		printWindow.addEventListener('load', function(){
			printWindow.print();
			//关闭窗口
			printWindow.close();
		});
	});

注意之处：
1、获取新页面的内容要用jquery的html()方法，不能用js的innerHTML方法，因为js的innerHTML方法获取的页面内容会失去样式。
2、直接用print()方法时，谷歌浏览器在打印预览的时候会出现空白页。原因是页面渲染还没有完成，就调用了print()方法。刚开始的时候使用setTimeout()方法延迟加载，但是发现不行，因为延迟的时间长短取决于页面的大小。所以这里使用了事件监听器。

事件函数：
element.addEventListener(event, function, useCapture)

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值:true - 事件句柄在捕获阶段执行;false- false- 默认。事件句柄在冒泡阶段执行