我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考。
方式一:window.print()
整体打印
<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>
现在就轻松实现了页面的打印,但是这种方式会将整个页面打印,如果想要实现指定区域的打印需要通过下面的设置
局部打印
首先,在html中,通过star和end来标记打印区域
<h1>这块内容不需要打印</h1> <!--startprint--> <div class="content"> 这里是需要打印的内容 ..... </div> <!--endprint--> <h1>这块内容不需要打印</h1>
然后,在点击事件中添加如下代码
function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; eprnstr="<!--endprint-->"; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); window.document.body.innerHTML=prnhtml; window.print(); }
过滤打印区域的内容
例如
<!--startprint--> <div class="content"> <button class="noprint">预览</button> <button class="noprint">打印</button> 这里是需要打印的内容 ..... </div> <!--endprint-->
上面的预览和打印按钮不希望打印,如果要过滤的话可以做下面的样式设置
<style type="text/css"> @media print { .noprint{ display: none; } } </style>
or
<style type="text/css" media="print"> .noprint{ display: none; } </style>
两种写法任选其一
分页打印
使用 window.print() 打印时,如果内容超出会自动分页。但是我们如果需要自定义分页范围,如碰到表格分页打印,可以通过进行如下设置:
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" > </table>
方式二、jqprint()
jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以轻松实现打印网页上的某个区域,这是个亮点。
参考网址:https://www.jb51.net/article/102230.htm
请注意!很多朋友遇到 Cannot read property 'opera' of undefined 错误问题是juqery版本兼容问题
解决方法:加入迁移辅助插件 jquery-migrate-1.0.0.js可解决版本问题
引入
<script language="javascript" src="/UploadFiles/2021-04-02/jquery-1.4.4.min.js">js
<script language="javascript"> function a(){ $("#ddd").jqprint(); } </script>html
<div id="ddd"> <table> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </table> </div> <input type="button" onclick=" a()" value="打印"/>设置模板打印
$("#printContainer").jqprint({ debug: false, //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件) printContainer: true, //表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。 operaSupport: true//表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true });附言
另外还可以使用html 标签<object>引入Webbrowser控件(只兼容IE)或者调用windows底层打印,报安全警告,不建议使用(不支持局部打印)
这里只介绍两种方式,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]