[每日一学] HTML打印准考证用JS在html页面实现打印功能
作者:CC下载站 日期:2020-08-16 00:00:00 浏览:47 分类:涨姿势
用JS在html页面实现打印功能
做项目时,有在网页实现全局和局部打印的需求,百度许久,现总结如下:
打印方式一:
1.首先在head里面加入下面一段js代码:
<scriptlanguage="javascript"> functionpreview(fang) { if(fang<10){ bdhtml=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="<!--startprint"+fang+"-->";//设置打印开始区域 eprnstr="<!--endprint"+fang+"-->";//设置打印结束区域 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18);//从开始代码向后取html prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html window.document.body.innerHTML=prnhtml; window.print(); window.document.body.innerHTML=bdhtml; }else{ window.print(); } } </script>
2.然后在所需要打印的代码,用和包围着,如下:
<!--startprint1--> <!--打印内容开始--> <divid=wdf> ... </div> <!--打印内容结束--> <!--endprint1-->
3.最后加上一个打印的按钮
<inputtype='button'name='button_export'title='打印1'onclick=preview(1)value='打印1'>
打印方式二:
1.javascript中方法为:
<javascript> functiondayin(){ varuserAgent=navigator.userAgent.toLowerCase();//取得浏览器的userAgent字符串 if(userAgent.indexOf("trident")>-1){ alert("请使用google或者360浏览器打印"); returnfalse; }elseif(userAgent.indexOf('msie')>-1){ varonlyChoseAlert=simpleAlert({ "content":"请使用Google或者360浏览器打印", "buttons":{ "确定":function(){ onlyChoseAlert.close(); } } }) alert("请使用google或者360浏览器打印"); returnfalse; }else{//其它浏览器使用lodop varoldstr=document.body.innerHTML; varheadstr="<html><head><title></title></head><body>"; varfootstr="</body>"; //执行隐藏打印区域不需要打印的内容 document.getElementById("otherpho").style.display="none"; //此处id换为你自己的id varprintData=document.getElementById("printdivaa").innerHTML;//获得div里的所有html数据 document.body.innerHTML=headstr+printData+footstr; window.print(); //打印结束后,放开隐藏内容 document.getElementById("otherpho").style.display="block"; document.body.innerHTML=oldstr; } } </javascript>
2.页面内容如下:
... <!--打印内容开始--> <divid='printdivaa'> ... </div> <!--打印内容结束--> ...
3.页面中放置一个打印按钮:
<buttontype="button"class="btn_search"onclick="dayin()">打印</button>
打印方式三(此方式会重新打开一个浏览器窗口):
1.javascript中方法为:
//打印操作 functionprint(){ varuserAgent=navigator.userAgent.toLowerCase();//取得浏览器的userAgent字符串 if(userAgent.indexOf("trident")>-1){ alert("请使用google或者360浏览器打印"); returnfalse; }elseif(userAgent.indexOf('msie')>-1){ varonlyChoseAlert=simpleAlert({ "content":"请使用Google或者360浏览器打印", "buttons":{ "确定":function(){ onlyChoseAlert.close(); } } }) alert("请使用google或者360浏览器打印"); returnfalse; }else{//其它浏览器使用lodop varoldstr=document.body.innerHTML; varheadstr="<html><head><title></title></head><body>"; varfootstr="</body></html>"; //执行隐藏打印区域不需要打印的内容 document.getElementById("otherpho").style.display="none"; varprintData=document.getElementById("studentPhoTable").innerHTML;//获得div里的所有html数据 varwind=window.open("","newwin", "toolbar=no,scrollbars=yes,menubar=no"); wind.document.body.innerHTML=headstr+printData+footstr; wind.print(); //打印结束后,放开隐藏内容 document.getElementById("otherpho").style.display="block"; wind.close(); window.document.body.innerHTML=oldstr; } } </script>
2.页面内容如下:
... <!--打印内容开始--> <divid='studentPhoTable'> ... </div> <!--打印内容结束--> ...
3.页面中放置一个打印按钮:
<inputtype="button"onclick="print()"value="确定打印"/>
猜你还喜欢
- 03-29 [摄影课堂] 电光火石间的决定
- 03-29 [摄影相关] UV镜不要随便将就
- 03-29 [摄影技巧] 抗光害滤镜 | 还原城市最美夜景 城市夜空的色彩救星!
- 03-29 [设计] 无边泳池是怎么设计的?以及它的原理介绍
- 03-29 [摄影] 我们应该怎么去看待摄影的能力?
- 03-27 [涨姿势] 爆冷的最强事业编,活少钱多,一年只有5个月在上班…
- 03-27 [涨姿势] 70年代中国打飞机教程:姿势全面内容详细!
- 03-25 [摄影] 使用除雾带后镜头起雾结霜一样能驰骋沙场
- 03-22 [摄影] 郁金香花朵怎么拍好看 注意这几点就可以了 花卉摄影技巧教程
- 03-06 [关于AI] 天天用AI还不知道AI是怎么反馈的?一文了解生成模型常见损失函数Python代码实现+计算原理解析
- 02-01 [AI绘图] “比较详细”的免费绘制爱好图的教程,我所体验到的开源中最佳效果
- 01-04 [涨姿势] 选择葡萄酒做为礼物的注意事项
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[Android] 火星搜题APP v1.2.24
[图像处理] Affinity Photo_v2.4.2.2371 x64 中文破解版
[资料] AI行业最新资料大全(391份)
[书籍] 面点新手必备的第一本书.PDF
[教程] 超强的视力恢复训练,看完眼睛舒服多了
[书籍] 大连图书馆藏孤稀本明清小说丛刊PDF
[游戏娱乐] 《女巫》Build.13974401中文版
[游戏娱乐] 《吞噬DEVOUR》v4.3.6联机版
[游戏娱乐] 《装甲核心6:境界天火》v1.06.1联机版
[书籍] 【私人珍藏精品好书A-100部】
[资料] [大学期末救急课] 猴博士+高斯课堂+斐多课堂,全集视频合集
[云资源] 价值2万元的老男孩Python教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[云资源] 花了一千多元买的私人健身教程
[下载工具] Internet Download Manager 6.42.7 (IDM)
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[即时通讯] 腾讯QQ PC版9.7.22.29315去广告绿色纯净版
[开发环境] PhpStorm2023中文激活版v2023.3.3 正式版
[资料] 3000 套电影电视剧 LOGO 宣传片常用音效合集包
[图像制作] Adobe Illustrator 2024 v28.1.0.141 破解版
[云资源] 价值2万元的老男孩Python教程
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[云资源] 花了一千多元买的私人健身教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集
[剧集] 繁花 (2023)[全30集][打包]
[影视] 三大队 WEB-DL版下载/Endless Journey/请转告局长,三大队任务完成了 2023 三大队 6.7G
[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】
[安卓软件] OfficeSuite中文版APP v14.2.50872.0破解版
[影视] 涉过愤怒的海 WEB-DL版下载/怒海 / Across the Furious Sea 2023 涉过愤怒的海 26.3G
- 最新评论
-
无法解压啊,客服能不能给个解压教程ravengrey 评论于:04-10 谢谢支持!!CC下载站 评论于:03-26 很棒的资源,感谢分享云体风身 评论于:03-26 感谢分享,好东西云体风身 评论于:03-26 谢谢支持!CC下载站 评论于:03-14 央视精品,感谢付出提供。qwer9009 评论于:03-14 谢谢支持!!!CC下载站 评论于:03-13 谢谢分享!Ypc9182 评论于:03-12 谢谢支持!!CC下载站 评论于:03-11 感谢本网站收集和提供这么多的资料,谢谢!Ypc9182 评论于:03-10
- 热门tag