vue-element-admin实现模板打印
⼀、简介
模板打印也叫”套打“，是业务系统和后台管理系统中的常⽤功能，B/S系统中实现”套打“⽐较繁琐，所以很多的B/S系统中的打印功能⼀直使⽤的是浏览器打印，很少实现模板打印。本篇将介绍在Vue Element Admin框架中实现模板打印功能。另外，本篇教程同样适⽤于Angular，Angular打印实现⽅式可以参考这篇⽂章：。
⼆、WEB打印⽅式
B/S系统中的打印⽅式分为两种，分别是浏览器打印和插件打印，两者有如下区别：
浏览器打印不需要安装插件，在js中直接调⽤print接⼝就可以将排版的HTML直接打印，适⽤于所有平台。
浏览器打印功能单⼀只能打印当前页⾯或HTML代码。
插件打印可以定制模板，根据业务打印不同模板。
插件打印需要安装js打印插件服务，许多插件⽆法跨平台只能⽤于windows系统。
三、打印插件
在众多打印插件中笔者选择了Lodop，在⼏番对⽐后发现Lodop插件有以下优势：
1. 轻量，Lodop插件安装包只有2M多，⽆论是⽤户下载和安装都⼗分便利。
2. 强⼤，Lodop⽀持模板设计、模板打印功能，简直是web打印的神器。
3. 易于封装，封装⼀个全局Lodop打印⾮常容易，封装后可以根据业务打印不同模板。
Lodop虽然好⽤，但是最⼤的缺陷就是⽆法跨平台。
四、集成Lodop打印
Step1：安装Lodop
开始前需要安装Lodop插件，下载地址：
解压⽂件并安装，确定服务已启动，以后会⾃动启动。
Step2：vue-element-admin中新增打印管理模块
相关views、router添加过程省略，本篇主要讲解Lodop打印操作。模板管理中加⼊“模板设计”、“模板打印”按钮
<el-button v-loading="loading" @click="designTemplate" type="warning">模板设计</el-button>
<el-button v-loading="loading" @click="handlePrint" type="warning">模板打印</el-button>
在created获取Lodop服务
var head =
document.head ||
document.documentElement;
var oscript = ateElement("script");
oscript.src = "localhost:8000/CLodopfuncs.js?priority=1";
head.insertBefore(oscript, head.firstChild);
Step3：模板设计vue element admin
designTemplate⽅法代码如下：
designTemplate() {
let LODOP = getCLodop();
let _self = this;
const tid = LODOP.PRINT_DESIGN();
LODOP.On_Return = function(taskID, value) {
_plateCode = value;
};
},
getCLodop⽅法是调⽤Lodop对象，前⾯已经引⼊Lodop服务，所以可以直接调⽤⽅法。
模板设计效果如下：
Lodop设计功能⽐较丰富，可以插⼊⽂本、图形、条码、图标、背景、⼤⼩等等。
Lodop预装载
对于⼀些常⽤模板⽆需设计可以使⽤预装载功能，预装载会加载预先定义的模板内容，如上图中的模板内容： templateCode: `LODOP.PRINT_INITA(10,10,762,533,"测试套打");
LODOP.ADD_PRINT_TEXT(38,78,408,30,"{{标题}}");
LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
LODOP.SET_PRINT_STYLEA(0,"FontColor","#800000");
LODOP.SET_PRINT_STYLEA(0,"Alignment",2);
LODOP.ADD_PRINT_TEXT(259,579,100,23,"{{费⽤}}");
LODOP.ADD_PRINT_TEXT(260,520,58,24,"合计：");`
Step4：模板打印
在设计好模板后要根据模板内容填充数据进⾏打印，先模拟⼀个打印数据：
context: {
标题: "⾃定义标题",
费⽤: "100.00 元"
}
handlePrint⽅法代码：
handlePrint() {
let LODOP = getCLodop();
LODOP.PREVIEW();
}
预览效果如下：
打印：
上图⽤的是Lodop预览打印功能，如果想要直接打印需要改为LODOP.PRINT();
五、总结
在vue-element-admin中实现模板打印功能已经介绍完毕，其核⼼就是使⽤Lodop插件。关于Lodop插件的操作⽅式还有很多，这⾥只是结合笔者业务经验总结了⼀种快速实现的⽅式，想要模板打印功能灵活好⽤还需要⼤家对Lodop插件进⾏深⼊了解做进⼀步的封装。Lodop官⽅技术⼿册：。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论