关于Lodop打印控件

Vue项目中开发Lodop打印控件操作笔记。

1、进入官网下载控件，然后安装。

 1 http://www.lodop.net/ 

 

2、安装包里面有LodopFuncs.js，推荐使用官方js，网上也有很多，这里就不细说了。

 

3、引用控件LodopFuncs.js到项目中，然后object引入控件对象。

<script type="text/label" src="./src/assets/print/LodopFuncs.js"></script>
<object  id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0 style="display: none">
   <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0 />
</object>

 

4、简单实现个打印功能，只需四步。

1、初始化打印页面
LODOP.PRINT_INIT('页面打印')

2、第一个参数控制纵向：1、横向：2，第二、三个参数是纸张宽高，最后一个是纸张类型。

　LODOP.SET_PRINT_PAGESIZE(1, 270, 210, 'A4') // 纸张类型

　　

 3、简单写个页眉。前四个参数是距离打印页面上左宽高，最后一个是内容。这里写个动态变量，前面是个参数都可以动态控制。

　LODOP.ADD_PRINT_TEXT('10', '0%', '100%', '40', name) // 标题名字及宽高距离

 

 4、调用打印预览方法。到这一步就可以打印预览看到你设置的打印页面了。

　LODOP.PREVIEW() // 打印

 

 

 

　下面说点其他的打印小功能

 

  条形码转换：

  LODOP.ADD_PRINT_BARCODE(5, 65, 130, 30, '128Auto', cId)

  // 前四个：上左宽高，第五个参数条形码类型，官网给出多种，我这里选了其中一条。

  LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)

  // 第一个参数默认0就好，第二个是显示方式，对应第三个参数，第三个参数为1，每页显示，2是当前。

  如果第二个参数改为PageIndex，最后一个参数改为last,只在最后一页显示。

 

 

  这个控件功能特别的多，到这里已经把你引进门了，下面你就可以看官网实践去了。避免了一定的坑。暂时发这些，不懂得可以留言。

  

 

　

转载于:https://www.cnblogs.com/growlig/p/10321051.html