浏览器调用print实现部分打印的两种方法

最新推荐文章于 2025-03-12 16:51:11 发布

原创最新推荐文章于 2025-03-12 16:51:11 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#默认

本文介绍了如何使用JavaScript来替换页面内容以便打印，以及在打印后恢复原页面，并探讨了在新窗口中进行打印并在打印结束后关闭窗口的方法。通过创建新元素和修改innerHTML属性实现动态打印功能。

替换body的内容为要打印的内容，然后再从新刷新页面

const old = window.document.body.innerHTML //备份原来的页面
window.document.body.innerHTML = ''
window.document.body.appendChild(/* 将你要打印的内容附加到这 */)
window.print() //调用print()函数时，会跳出打印预览的界面，如下的代码被阻塞，关闭预览界面后继续执行
window.document.body.innerHTML = old
window.location.reload() //从新加载旧页面

将打印内容放到新窗口打印，打印结束后关闭新窗口

const newWindow = window.open("打印窗口", "_blank")
const docStr = '<div>test</div>'  //须要打印的内容
newWindow.document.write(docStr)
const styles = document.createElement("style")
styles.setAttribute('type', 'text/css') //media="print"
styles.innerHTML = ''
newWindow.document.getElementsByTagName('head')[0].appendChild(styles)
newWindow.print()
newWindow.close()

详见原文 http://oejia.net/blog/2022/05/30/browser_print.html