vue3.2实现自动打印

官网地址：Lodop和C-Lodop官网主站

1. 下载控件
2. 安装控件
   运行 CLodop_Setup_for_Win64NT_6.571EN.exe 文件，进行安装。
   
3. 引用LodopFuncs.js

//用双端口加载主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

//==检查加载成功与否，如没成功则用http(s)再试==
//==低版本CLODOP6.561/Lodop7.043及前)用本方法==
function checkOrTryHttp() {
  if (window.getCLodop)  return true;
  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.onerror = function(e) {
      if (window.location.protocol !== 'https:')
          head.insertBefore(JS2, head.firstChild); else
          head.insertBefore(JS3, head.firstChild);
  }
  JS2.onerror = JS3.onerror=function(){
    var JSelf = document.createElement("script");
    JSelf.src = "/"+MainJS; //JSelf让其它电脑通过本机打印（仅适用CLodop自带例子）
    document.head.insertBefore(JSelf, document.head.firstChild);
  }
  head.insertBefore(JS1,head.firstChild);
}

//==加载Lodop对象的主过程:==
(function loadCLodop(){
  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 LODOP;
    try {
        LODOP = window.getCLodop();
        if (!LODOP && document.readyState !== "complete") {
            alert("C-Lodop没准备好，请稍后再试！");
            return;
        }
        //清理原例子内的object或embed元素，避免乱提示：
        if (oEMBED && oEMBED.parentNode)  oEMBED.parentNode.removeChild(oEMBED);
        if (oOBJECT && oOBJECT.parentNode)oOBJECT.parentNode.removeChild(oOBJECT);
        return LODOP;
    } catch (err) {
        console.error("getLodop出错:" + err);
    }
}

export { getLodop }; //导出getLodop

将 LodopFuncs.js引入至项目中

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

4. 初始化Lodop

<script lang="ts" setup>
import { getLodop } from "@/utils/LodopFuncs";
import { ref, Ref, onMounted } from 'vue'
let lodop: any = ref(null)
const PRINT_STATUS_OK: Ref = ref(null)
// 打印区域的ref
const printDom:Ref = ref(null)

onMounted(() => {
  // 自动打印
  lodop = getLodop();
  setTimeout(() => {
    print()
  },500)
})

function automaticPrint() {
  console.log("初始化打印参数...")
  //SET_PRINT_MODE("PRINT_DUPLEX",2);0-不控制 1-不双面 2-双面(长边装订) 3-小册子双面(短边装订_长边水平)
  //SET_PRINT_MODE("PRINT_DEFAULTSOURCE",1);1-纸盒 4-手动 7-自动 0-不控制
  lodop.SET_PRINT_PAGESIZE(0, 2100, 2970, '');
  // lodop.SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName);
  // intOrient：打印方向及纸张类型
  // 1---纵向打印，固定纸张； 
  // 2---横向打印，固定纸张；  
  // 3---纵向打印，宽度固定，高度按打印内容的高度自适应(见样例18)；
  // 0---方向不定，由操作者自行选择或按打印机缺省设置。
  // lodop.SET_LICENSES("", "13F0BE65846276CB60111433C6280000", "", "");
  //this.lodop.SET_PRINT_PAGESIZE(0, 0, 0,"A5 (148 x 210mm)");
  // lodop.SET_PRINT_MODE("PRINT_DUPLEX", 1);
  // lodop.SET_PRINT_MODE("PRINT_DEFAULTSOURCE", 1);

  //this.lodop.SET_PRINT_MODE("POS_BASEON_PAPER",true);
  let csstyle = `
  <style>
  .recipe {
    padding: 20px 20px 0;
    box-sizing: border-box;
    font-size: 13px;
    color: #333;
    width: 100%; 
    height: 100%;
  } 
  .recipe__row {
    width: 100%;
    display: inline-block; 
    padding-bottom: 8px;
    padding-left: 20px;
  }
  // <style>`;
  let strFormHtml = "<body>" + printDom.value.$el.innerHTML + "</body>" + csstyle;
  lodop.PRINT_INIT("");
  lodop.ADD_PRINT_HTM(30, 5, "100%", "80%", strFormHtml);
  //this.lodop.NewPage();
  lodop.SET_PRINT_STYLE("Horient", 2);
  lodop.SET_PRINT_STYLE("Vorient", 2);
  //打印份数
  lodop.SET_PRINT_COPIES(1);
  // console.log("PrinterName", this.lodop.GET_PRINTER_NAME(0))
  // console.log("Duplex", this.lodop.GET_PRINTER_NAME("0:Duplex"))
  // console.log("PaperSize", this.lodop.GET_PRINTER_NAME("0:PaperSize"))
  // console.log("Orientation", this.lodop.GET_PRINTER_NAME("0:Orientation"))
  // console.log("FormName", this.lodop.GET_PRINTER_NAME("0:FormName"))
  // console.log("DefaultSource", this.lodop.GET_PRINTER_NAME("0:DefaultSource"))
  // 打印预览
  // 预   览  this.lodop.PREVIEW();
  // PRINT_STATUS_OK.value = lodop.PREVIEW();
  // 自动打印  this.lodop.PRINT();
  PRINT_STATUS_OK.value = lodop.PRINT();
}