基于jQuery实现网页打印功能

直接上代码

！DOCTYPE html head meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' title index/title/head body div style=' text-align : center；页边距-顶部： 30px ' div id='打印区域' div.文本打印区域./div.文本打印区域./div.文本打印区域./div.文本打印区域./div.文本打印区域./div /div br输入id='btnPrint '类型='按钮'值='打印文本区域/input input id=' BtNprintFull ' type=' button ' value='全屏打印/input/div/body脚本src=' http : js/jquery-2。1 .4 .js '/script script src=' http : js/jquery .打印区域。量滴js '/script script $(“# BTN打印”).单击(函数(){ $('#printArea ')).打印区域()；});$('#btnPrintFull ').单击(function(){ $(“body”)).打印区域()；});/script/html代码jquery .PrintArea.min.js:

（函数(c){函数g(){ var b=' head title ' d . pop title/' title '；(c)文件)。查找('链接')。filter(function(){return '样式表==c(这个).attr('rel ').toLowerCase()}).过滤器(函数(){var a=c(this)).attr('媒体');返回void 0==a？1:“”==a . tolowercase()| |“print”==a . tolowercase()}).每个（函数(){b='link type='text/css' rel='样式表这个.attr(' href ')' ' ' })；返回b='/head ' }函数h(b){ return ' body div class=' c(b)} .attr('class') ''' c(b).html()'/div/body ' }函数k(b){c('输入，选择，文本区域'，b).每个（函数(){var a=c(this)).attr(' type ')；单选==a|| '复选框==a？(c)这个)。是(' :not(:checked)')？this.removeAttribute('选中):this.setAttribute('选中',0):'text'==a？this.setAttribute('value '，c(this).val()): "选择多个"==a|| "选择一个“==一个？(c)这个)。查找('选项')。每个（函数(){c(this)).是(' :not(:selected)')？this.removeAttribute('选定):this.setAttribute('选定',0)}):“文本区域”==a(a=c(this).attr('value ')，c.browser.mozilla？第一个孩子？这个。第一个孩子。文本内容=a : this。文本内容=a : this。innerhtml=a)})；返回b }函数l(){var b=d.id，a；请尝试{ a=文档。创建元素(' iframe ')、document.body.appendChild(a)、c(a).attr({ style : ' border :0；位置：绝对；宽度：0 pxheight :0 pxleft :0 px ' top :0 px '，id:b，src:''})，a.doc=null，a.doc=a.contentDocument？内容文档： a .内容窗口？内容窗口。文档： a .文档}捕获(e){抛出e ' .此浏览器可能不支持iframes .}if(null==a.doc)抛出"找不到文档";返回a }函数m(){ var b；b='location=no，statusbar=no，directories=no，menubar=no，titlebar=no，toolbar=no，dependent=no，width=595px，height=842px，top=0，left=0，toolbar=no，scrollbars=no '('，resizable=yes，screenX=' d.popX '，screenY=' d . popy ' ')；b=window.open('，' _blank '，b)；b . doc=b . document返回b}var f=0，n={mode:'iframe '，popHt:500，popWd:400，popX:200，pop :200，popTitle: ' '，popClose:1}，d={ }；c . fn打印区域=函数(b){c.extend(d，n，b)；f；c('[id^=printArea_]').移除();b=k(c(this))；d . id=' printArea _ fvar a，e；开关(d . mode){ case ' iframe ' : e=new l；a=e.doce=e.contentWindow | | e打破；case'popup':e=new m，a=e . doc } a . open()；a.write(('iframe！=d.moded.strict？DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 '(0==d . strict？trans station ' : ' ')'//EN ' ' http://www .w3。org/TR/html 4/'(0==d . strict？宽松的":"严格的")"。dtd ' ' : ' ')' html ' g()(h(b)'/html ')；a .关闭()；e . focus()；e .打印()；弹出'==d . moded。波普克洛斯。close()} })(jQuery)；二、效果图

打印文本区域：

全屏打印：

还有一些高手提出的window.print()方法也是可以滴，在这就不一一介绍了，希望大家认真研究网页打印功能的实现方法，小编和大家共同进步。