[每日一学] HTML打印准考证用JS在html页面实现打印功能
作者:CC下载站 日期:2020-08-16 00:00:00 浏览:62 分类:涨姿势
用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="确定打印"/>
猜你还喜欢
- 06-29 [涨姿势] 鱼丸批量化生产流程,什么是鱼丸加工流水线?都有哪些设备组成?
- 06-29 [涨姿势] 食为先培训的陷阱和套路?凉菜不是你想卖就能卖?
- 06-29 [涨姿势] 开面馆不是梦,但也不是人人都能驾驭
- 05-13 [摄影] 让手机秒变单反的手机拍摄好物
- 05-11 [摄影] 想挣钱的摄影师建议收藏!
- 05-11 [美食] 选址秘籍:从摆摊到开小店,大数据地图助你找到理想店铺位置
- 05-04 [知识分享] 「科普」不知道电影资源那么长一大串名字是什么意思?看完这个你就明白了!
- 04-30 [摄影] 玩转手机摄影 | 滤镜手机支架
- 04-30 [经验] 摆地摊的八大禁忌
- 04-27 [绘画] 油画棒原创作品【绽放】图文教程来咯~
- 04-17 [涨姿势] 餐饮管理故事:对不起,我订错了雅间,怎么办?(附解决方案)
- 03-29 [摄影课堂] 电光火石间的决定
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[电视剧] 芈月传 【全集81集全】【未删减版】【国语中字】【2015】【HD720P】【75G】
[电视剧] 封神榜 梁丽版 (1989) 共5集 480P国语无字 最贴近原著的一版【0.98 G】
[影视] 【雪山飞孤4个版本】【1985、1991、1999、2007】【1080P、720P】【中文字幕】【167.1G】
[资料] 24秋初中改版教材全集(全版本)[PDF]
[电影] 高分国剧《康熙王朝》(2001)4K 2160P 国语中字 全46集 78.2G
[动画] 迪士尼系列动画139部 国英双语音轨 【蓝光珍藏版440GB】
[电影] 莫妮卡贝鲁奇为艺术献身电影大合集 1080P超清 双语字幕
[电影] DC电影宇宙系列合集18部 4K 高码率 内嵌中英字幕 273G
[音乐] 【坤曲/4坤时】鸡你太美全网最全,385首小黑子战歌,黄昏见证虔诚的信徒,巅峰诞生虚伪的拥护!
[音乐] 用餐背景音乐大合集 [MP3/flac]
[书籍] 彭子益医书合集 [PDF/DOC]
[游戏] 《黑神话悟空》免安装学习版【全dlc整合完整版】+Steam游戏解锁+游戏修改工具!
[动画] 《名侦探柯南》名侦探柯南百万美元的五菱星 [TC] [MP4]
[电视剧集] [BT下载][黑暗城市- 清扫魔 Dark City: The Cleaner 第一季][全06集][英语无字][MKV][720P/1080P][WEB-RAW]
[涨点姿势] 男性性技宝典:14招实战驭女术——爱抚、按摩、催情、姿势、高潮全攻略
[动画] 2002《火影忍者》720集全【4K典藏版】+11部剧场版+OVA+漫画 内嵌简日字幕
[剧集] 《斯巴达克斯》1-4季合集 无删减版 1080P 内嵌简英特效字幕
[CG剧情] 《黑神话:悟空》158分钟CG完整剧情合集 4K120帧最高画质
[短剧] 被下架·禁播的羞羞短剧·午夜短剧合集
[游戏] 黑神话悟空离线完整版+修改器
[影视] 美国内战 4K蓝光原盘下载+高清MKV版/内战/帝国浩劫:美国内战(台)/美帝崩裂(港) 2024 Civil War 63.86G
[影视] 一命 3D 蓝光高清MKV版/切腹 / 切腹:武士之死 / Hara-Kiri: Death of a Samurai / Ichimei 2011 一命 13.6G
[影视] 爱情我你他 蓝光原盘下载+高清MKV版/你、我、他她他 2005 Me and You and Everyone We Know 23.2G
[影视] 穿越美国 蓝光原盘下载+高清MKV版/窈窕老爸 / 寻找他妈…的故事 2005 Transamerica 20.8G
[电影] 《黄飞鸿》全系列合集
[Android] 开罗游戏 ▎像素风格的模拟经营的游戏厂商安卓游戏大合集
[游戏合集] 要战便战 v0.9.107 免安装绿色中文版
[书籍] 彭子益医书合集 [PDF/DOC]
[资源] 精整2023年知识星球付费文合集136篇【PDF格式】
[系统]【黑果小兵】macOS Big Sur 11.0.1 20B50 正式版 with Clover 5126 黑苹果系统镜像下载
- 最新评论
-
怎么没有后续闲仙麟 评论于:11-03 怎么没后续闲仙麟 评论于:11-03 有靳东!嘻嘻奥古斯都.凯撒 评论于:10-28 流星花园是F4处女作也是4人集体搭配的唯一一部!奥古斯都.凯撒 评论于:10-28 找了好久的资源,终于在这里找到了。感谢本站的资源和分享。谢谢AAAAA 评论于:10-26 找了好久的资源,终于在这里找到了。感谢本站的资源和分享。谢谢password63 评论于:10-26 找了好久的资源,终于在这里找齐了!!!!blog001 评论于:10-21 找了好久的资源,终于在这里找齐了!!!!blog001 评论于:10-21 找了好久的资源,终于在这里找到了。感谢本站的资源和分享。谢谢WillKwok 评论于:10-09 感谢分享1234123 评论于:10-07
- 热门tag