> > 1、下载lodop，把js文件放到utils里面，把里面两个方法修改为export function（暴露出去，让其他js文件import来用）
理论上暴露这两个方法，就可以使用了，但保守来看还是尽量将文件中的方法全部暴露出来
2、写打印方法的逻辑与参数设置
// 1)引入方法
import { getLodop } from '@/utils/LodopFuncs'
// 2)打印逻辑
export default function({ name,top,left,width,height,htmlContent,isHorizontal }){
const LODOP = getLodop()
LODOP.PRINT_INIT('任务名') // 打印初始化（打印任务名）
LODOP.SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName) // 设置纸张大小
// 关于纸张设定详细规则
// <参数1>intOrient:值为1时，纵向打印固定纸张；值为2时，横向打印固定纸张；值为3时，纵向打印固定宽度，高度按打印内容的高度自适应
// <参数2>intPageWidth:纸张宽
// <参数3>intPageHeight:固定纸张时该参数是纸张高，高度自适应时该参数时纸张底边的空白高，计量单位与纸张宽一样
// <参数4>strPageName:纸张名，必须intPageWidth等于0时，本参数才有效，选择A5，A4，A3等等
// <案例:以设置A4纸为例>纵向打印：LODOP.SET_PRINT_PAGESIZE（2,0,0,'A4'）
LODOP.SET_PRINT_STYLE(样式名，效果) //对语句后面的打印样式设置效果
// <参数1>样式名有许多，例如FontSize-字体大小，Bold-字体加粗，FontName-字体类型【注意：样式名采用大驼峰】
// <参数2>效果：这需要根据样式来开，不同的样式，设置的效果也不同，例如字体的单位采用的是像素值，所以与css设置字体大小的值相同；字体类型需要提供本地存在的类型；字体加粗从1开始；
// <案例>:
// LODOP.SET_PRINT_STYLE('FontSize',16) //设置字体大小
// LODOP.SET_PRINT_STYLE('FontName','宋体') //设置字体类型
// LODOP.SET_PRINT_STYLE('Bold',1) //设置字体加粗
LODOP.SET_PRINT_STYLEA(序号,样式名，效果) //针对第一个参数设置的打印项样式设置效果，常用来设置单项打印效果
// <参数1>序号:代表第几项内容，从1开始，0表示该语句的上一项打印内容
// <参数2与参数3同SET_PRINT_STYLE>
// <案例>：
// 给前面一个文本设置字体颜色：LODOP.SET_PRINT_STYLEA(0,'FontColor','#ff0000')
// 样式名称与css样式名称相同，主要注意书写方式为大驼峰
LODOP.SET_PRINT_STYLEA(0,"Angle",10) // 将前面这个文本逆时针旋转10度，如果旋转角度是负数，则是顺时针
LODOP.SET_PRINT_STYLEA(0,"Italic",1) //让前面的那个文本倾斜
LODOP.SET_PRINT_STYLEA(0,"Underline",1) //文本加下划线
LODOP.SET_PRINT_STYLEA(0,"Alignment",2) //设置文本居中，内容始终在文本框中间
LODOP.SET_PRINT_STYLEA(0,"Alignment",3) //设置文本右对齐，内容始终在最右边，最后一个文本在文本框最右边边距处。文字内容延展到左边（具体没搞清除，但应该与第三个参数有关）
// 【注意】Angle、Italic、Underline、Alignment等样式设置都可以用在LODOP.SET_PRINT_STYLE中设置整体样式
// 添加打印项与打印项的对齐
LODOP.ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,Content) // 添加纯文本内容
// <参数1>intTop：距离顶部的距离
// <参数2>intLeft：距离左侧的距离
// 【注意】<参数1>与<参数2>主要用于打印项的对齐
// <参数3>intWidth：文本的宽
// 【注意】打印项宽度不够，多余的部分文本会换行显示
// <参数4>intHeight：文本的高
// 【注意】打印项高度不够，可能会导致后面的内容无法显示
// <参数5>Content：文本内容
// <LODOP.SET_PRINT_STYLEA的妙用-修改参数5>：
// <加载模板前赋值>：var Content = 新的值
// <LODOP.ADD_PRINT_TEXTA("neirong",131,175,254,168,"内容")>：这是模版中该打印项的语句
// <加载模板后赋值>：LODOP.SET_PRINT_STYLEA("neirong","CONTENT", 新的值)
LODOP.ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight, htmlContent) // 添加HTML模板内容，也就是超文本内容
// 【注意】html超文本，打印项高度小于本身的高度，会根据打印项的高度分页，造成多页现象（如果打印项有部分不显示，在打印设计里调整一下打印项的高度，就是指这里的调整，这高度也是超文本自动分页的依据）
LODOP.ADD_PRINT_IMAGE(intTop,intLeft,intWidth,intHeight,'图片地址')
// LODOP.SET_PRINT_STYLEA(0,"Stretch",1) //(可变形)扩展缩放模式
// LODOP.SET_PRINT_STYLEA(0,"Stretch",2) //(不可变形)扩展缩放模式
// LODOP打印，首次打印时，图片加载不出来、加载不完全问题，则需要使用HtmWaitMilSecs
// LODOP.SET_PRINT_STYLEA(0,"HtmWaitMilSecs",1000) //延时下载超文本1000毫秒
// 设置线条的样式
// 该组合，有5个线条样式，如下语句第五个参数为样式，对应这里的打印设计的线条
// 0--实线 1--破折线 2--点线 3--点划线 4--双点划线
LODOP.ADD_PRINT_LINE(49,106,46,206,0,3) //一条线宽厚度为3的直实线。当线宽=高时，为直线
// 【注意】除实线之外，其他的样式线宽都为0，也就是如上语句的第六个参数
// 设置背景图
LODOP.ADD_PRINT_SETUP_BKIMG("D:\\q1.png") //选择本地路径的一个png图片作为背景图
LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW",true) //设置预览包含背景图
LODOP.SET_SHOW_MODE("BKIMG_PRINT",true) //设置打印背景图
// 这三句话，就是设置一个背景图，预览的时候显示，并且打印的时候也打印出来
// 设置页眉页脚、位置锁定、对象锁定等等
LODOP.SET_PRINT_STYLEA(0,"ItemType",1) //设置上面那个文本为页眉
LODOP.SET_PRINT_STYLEA(0,"Vorient",1) //设置下边距锁定
// 页眉页脚项每页都需要在固定位置重复打印，ItemType值：0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
// 表格打印
#define($table1)<style>table{border:0px solid #000;border-collapse:collapse;table-layout:fixed} td{border:0px solid #000;text-align:center}</style>\
<table style='width:120mm'>\
<tr style='height:12.5mm'>\
<td style='width:32mm'>$!data.name(填入数据任意，不固定)</td>\
<td style='width:38mm'>$!data.idCard(填入数据任意，不固定)</td>\
</tr>\
<tr style='height:12.5mm'>\
<td style='width:32mm'>$!data.name(填入数据任意，不固定)</td>\
<td style='width:38mm'>$!data.idCard(填入数据任意，不固定)</td>\
</tr>\
</table>\
#end
LODOP.ADD_PRINT_TABLE('2mm','24mm','120mm','38mm','$table1')
// 前面几个参数应该和表格的一些宽高有关，但具体没有搞清楚，可以照着这样设置打印看看效果再摸索一下
LODOP.SET_PRINT_MODE('CATCH_PRINT_STATUS', true) // 捕获打印状态
LODOP.PRINT() // 打印
}
3、实例演示
找到了一个现成的，就不多写了，里面的内容对于lodop的使用都很实用，不清楚使用流程的话，可以参考里面的来写 segmentfault.com/a/119000004…
