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,只在最后一页显示。
这个控件功能特别的多,到这里已经把你引进门了,下面你就可以看官网实践去了。避免了一定的坑。暂时发这些,不懂得可以留言。