JavaScript前端网页在线打印的方法asp.net（连通打印机）

哈喽，大家好。

最近开发有点忙，所以一直没有时间去写最近时间以来的心得体会。

今天开篇写一个非常简单的打印功能。

相信很多人（主要是小白），说起来在网页里实现打印功能的时候，都会一脸懵逼（包括我）

但是相信看完这篇文章后，基本上前端打印就八九不离十了。

首先在前端打印，而且简单，那么*是肯定不用我们自己造的。（自己也造不出来）

那么在此，先介绍下在线打印的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();
    })

最后贴代码。

 我做的非常简单，就是这么一点东西。实现也非常快速。

如果有更多要求，可以去看官方的原文档，如果你对打印要求不高。上面的内容基本可以满足。