JavaScript实现点击按钮直接打印_javascript技巧
程序员文章站
2022-04-12 14:30:23
...
很多网站都有此功能,当浏览到底部时都会有一个打印按钮,点击打印按钮就可以完成打印功能,功能非常不错,人性化,代码非常的简单。
也就是只要调用window.print()函数就可以实现打印当前页面。
但是上面的并不完美,因为有些网页上的很多内容都不需要打印,下面介绍一下如何打印页面中的指定内容。
代码如下:
指定被打印的内容 这是要被打印的内容
欢迎您
特别说明:打印预览需要将代码复制到本机测试,否则会出错。
以上代码实现了打印网页指定内容的效果,下面简单介绍一下实现过程。
一.实现原理:
在js代码中使用document.body.innerHTML =newstr,动态原来body中的内容替换为要打印的内容,在打印过后,在将原来的内容还原,原理就是这么简单,具体可以参阅代码注释。
二.代码注释:
1.function printdiv(printpage){},声明一个控制打印的函数,参数是一个对象,这个对象中的内容将要被打印。
2.var newstr = printpage.innerHTML; ,获取要打印的内容。
3.var oldstr = document.body.innerHTML,原来body中的内容。
4. document.body.innerHTML =newstr,用将要打印的内容替换原来body中的内容。
5.window.print(),开始打印。
6.document.body.innerHTML=oldstr,再将原来body中的内容还原。
三.相关阅读:
1.window.print()函数可以参阅window对象的print()方法一章节。
2.onclick事件可以参阅javascript的onclick事件一章节。
以上内容比较简单,并有单独的代码注释帮助大家学习js实现点击按钮就打印功能,希望本文对大家有所帮助。
推荐阅读
-
javascript 利用Image对象实现的埋点(某处的点击数)统计_javascript技巧
-
防止按钮在短时间内被多次点击的方法_javascript技巧
-
不用ajax实现点击文字即可编辑的方法_javascript技巧
-
JavaScript 弹出窗体点击按钮返回选择数据的实现_javascript技巧
-
JS/jQuery实现默认显示部分文字点击按钮显示全部内容_javascript技巧
-
js 实现打印网页中定义的部分内容的代码_javascript技巧
-
js利用事件的阻止冒泡实现点击空白模态框的隐藏_javascript技巧
-
js 实现打印网页中定义的部分内容的代码_javascript技巧
-
用javascript实现点击链接弹出图片另存为而不是直接打开
-
JavaScript实现点击按钮后变灰避免多次重复提交_javascript技巧