vue-element-admin实现模板打印

1、简介

模板打印也叫”套打“，是业务系统和后台管理系统中的经常使用功能，B/S系统中实现”套打“比较繁琐，因此不少的B/S系统中的打印功能一直使用的是浏览器打印，不多实现模板打印。本篇将介绍在Vue Element Admin框架中实现模板打印功能。另外，本篇教程一样适用于Angular，Angular打印实现方式能够参考这篇文章：http://www.javashuo.com/article/p-kzbxabsc-ch.html。

2、WEB打印方式

B/S系统中的打印方式分为两种，分别是浏览器打印和插件打印，二者有以下区别：

• 浏览器打印不须要安装插件，在js中直接调用print接口就能够将排版的HTML直接打印，适用于全部平台。
• 浏览器打印功能单一只能打印当前页面或HTML代码。
• 插件打印能够定制模板，根据业务打印不一样模板。
• 插件打印须要安装js打印插件服务，许多插件没法跨平台只能用于windows系统。

3、打印插件

在众多打印插件中笔者选择了Lodop，在几番对比后发现Lodop插件有如下优点：

1. 轻量，Lodop插件安装包只有2M多，不管是用户下载和安装都十分便利。
2. 强大，Lodop支持模板设计、模板打印功能，简直是web打印的神器。
3. 易于封装，封装一个全局Lodop打印很是容易，封装后能够根据业务打印不一样模板。

Lodop虽然好用，可是最大的缺陷就是没法跨平台。

4、集成Lodop打印

Step1：安装Lodop

开始前须要安装Lodop插件，下载地址：http://www.lodop.net/demolist/CLodop_Setup_for_Win32NT.zip

解压文件并安装，肯定服务已启动，之后会自动启动。

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.getElementsByTagName("head")[0] ||
      document.documentElement;
    var oscript = document.createElement("script");
    oscript.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
    head.insertBefore(oscript, head.firstChild);

Step3：模板设计

designTemplate方法代码以下：

    designTemplate() {
      let LODOP = getCLodop();
      let _self = this;
      const tid = LODOP.PRINT_DESIGN();
      LODOP.On_Return = function(taskID, value) {
        _self.templateCode = 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();

5、总结

在vue-element-admin中实现模板打印功能已经介绍完毕，其核心就是使用Lodop插件。关于Lodop插件的操做方式还有不少，这里只是结合笔者业务经验总结了一种快速实现的方式，想要模板打印功能灵活好用还须要你们对Lodop插件进行深刻了解作进一步的封装。Lodop官方技术手册： http://www.lodop.net/。