网页上使用 js 调用打印机

如果直接调用

window.print();

会默认打印当前页面。

但是，我想打印指定的页面内容，即，指定的 div 内的内容

stackoverflow 上找到一个解决方案，这段 CSS 的逻辑就是在打印机页面上将其他内容隐藏，只显示需要打印的部分

@media print {
	body * {
		visibility: hidden;
	}

	/* 隐藏 chrome 浏览器下的 header, footer */
	@page { 
		margin: 0; 
	}

	#section-to-print, #section-to-print * {
		visibility: visible;
	}

	#section-to-print {
		position: absolute;
		top: 0;
		margin: 0.5cm;
	}
}

js 代码逻辑

1. 从后台获取待打印的页面 html
   
2. 将该部分 HTML append 到 body
   
3. window.print();
   
4. remove 该部分 HTML
   

参考

• javascript - Print div id printarea only - Stack Overflow

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式