vue實現lodop打印功能

1.官網下載

http://www.lodop.net/download.html

 

 2.解壓安裝運行

 

 3.vue部分實現

　　3.1將lodopDuncs.js文件放入工程中，具體操作可見：http://www.lodop.net/faq/pp35.html

 

 3.2

<template>
  <div class="hello">
    <button class="print-btn" v-on:click="btnClickPrint">
      <span>{{ msg }}</span>
    </button>
  </div>
</template>

<script>
import { getLodop } from "../assets/LodopFuncs"; //導入模塊
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "點擊打印按鈕",
    };
  },
  methods: {
    // btnClickPrint: function () {
    //   let LODOP = getLodop(); //調用getLodop獲取LODOP對象
    //   LODOP.PRINT_INIT("");
    //   LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印內容");
    //   LODOP.PREVIEW();
    // },
    btnClickPrint() {
      let LODOP = getLodop(); //調用getLodop獲取LODOP對象
      LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_整頁縮放打印輸出");
      LODOP.ADD_PRINT_BARCODE(15, 15, 300, 300, "QRCode", "xxxxxxxxxxxxx");
      LODOP.SET_PRINT_STYLEA(0, "Stretch", 1); //(可變形)擴展縮放模式
      LODOP.PREVIEW(); //預覽(預覽打印無腳標)
      // LODOP.PRINT();  //打印
    },
  },
};
</script>

效果如下：