Vue2+Lodop插件实现在线打印功能（提供Gitee源码）

目录

一、案例截图

二、官方网站

三、安装CLodop_Setup_for_Win32NT

四、LodopFuncs.js

五、实现打印

六、Gitee源码

一、案例截图

点击打印按钮，可以在线发送给打印机打印。

打印预览页面：

二、官方网站

这是地址：下载中心 - Lodop和C-Lodop官网主站

直接点击下载就行，主要用到的就是官方提供的2个文件，分别是LodopFuncs.js和CLodop_Setup_for_Win32NT，就可以实现在线打印了。

三、安装CLodop_Setup_for_Win32NT

双击无脑点击下一步就行了。

安装成功页面： 

四、LodopFuncs.js

工具类我统一放在了这里，仅供参考：

官方的拿过来不能直接使用，会报错，我微调了如下：

1、这里需要对外开放getLodop方法。

2、其次修改了这里。

否则会报如下错误：checkOrTryHttp is not defined ReferenceError: checkOrTryHttp is not defined at <anonymous>:1:1

下面是我调整好的代码，直接一键复制使用即可。 

完整代码：

//==本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例，可直接使用，建议理解后融入自己程序==

//用双端口加载主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:
var MainJS ="CLodopfuncs.js",
  URL_WS1   = "ws://localhost:8000/"+MainJS,                //ws用8000/18000
  URL_WS2   = "ws://localhost:18000/"+MainJS,
  URL_HTTP1 = "http://localhost:8000/"+MainJS,              //http用8000/18000
  URL_HTTP2 = "http://localhost:18000/"+MainJS,
  URL_HTTP3 = "https://localhost.lodop.net:8443/"+MainJS;   //https用8000/8443

var CreatedOKLodopObject, CLodopIsLocal, LoadJsState;

//==判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop() {
  try {
    var ua = navigator.userAgent;
    if (ua.match(/Windows\sPhone/i) ||
      ua.match(/iPhone|iPod|iPad/i) ||
      ua.match(/Android/i) ||
      ua.match(/Edge\D?\d+/i))
      return true;
    var verTrident = ua.match(/Trident\D?\d+/i);
    var verIE = ua.match(/MSIE\D?\d+/i);
    var verOPR = ua.match(/OPR\D?\d+/i);
    var verFF = ua.match(/Firefox\D?\d+/i);
    var x64 = ua.match(/x64/i);
    if ((!verTrident) && (!verIE) && (x64)) return true;
    else if (verFF) {
      verFF = verFF[0].match(/\d+/);
      if ((verFF[0] >= 41) || (x64)) return true;
    } else if (verOPR) {
      verOPR = verOPR[0].match(/\d+/);
      if (verOPR[0] >= 32) return true;
    } else if ((!verTrident) && (!verIE)) {
      var verChrome = ua.match(/Chrome\D?\d+/i);
      if (verChrome) {
        verChrome = verChrome[0].match(/\d+/);
        if (verChrome[0] >= 41) return true;
      }
    }
    return false;
  } catch (err) {
    return true;
  }
}

//==检查加载成功与否，如没成功则用http(s)再试==
//==低版本CLODOP6.561/Lodop7.043及前)用本方法==
function checkOrTryHttp() {
  if (window.getCLodop) {
    LoadJsState = "complete";
    return true;
  }
  if (LoadJsState == "loadingB" || LoadJsState == "complete") return;
  LoadJsState = "loadingB";
  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
  var JS1 = document.createElement("script")
    ,JS2 = document.createElement("script")
    ,JS3 = document.createElement("script");
  JS1.src = URL_HTTP1;
  JS2.src = URL_HTTP2;
  JS3.src = URL_HTTP3;
  JS1.onload = JS2.onload = JS3.onload = JS2.onerror = JS3.onerror=function(){LoadJsState = "complete";}
  JS1.onerror = function(e) {
    if (window.location.protocol !== 'https:')
      head.insertBefore(JS2, head.firstChild); else
      head.insertBefore(JS3, head.firstChild);
  }
  head.insertBefore(JS1,head.firstChild);
}

//==加载Lodop对象的主过程:==
(function loadCLodop(){
  if (!needCLodop()) return;
  CLodopIsLocal = !!((URL_WS1 + URL_WS2).match(/\/\/localho|\/\/127.0.0./i));
  LoadJsState = "loadingA";
  if (!window.WebSocket && window.MozWebSocket) window.WebSocket=window.MozWebSocket;
  //ws方式速度快(小于200ms)且可避免CORS错误,但要求Lodop版本足够新:
  try {
    var WSK1=new WebSocket(URL_WS1);
    WSK1.onopen = function(e) { setTimeout(checkOrTryHttp,200); }
    WSK1.onmessage = function(e) {if (!window.getCLodop) eval(e.data);}
    WSK1.onerror = function(e) {
      var WSK2=new WebSocket(URL_WS2);
      WSK2.onopen = function(e) {setTimeout(checkOrTryHttp,200);}
      WSK2.onmessage = function(e) {if (!window.getCLodop) eval(e.data);}
      WSK2.onerror= function(e) {checkOrTryHttp();}
    }
  } catch(e){
    checkOrTryHttp();
  }
})();

//==获取LODOP对象主过程,判断是否安装、需否升级:==
function getLodop(oOBJECT, oEMBED) {
  var strFontTag = "<br><font color='#FF00FF'>打印控件";
  var strLodopInstall = strFontTag + "未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>";
  var strLodopUpdate = strFontTag + "需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>";
  var strLodop64Install = strFontTag + "未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>";
  var strLodop64Update = strFontTag + "需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>";
  var strCLodopInstallA = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
  var strCLodopInstallB = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
  var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>";
  var strLodop7FontTag = "<br><font color='#FF00FF'>Web打印服务Lodop7";
  var strLodop7HrefX86 = "点击这里<a href='Lodop7_Linux_X86_64.tar.gz' target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
  var strLodop7HrefARM = "点击这里<a href='Lodop7_Linux_ARM64.tar.gz'  target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
  var strLodop7Install_X86 = strLodop7FontTag + "未安装启动，" + strLodop7HrefX86;
  var strLodop7Install_ARM = strLodop7FontTag + "未安装启动，" + strLodop7HrefARM;
  var strLodop7Update_X86 = strLodop7FontTag + "需升级，" + strLodop7HrefX86;
  var strLodop7Update_ARM = strLodop7FontTag + "需升级，" + strLodop7HrefARM;
  var strInstallOK = "，成功后请刷新本页面或重启浏览器。</font>";
  var LODOP;
  try {
    var isWinIE = (/MSIE/i.test(navigator.userAgent)) || (/Trident/i.test(navigator.userAgent));
    var isWinIE64 = isWinIE && (/x64/i.test(navigator.userAgent));
    var isLinuxX86 = (/Linux/i.test(navigator.platform)) && (/x86/i.test(navigator.platform));
    var isLinuxARM = (/Linux/i.test(navigator.platform)) && (/aarch/i.test(navigator.platform));

    if (needCLodop() || isLinuxX86 || isLinuxARM) {
      try {
        LODOP = window.getCLodop();
      } catch (err) {}
      if (!LODOP && LoadJsState !== "complete") {
        if (!LoadJsState)
          alert("未曾加载Lodop主JS文件，请先调用loadCLodop过程."); else
          alert("网页还没下载完毕，请稍等一下再操作.");
        return;
      }
      var strAlertMessage;
      if (!LODOP) {
        if (isLinuxX86)
          strAlertMessage = strLodop7Install_X86;
        else if (isLinuxARM)
          strAlertMessage = strLodop7Install_ARM;
        else
          strAlertMessage = strCLodopInstallA + (CLodopIsLocal ? strCLodopInstallB : "");
        document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;
        return;
      } else {
        if (isLinuxX86 && LODOP.CVERSION < "7.1.0.1")
          strAlertMessage = strLodop7Update_X86;
        else if (isLinuxARM && LODOP.CVERSION < "7.1.0.1")
          strAlertMessage = strLodop7Update_ARM;
        else if (CLODOP.CVERSION < "6.6.2.1")
          strAlertMessage = strCLodopUpdate;

        if (strAlertMessage)
          document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;
      }
    } else {
      //==如果页面有Lodop插件就直接使用,否则新建:==
      if (oOBJECT || oEMBED) {
        if (isWinIE)
          LODOP = oOBJECT;
        else
          LODOP = oEMBED;
      } else if (!CreatedOKLodopObject) {
        LODOP = document.createElement("object");
        LODOP.setAttribute("width", 0);
        LODOP.setAttribute("height", 0);
        LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
        if (isWinIE)
          LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
        else
          LODOP.setAttribute("type", "application/x-print-lodop");
        document.documentElement.appendChild(LODOP);
        CreatedOKLodopObject = LODOP;
      } else
        LODOP = CreatedOKLodopObject;
      //==Lodop插件未安装时提示下载地址:==
      if ((!LODOP) || (!LODOP.VERSION)) {
        document.body.innerHTML = (isWinIE64 ? strLodop64Install : strLodopInstall) + strInstallOK + document.body.innerHTML;
        return LODOP;
      }
      if (LODOP.VERSION < "6.2.2.6") {
        document.body.innerHTML = (isWinIE64 ? strLodop64Update : strLodopUpdate) + strInstallOK + document.body.innerHTML;
      }
    }
    //===如下空白位置适合调用统一功能(如注册语句、语言选择等):=======================


    //===============================================================================
    return LODOP;
  } catch (err) {
    alert("getLodop出错:" + err);
  }
}

export { getLodop }

五、实现打印

这里我预先安装了Element-UI组件，没有安装的看官方文档：Element - The world's most popular Vue UI framework

1、先引入JS方法。

import { getLodop } from "@/utils/LodopFuncs"

2、打印功能的关键代码。

printTable(){
  let LODOP = getLodop();
  if(!LODOP){
    this.$message.error("未安装打印插件");
    return;
  }
  LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1)
  LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4')
  LODOP.ADD_PRINT_HTM(15,0,'100%', '100%', document.getElementById('form').innerHTML)
  LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Width:100%;Height:100%')
  LODOP.PREVIEW();
  this.$message.success('已发送至打印机');
},

3、完整代码

<template>
  <div>
    <el-button type="danger" @click="printTable">打印</el-button>
    <div id="form">

      <h2 style="text-align: center">合同信息</h2>
      <table border="1" style="border-collapse: collapse; width: 100%;">
        <thead>
        <tr>
          <th>合同编号</th>
          <th>合同名称</th>
          <th>合同类型</th>
          <th>合同金额</th>
          <th>合同签署时间</th>
          <th>签署人</th>
          <th>合同状态</th>
          <th>合同有效期</th>
          <th>文件名</th>
          <th>备注</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="contract in contracts" :key="contract.id">
          <td>{{ contract.contractNumber }}</td>
          <td>{{ contract.contractName }}</td>
          <td>{{ contract.contractType }}</td>
          <td>{{ contract.contractAmount }}</td>
          <td>{{ contract.signingDate }}</td>
          <td>{{ contract.signer }}</td>
          <td>{{ contract.status }}</td>
          <td>{{ contract.validityPeriod }}</td>
          <td>{{ contract.fileName }}</td>
          <td>{{ contract.notes }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

</template>

<script>
import { getLodop } from "@/utils/LodopFuncs"
export default {
  name: 'HomeView',
  data() {
    return {
      contracts: [
        {
          id: 1, contractNumber: 'H001', contractName: '服务合同A', contractType: '服务', contractAmount: '5000',
          signingDate: '2025-01-15', signer: '张三', status: '有效', validityPeriod: '2025-12-31', fileName: 'contract_A.pdf', notes: '无'
        },
        {
          id: 2, contractNumber: 'H002', contractName: '产品采购B', contractType: '采购', contractAmount: '15000',
          signingDate: '2025-01-20', signer: '李四', status: '有效', validityPeriod: '2026-01-20', fileName: 'contract_B.pdf', notes: '急需'
        },
        {
          id: 3, contractNumber: 'H003', contractName: '合作协议C', contractType: '合作', contractAmount: '8000',
          signingDate: '2025-02-05', signer: '王五', status: '有效', validityPeriod: '2025-12-31', fileName: 'contract_C.pdf', notes: '审核中'
        },
        {
          id: 4, contractNumber: 'H004', contractName: '租赁合同D', contractType: '租赁', contractAmount: '20000',
          signingDate: '2025-02-10', signer: '赵六', status: '有效', validityPeriod: '2026-02-10', fileName: 'contract_D.pdf', notes: '续租'
        },
        {
          id: 5, contractNumber: 'H005', contractName: '咨询合同E', contractType: '咨询', contractAmount: '3000',
          signingDate: '2025-02-15', signer: '钱七', status: '有效', validityPeriod: '2025-12-15', fileName: 'contract_E.pdf', notes: '无'
        },
        {
          id: 6, contractNumber: 'H006', contractName: '服务合同F', contractType: '服务', contractAmount: '6000',
          signingDate: '2025-02-20', signer: '孙八', status: '有效', validityPeriod: '2026-02-20', fileName: 'contract_F.pdf', notes: '定期检查'
        },
        {
          id: 7, contractNumber: 'H007', contractName: '采购合同G', contractType: '采购', contractAmount: '25000',
          signingDate: '2025-03-01', signer: '周九', status: '有效', validityPeriod: '2026-03-01', fileName: 'contract_G.pdf', notes: '紧急订单'
        },
        {
          id: 8, contractNumber: 'H008', contractName: '协议合同H', contractType: '协议', contractAmount: '7000',
          signingDate: '2025-03-05', signer: '吴十', status: '有效', validityPeriod: '2025-09-05', fileName: 'contract_H.pdf', notes: '待续签'
        },
        {
          id: 9, contractNumber: 'H009', contractName: '建设合同I', contractType: '建设', contractAmount: '100000',
          signingDate: '2025-03-10', signer: '郑十一', status: '有效', validityPeriod: '2027-03-10', fileName: 'contract_I.pdf', notes: '需监理'
        },
        {
          id: 10, contractNumber: 'H010', contractName: '开发合同J', contractType: '开发', contractAmount: '40000',
          signingDate: '2025-03-15', signer: '冯十二', status: '有效', validityPeriod: '2026-03-15', fileName: 'contract_J.pdf', notes: '阶段性支付'
        },
        {
          id: 11, contractNumber: 'H011', contractName: '许可协议K', contractType: '许可', contractAmount: '9500',
          signingDate: '2025-03-16', signer: '陈十三', status: '有效', validityPeriod: '2025-11-16', fileName: 'contract_K.pdf', notes: '无'
        },
        {
          id: 12, contractNumber: 'H012', contractName: '保密合同L', contractType: '保密', contractAmount: '3000',
          signingDate: '2025-03-17', signer: '蔡十四', status: '有效', validityPeriod: '2025-12-17', fileName: 'contract_L.pdf', notes: '无'
        },
        {
          id: 13, contractNumber: 'H013', contractName: '转让协议M', contractType: '转让', contractAmount: '12000',
          signingDate: '2025-03-18', signer: '杜十五', status: '有效', validityPeriod: '2026-03-18', fileName: 'contract_M.pdf', notes: '待确认'
        },
        {
          id: 14, contractNumber: 'H014', contractName: '委托合同N', contractType: '委托', contractAmount: '5000',
          signingDate: '2025-03-19', signer: '李十六', status: '有效', validityPeriod: '2025-11-19', fileName: 'contract_N.pdf', notes: '无'
        },
        {
          id: 15, contractNumber: 'H015', contractName: '资产购买合同O', contractType: '购买', contractAmount: '200000',
          signingDate: '2025-03-20', signer: '沈十七', status: '有效', validityPeriod: '2028-03-20', fileName: 'contract_O.pdf', notes: '融资中'
        },
        {
          id: 16, contractNumber: 'H016', contractName: '融资协议P', contractType: '融资', contractAmount: '50000',
          signingDate: '2025-03-21', signer: '冯十八', status: '有效', validityPeriod: '2026-03-21', fileName: 'contract_P.pdf', notes: '审计中'
        },
        {
          id: 17, contractNumber: 'H017', contractName: '市场推广合同Q', contractType: '推广', contractAmount: '7000',
          signingDate: '2025-03-22', signer: '朱十九', status: '有效', validityPeriod: '2026-03-22', fileName: 'contract_Q.pdf', notes: '待沟通'
        },
        {
          id: 18, contractNumber: 'H018', contractName: '财务顾问合同R', contractType: '顾问', contractAmount: '5000',
          signingDate: '2025-03-23', signer: '巴二十', status: '有效', validityPeriod: '2025-09-23', fileName: 'contract_R.pdf', notes: '无'
        },
        {
          id: 19, contractNumber: 'H019', contractName: '法律顾问合同S', contractType: '顾问', contractAmount: '15000',
          signingDate: '2025-03-24', signer: '许二一', status: '有效', validityPeriod: '2026-03-24', fileName: 'contract_S.pdf', notes: '无'
        },
        {
          id: 20, contractNumber: 'H020', contractName: '跨国采购合同T', contractType: '采购', contractAmount: '18000',
          signingDate: '2025-03-25', signer: '何二二', status: '有效', validityPeriod: '2026-03-25', fileName: 'contract_T.pdf', notes: '无'
        },
        {
          id: 21, contractNumber: 'H001', contractName: '服务合同A', contractType: '服务', contractAmount: '5000',
          signingDate: '2025-01-15', signer: '张三', status: '有效', validityPeriod: '2025-12-31', fileName: 'contract_A.pdf', notes: '无'
        },
        {
          id: 22, contractNumber: 'H002', contractName: '产品采购B', contractType: '采购', contractAmount: '15000',
          signingDate: '2025-01-20', signer: '李四', status: '有效', validityPeriod: '2026-01-20', fileName: 'contract_B.pdf', notes: '急需'
        },
        {
          id: 23, contractNumber: 'H003', contractName: '合作协议C', contractType: '合作', contractAmount: '8000',
          signingDate: '2025-02-05', signer: '王五', status: '有效', validityPeriod: '2025-12-31', fileName: 'contract_C.pdf', notes: '审核中'
        },
        {
          id: 24, contractNumber: 'H004', contractName: '租赁合同D', contractType: '租赁', contractAmount: '20000',
          signingDate: '2025-02-10', signer: '赵六', status: '有效', validityPeriod: '2026-02-10', fileName: 'contract_D.pdf', notes: '续租'
        },
        {
          id: 25, contractNumber: 'H005', contractName: '咨询合同E', contractType: '咨询', contractAmount: '3000',
          signingDate: '2025-02-15', signer: '钱七', status: '有效', validityPeriod: '2025-12-15', fileName: 'contract_E.pdf', notes: '无'
        },
        {
          id: 26, contractNumber: 'H006', contractName: '服务合同F', contractType: '服务', contractAmount: '6000',
          signingDate: '2025-02-20', signer: '孙八', status: '有效', validityPeriod: '2026-02-20', fileName: 'contract_F.pdf', notes: '定期检查'
        },
        {
          id: 27, contractNumber: 'H007', contractName: '采购合同G', contractType: '采购', contractAmount: '25000',
          signingDate: '2025-03-01', signer: '周九', status: '有效', validityPeriod: '2026-03-01', fileName: 'contract_G.pdf', notes: '紧急订单'
        },
        {
          id: 28, contractNumber: 'H008', contractName: '协议合同H', contractType: '协议', contractAmount: '7000',
          signingDate: '2025-03-05', signer: '吴十', status: '有效', validityPeriod: '2025-09-05', fileName: 'contract_H.pdf', notes: '待续签'
        },
        {
          id: 29, contractNumber: 'H009', contractName: '建设合同I', contractType: '建设', contractAmount: '100000',
          signingDate: '2025-03-10', signer: '郑十一', status: '有效', validityPeriod: '2027-03-10', fileName: 'contract_I.pdf', notes: '需监理'
        },
        {
          id: 30, contractNumber: 'H010', contractName: '开发合同J', contractType: '开发', contractAmount: '40000',
          signingDate: '2025-03-15', signer: '冯十二', status: '有效', validityPeriod: '2026-03-15', fileName: 'contract_J.pdf', notes: '阶段性支付'
        },
        {
          id: 31, contractNumber: 'H011', contractName: '许可协议K', contractType: '许可', contractAmount: '9500',
          signingDate: '2025-03-16', signer: '陈十三', status: '有效', validityPeriod: '2025-11-16', fileName: 'contract_K.pdf', notes: '无'
        },
        {
          id: 32, contractNumber: 'H012', contractName: '保密合同L', contractType: '保密', contractAmount: '3000',
          signingDate: '2025-03-17', signer: '蔡十四', status: '有效', validityPeriod: '2025-12-17', fileName: 'contract_L.pdf', notes: '无'
        },
        {
          id: 33, contractNumber: 'H013', contractName: '转让协议M', contractType: '转让', contractAmount: '12000',
          signingDate: '2025-03-18', signer: '杜十五', status: '有效', validityPeriod: '2026-03-18', fileName: 'contract_M.pdf', notes: '待确认'
        },
        {
          id: 34, contractNumber: 'H014', contractName: '委托合同N', contractType: '委托', contractAmount: '5000',
          signingDate: '2025-03-19', signer: '李十六', status: '有效', validityPeriod: '2025-11-19', fileName: 'contract_N.pdf', notes: '无'
        },
        {
          id: 35, contractNumber: 'H015', contractName: '资产购买合同O', contractType: '购买', contractAmount: '200000',
          signingDate: '2025-03-20', signer: '沈十七', status: '有效', validityPeriod: '2028-03-20', fileName: 'contract_O.pdf', notes: '融资中'
        },
        {
          id: 36, contractNumber: 'H016', contractName: '融资协议P', contractType: '融资', contractAmount: '50000',
          signingDate: '2025-03-21', signer: '冯十八', status: '有效', validityPeriod: '2026-03-21', fileName: 'contract_P.pdf', notes: '审计中'
        },
        {
          id: 37, contractNumber: 'H017', contractName: '市场推广合同Q', contractType: '推广', contractAmount: '7000',
          signingDate: '2025-03-22', signer: '朱十九', status: '有效', validityPeriod: '2026-03-22', fileName: 'contract_Q.pdf', notes: '待沟通'
        },
        {
          id: 38, contractNumber: 'H018', contractName: '财务顾问合同R', contractType: '顾问', contractAmount: '5000',
          signingDate: '2025-03-23', signer: '巴二十', status: '有效', validityPeriod: '2025-09-23', fileName: 'contract_R.pdf', notes: '无'
        },
        {
          id: 39, contractNumber: 'H019', contractName: '法律顾问合同S', contractType: '顾问', contractAmount: '15000',
          signingDate: '2025-03-24', signer: '许二一', status: '有效', validityPeriod: '2026-03-24', fileName: 'contract_S.pdf', notes: '无'
        },
        {
          id: 40, contractNumber: 'H020', contractName: '跨国采购合同T', contractType: '采购', contractAmount: '18000',
          signingDate: '2025-03-25', signer: '何二二', status: '有效', validityPeriod: '2026-03-25', fileName: 'contract_T.pdf', notes: '无'
        }
      ]
    };
  },
  methods:{
    printTable(){
      let LODOP = getLodop();
      if(!LODOP){
        this.$message.error("未安装打印插件");
        return;
      }
      LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1)
      LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4')
      LODOP.ADD_PRINT_HTM(15,0,'100%', '100%', document.getElementById('form').innerHTML)
      LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Width:100%;Height:100%')
      LODOP.PREVIEW();
      this.$message.success('已发送至打印机');
    },
  }
}
</script>

六、Gitee源码

码云地址：Vue2+Lodop插件实现在线打印功能