哈喽,大家好。
最近开发有点忙,所以一直没有时间去写最近时间以来的心得体会。
今天开篇写一个非常简单的打印功能。
相信很多人(主要是小白),说起来在网页里实现打印功能的时候,都会一脸懵逼(包括我)
但是相信看完这篇文章后,基本上前端打印就八九不离十了。
首先在前端打印,而且简单,那么轮子是肯定不用我们自己造的。(自己也造不出来)
那么在此,先介绍下在线打印的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(); })
最后贴代码。
我做的非常简单,就是这么一点东西。实现也非常快速。
如果有更多要求,可以去看官方的原文档,如果你对打印要求不高。上面的内容基本可以满足。