前端 JS 调起打印机打印页面

window 对象有一个简单的方法可以直接调起打印机打印整个页面内容

window.print();

但是真正应用的时候肯定需要一个按钮点击打印,这个按钮肯定不需要显示在打印内容中,那如何打印指定部分的内容呢?

这时候我们一定会想到 JS 中的截取内容方法——字符串截取(slice, substr, substring)

Bingo,直接上代码:

<body>
	
	<section> 需要打印的内容 section>
	
	<button onclick="printDOM()">打印 页面button>
body>
function printDOM(){
	// 获取body的全部内容并保存到一个变量中
	var bodyHtml = window.document.body.innerHTML;
	
	// 通过截取字符串的方法获取所需要打印的内容
	var printStart = '';
	var printEnd = '';
	
	var printHtmlStart = bodyHtml.slice(bodyHtml.indexOf(printStart));
	var printHtml = printHtmlStart.slice(0,printHtmlStart.indexOf(printEnd));
	
	// 将截取后打印内容 替换掉 body里的内容
	window.document.body.innerHTML = printHtml;
	
	// 打印操作
	window.print();
	
	// 打印完成之后再恢复body的原始内容
	window.document.body.innerHTML = bodyHtml;
}

前端 JS 调起打印机打印页面_第1张图片
点击打印后会出现上图打印配置

  • 布局:可以选择 横向 / 纵向
  • 纸张尺寸:A0-A5 及其他等类型
  • 边距:默认有边距,也可以选择无或者最小值,自定义
  • 选项:可以选中背景图形,页眉页脚我个人觉得没有必要不需要选中

其他配置项可以自行点击打印查看

我的个人博客有空来坐坐

http://www.wangyanan.online

你可能感兴趣的:(前端,JS,js调起打印机)