美文网首页
浏览器调用print实现部分打印的两种方法

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

作者: 软践 | 来源:发表于2023-02-02 00:18 被阅读0次

替换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

本文由博客一文多发平台 OpenWrite 发布!

相关文章

  • .net打印pdf文件

    方法一(web):window.print() print()方法是浏览器打印功能的一种程序调用。print方...

  • js客户端打印html并且去掉页眉、页脚

    print()方法用于打印当前窗口的内容,支持部分或者整个网页打印。 调用print()方法所引发的行为就像用户单...

  • js控制打印区域

    调用浏览器打印div.print的内容。

  • 打印jQuery.print.min.js 使用总结

    项目中遇到打印报表的要求,需要只打印报表部分而不是整个页面,一般直接调用系统的方法window.print(),会...

  • 网页局部打印

    打印网页中定义的部分内容的实现方法正常情况下的打印是使用 window.print(); 直接整页打印,但如果需要...

  • vue.js页面打印window.print

    在项目中,涉及到了html内容打印的需求,调用了浏览器的window.print用于打印,涉及到的问题有需打印in...

  • Kotlin学习笔记(一)

    Kotlin每条语句不加; Kotlin中打印直接调用print()与println(), 打印的类型print打...

  • 网页局部打印功能

    思路: 将打印内容写入到iframe中,通过iframe的window对象print()方法实现iframe打印 ...

  • 打印流

    打印流: printStream printWriter:此类实现了printStream中所有的print方法 ...

  • iOS常用调式命令

    po:打印对象,会调用对象 description 方法。是 print-object 的简写expr:可以在调试...

网友评论

      本文标题:浏览器调用print实现部分打印的两种方法

      本文链接:https://www.haomeiwen.com/subject/kqjwhdtx.html