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/。