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>

效果如下：