哈喽，大家好。
最近开发有点忙，所以一直没有时间去写最近时间以来的心得体会。
今天开篇写一个非常简单的打印功能。
相信很多人（主要是小白），说起来在网页里实现打印功能的时候，都会一脸懵逼（包括我）
但是相信看完这篇文章后，基本上前端打印就八九不离十了。
首先在前端打印，而且简单，那么轮子是肯定不用我们自己造的。（自己也造不出来）
那么在此，先介绍下在线打印的API，一款非常强大的 Lodop
如果你有兴趣，可以直接在线去扒他们的API文档，写的非常详细。我这里的内容都是源自于这里
如果你觉得他们的看起来没有头绪，那么就可以往下看。会很详细的带你去配置一步步走。
首先，在这里下载Lodop包到你的本机
下载完成后是一个压缩包，解压后主要是这两个文件，其他的Html是示例，不太重要
首先单击第一个SetUp安装，
不需要做太多，无脑启动等待就好
结束是这个样子的，出来了这个样子的图就说明正确了。
然后。。。。非代码部分就到这里了。
现在，我们新建一个前台的项目。
这里我选用的是framework MVC，没别的意思，就是图方便
然后把刚刚压缩包内的js文件包括在项目中
界面最上方引用这个包。
然后，为了方便，我就用home页面作为打印项。
增加了一个打印的按钮作为触发点
然后是上代码图
红色的区域部分是为了触发打印事件，这个比较简单。基本标准的Jquery操作，看不懂的自己去补基础知识。
这里我们重点讲其他代码
首先蓝绿色圆圈标注的内容，你可以把他理解为一个初始化的函数。获得打印的对象的这么一个方法。
至于为什么，想详细了解的可以去官方API文档里查看，这里就不多赘述了。
这个在一进入页面，就先给它完成初始化。
然后现在我们详细说Print这个方法内的内容。
LODOP.PRINT_INIT("Test Print");
这一行是初始化打印项。跟着写就行，记得看文档里说主要是消除之前打印的影响。
里面的内容参数是 打印任务名称 可以随便写，我是这么理解的。
LODOP.SET_PRINT_STYLE("FontSize", 8);
LODOP.SET_PRINT_STYLEA(2,"FontName","隶书");
这两行style猜也猜得到，就是设置字体大小，和字体等等
可以按照css的方式改。
LODOP.SET_PRINT_PAGESIZE(900, 900, 900, "Test Print Watch");//设定纸张大小 LODOP.ADD_PRINT_HTM(50, 50, 50, 50, document.getElementsByClassName("row")[0].innerHTML);//增加超文本项
这两行就比较关键了，第一个是设定纸张大小的。你要打印的纸张大小的尺寸。
第二个的参数前四个分别是上下左右的边距，这些很好理解。
主要是最后一个，最后一个你可以直接用js 的标准使用方式，来把页面当中的内容拿到并且传入到方法里当作参数使用，非常方便。
官方文档内的参数介绍是这样的。
SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小
ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
这里我们只讲一种用js的方式来获取参数内容的方式。
然后我们开打印预览查看效果
LODOP.PREVIEW();
点上方打印，之后就和正常连接打印机一样了。
如果你不想要这个页面的动作，想直接打印的话，在代码里把PREVIEW();去掉，换成：Print();就可以
var LODOP = getLodop(); function startPrint() { print(); LODOP.PRINT(); } function print() { LODOP.PRINT_INIT("Test Print"); LODOP.SET_PRINT_STYLE("FontSize", 8); LODOP.SET_PRINT_STYLEA(2,"FontName","隶书"); LODOP.SET_PRINT_PAGESIZE(900, 900, 900, "Test Print Watch");//设定纸张大小 LODOP.ADD_PRINT_HTM(50, 50, 50, 50, document.getElementsByClassName("row")[0].innerHTML);//增加超文本项 } $("#print").click(function () { startPrint(); })
最后贴代码。
我做的非常简单，就是这么一点东西。实现也非常快速。
如果有更多要求，可以去看官方的原文档，如果你对打印要求不高。上面的内容基本可以满足。