jQuery.print网页内容打印jQuery插件

喜欢ヅ旅行 2022-05-28 03:28 214阅读 0赞

##### 简要教程 #####

jQuery.print是一款简单易容且功能强大的网页内容打印[jQuery插件][jQuery]。该网页打印插件可以打印指定区域的网页元素，可以指定跳过不打印某些元素，还可以打印整个页面内容。并且提供了丰富的打印参数设置。

###  使用方法 ###

使用该网页打印插件要引入jQuery和jquery.print.js文件。

jQuery版本已经在1.7.2和1.9.1版本中做过测试。其它版本请自行测试。

#####  打印内容 #####

可以像下面这样使用来打印页面内容。

或者：

###  配置参数 ###

你可以在调用打印方法时传入一些参数：

<table style="border-spacing:0px;border:0px;float:none;height:auto;margin:0px;padding:0px;vertical-align:baseline;width:879px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
 <tbody style="float:none;height:auto;margin:0px;padding:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
  <tr style="border-top:0px;float:none;height:auto;margin:0px;padding:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
   <td style="padding:0px;border-width:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:879px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
    <div style="padding:0px;margin:0px;width:auto;border:0px;float:none;height:auto;vertical-align:baseline;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">$(</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(239,110,126);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">"#myElementId"</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">).print({ </code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">globalStyles: </code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">true</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">,</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">mediaPrint: </code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">false</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">,</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">stylesheet: </code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">null</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">,</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">noPrintSelector: </code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(239,110,126);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">".no-print"</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">,</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">iframe: </code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">true</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">,</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">append: </code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">null</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">,</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">prepend: </code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">null</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">,</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">manuallyCopyFormValues: </code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">true</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">,</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">deferred: $.Deferred()</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

<table style="border-spacing:0px;background-color:transparent;width:879px;max-width:100%;margin-bottom:20px;"> 
 <thead> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;border-top:0px;">参数</td> 
   <td style="line-height:1.42857;vertical-align:top;border-top:0px;">默认值</td> 
   <td style="line-height:1.42857;vertical-align:top;border-top:0px;">接收值</td> 
   <td style="line-height:1.42857;vertical-align:top;border-top:0px;">描述</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">globalStyles</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);"><code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">true</code></td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">Boolean</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">是否包含父文档的样式</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">mediaPrint</td> 
   <td style="line-height:1.42857;vertical-align:top;"><code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">false</code></td> 
   <td style="line-height:1.42857;vertical-align:top;">Boolean</td> 
   <td style="line-height:1.42857;vertical-align:top;">是否包含<code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">media='print'</code>的链接标签。会被<code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">globalStyles</code>选项覆盖</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">stylesheet</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);"><code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">null</code></td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">URL-string</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">外部样式表的URL地址</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">noPrintSelector</td> 
   <td style="line-height:1.42857;vertical-align:top;"><code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">".no-print"</code></td> 
   <td style="line-height:1.42857;vertical-align:top;">任何可用的jQuery选择器</td> 
   <td style="line-height:1.42857;vertical-align:top;">不想打印的元素的jQuery选择器</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">iframe</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">默认<code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">true</code>，如果没有iframe选择器被传入会创建一个隐藏的<code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">iframe</code></td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">任何可用的jQuery选择器或Boolean</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">是否使用一个iframe来替代打印表单的弹出窗口</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">append/prepend</td> 
   <td style="line-height:1.42857;vertical-align:top;"><code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">null</code></td> 
   <td style="line-height:1.42857;vertical-align:top;">Boolean</td> 
   <td style="line-height:1.42857;vertical-align:top;">是否将用户更新的表单输入框内容作为打印内容（通过迭代每一个表单元素来实现）</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">deferred</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);"><code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">$.Deferred()</code></td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">任何可用的<code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">jQuery.Deferred</code>对象</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">当打印函数被调用时的<code style="font-size:14.49px;padding:2px 4px;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;">jQuery.Deferred</code>对象</td> 
  </tr> 
 </tbody> 
</table>

###  浏览器兼容 ###

该网页打印插件已经在下面的浏览器中测试通过。

*  Google Chrome - v 20, 26
 *  Internet Explorer - v 10

更多关于该网页打印插件的最新信息请参考：[https://github.com/DoersGuild/jQuery.print][https_github.com_DoersGuild_jQuery.print]

本文版权属于jQuery之家，转载请注明出处：[http://www.htmleaf.com/jQuery/Form/201505231890.html][http_www.htmleaf.com_jQuery_Form_201505231890.html]

[jQuery]: http://www.htmleaf.com/jQuery/
[https_github.com_DoersGuild_jQuery.print]: https://github.com/DoersGuild/jQuery.print
[http_www.htmleaf.com_jQuery_Form_201505231890.html]: http://www.htmleaf.com/jQuery/Form/201505231890.html