凌晨四点的蓝

jquery printElement 插件使用

在新公司工作已经有一个星期了，基础的技术其实都是J2EE，只不过原公司的框架在多年没人维护，而且不思进取的情况下已经惨不忍睹了，动辄上百行的SQL代码写在java里，看得云里雾里。而新公司的技术都是采用开源的框架，很有活力，这个星期，我是恶补了一通了解了sprin框架，dwr、sqlMap、jquery等技术的使用，感觉学了很多。正好前两天做的一个功能里面要打印账单，到jquery的大家族里找到了一款不错打印插件，以后谁遇到打印web元素的问题，可以试试这款插件。

这款插件就是jquery printElement，名字通俗易懂吧，打印页面元素的，用法也很简单：首先下载printElement插件，其实就是一个js文件，有压缩版，也有原版，建议使用压缩版吧，毕竟能节省点流量；然后就是在web里面引用jquery库以及引用下载的printElement库了：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/erikzaadi/jQueryPlugins/raw/master/jQuery.printElement/jquery.printElement.min.js">
</script>

该引用的js都已经引用了，下面就是使用强大的jquery功能，以及插件作者提供的打印接口了，接口入参还是比较丰富的，支持默认方式的打印，即，直接调用打印机打印选择的id元素；支持将选择的id元素在新页面中打开，然后再打印，可以选择打印后，新页面是否关闭；支持过滤掉选择id元素的css，打印裸体html；甚至还支持对元素css进行重写，按照你喜欢的格式打印页面元素。

默认打印方式，即直接打印选择jquery选择器选择到的元素：

$('SelectorToPrint').printElement();

弹出打印方式，即将选择器选择的元素弹出到新页面后，再打印：

$("selector").printElement({printMode:'popup'});

设置打印标题：

$("selector").printElement({pageTitle:'thisWillBeTheNameInThePrintersLog.html'});

重写元素css：

$("selector").printElement(
            {
            overrideElementCSS:[
		'thisWillBeTheCSSUsed.css',
		{ href:'thisWillBeTheCSSUsedAsWell.css',media:'print'}]
            });

设置打印页面参数

$("selector").printElement(
            {
            printBodyOptions:
            {
            styleToAdd:'padding:10px;margin:10px;color:#FFFFFF !important;',
            classNameToAdd : 'thisWillBeTheClassUsedAsWell'
            }
            });

弹出打印，打印后保留弹出的窗口：

$("selector").printElement(
            {
            leaveOpen:true,
            printMode:'popup'
            });

作者插件的页面上，都有使用方式以及演示，有兴趣的同学可以自己上去看看，或者以后想用的时候再去看看，我这篇文章，全当是介绍了一下这款插件以及对插件的使用稍作翻译了。