如果直接调用
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 代码逻辑
- 从后台获取待打印的页面 html
- 将该部分 HTML append 到 body
- window.print();
- remove 该部分 HTML
参考
关于作者 🌱
我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式
