js打印div指定区域内容并保留css样式

叁歲伎倆 2022-06-10 08:30 903阅读 0赞

引入的js文件,js从官网下载http://webscripts.softpedia.com/jqPrint/download/

页面代码   ![收藏代码][icon_star.png]

1.  <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>  
2.  <script src="../js/jquery.jqprint-0.3.js" type="text/javascript"></script>

jQuery进行页面打印

Javascript代码   ![收藏代码][icon_star.png]

1.  $(**function** () \{  
2.              //打印初始化  
3.              $("\#btnPrint").click(**function** () \{  
4.                  $("\#PrintArea").jqprint();  
5.              \})  
6.          \})

*  debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
 *  importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link\[media=print\]")，若没有会去找$("link")中的css文件）
 *  printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
 *  operaSupport: false //表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true

其实jqprint使用起来十分的简单，只需要讲两个重要的js文件引入，然后给打印按钮方法内执行jqprint()方法就能够打印该div内部的内容。

关于打印内容如何带有CSS样式，在使用该方法打印的时候，将页面上的样式内嵌样式（行内样式无所谓），

放入外部样式表（　<link href="printStyle.css" rel="stylesheet"type="text/css" media="print">）media=print时该样式只被打印时识别

。这样在打印的时候，就会带有CSS样式了。

具体的原因我不是十分清楚，看了一下jqprint的源码，jqprint支持手动指定打印时的样式，默认情况下为当前页面的样式表。

[icon_star.png]: /images/20220610/ef9235240eed4a51bf76969546d723fc.png