vue-element-admin實現模板打印

一、簡介

模板打印也叫”套打“，是業務系統和后台管理系統中的常用功能，B/S系統中實現”套打“比較繁瑣，所以很多的B/S系統中的打印功能一直使用的是瀏覽器打印，很少實現模板打印。本篇將介紹在Vue Element Admin框架中實現模板打印功能。另外，本篇教程同樣適用於Angular，Angular打印實現方式可以參考這篇文章：https://www.cnblogs.com/william-xu/p/11098562.html。

二、WEB打印方式

B/S系統中的打印方式分為兩種，分別是瀏覽器打印和插件打印，兩者有如下區別：

• 瀏覽器打印不需要安裝插件，在js中直接調用print接口就可以將排版的HTML直接打印，適用於所有平台。
• 瀏覽器打印功能單一只能打印當前頁面或HTML代碼。
• 插件打印可以定制模板，根據業務打印不同模板。
• 插件打印需要安裝js打印插件服務，許多插件無法跨平台只能用於windows系統。

三、打印插件

在眾多打印插件中筆者選擇了Lodop，在幾番對比后發現Lodop插件有以下優勢：

1. 輕量，Lodop插件安裝包只有2M多，無論是用戶下載和安裝都十分便利。
2. 強大，Lodop支持模板設計、模板打印功能，簡直是web打印的神器。
3. 易於封裝，封裝一個全局Lodop打印非常容易，封裝后可以根據業務打印不同模板。

Lodop雖然好用，但是最大的缺陷就是無法跨平台。

四、集成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();

五、總結

在vue-element-admin中實現模板打印功能已經介紹完畢，其核心就是使用Lodop插件。關於Lodop插件的操作方式還有很多，這里只是結合筆者業務經驗總結了一種快速實現的方式，想要模板打印功能靈活好用還需要大家對Lodop插件進行深入了解做進一步的封裝。Lodop官方技術手冊： http://www.lodop.net/。