pms-aomei/src/components/PrintDom.vue

<!-- 
    filename: PrintDom.vue
    author: liubin
    date: 2023-08-11 13:59:22
    description: 
-->

<template>
  <div
    class="print-area"
    style="
      box-sizing: border-box;
      margin: 4px;
      border: 1px solid #000;
      padding: 8px;
      display: inline-block;
      width: calc(6cm - 8px);
      height: 14.5cm;
      font-family: Arial, Helvetica, sans-serif;
    ">
    <!-- 6cm - margin  -->
    <h4
      class="datetime"
      style="
        font-size: 10px;
        margin: 0 0 10px 0;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: space-between;
      ">
      <span>{{ datetime.toLocaleDateString() }}</span>
      <span>{{ datetime.toLocaleTimeString() }}</span>
    </h4>
    <h2 class="material-code" style="font-size: 20px; margin: 10px 0">884797</h2>
    <h2 class="brand" style="font-size: 20px; letter-spacing: 1px; margin: 10px 0">RX-GZ-CN</h2>
    <h3 class="bom-code" style="font-size: 14px; margin: 10px 0">MGGZ 5725 KA</h3>
    <h2 class="shape" style="font-size: 20px; letter-spacing: 1px; margin: 10px 0">TG14/175</h2>
    <h3 class="order-id" style="font-size: 14px; margin: 10px 0">Po: 50024779</h3>
    <h3 class="client" style="font-size: 14px; text-transform: uppercase; margin: 10px 0">
      chongqing linagyou k
    </h3>
    <h2
      class="sale-order-id sale-item-id"
      style="
        display: flex;
        align-items: center;
        font-size: 20px;
        justify-content: space-between;
        margin: 10px 0;
      ">
      <span>22301675</span>
      <span>00006</span>
    </h2>
    <h2 class="delivery-time" style="font-size: 20px; margin: 10px 0">2022.12.18</h2>
    <h2
      class="pan-no"
      style="
        padding: 4px;
        border: 1px solid #000;
        font-size: 18px;
        margin: 10px 0;
        /* background: #000; */
        /* color: #fff; */
      ">
      Pallet 1
    </h2>
    <div
      class="bottom-area"
      style="margin-bottom: 8px; display: flex; align-items: flex-start; justify-content: space-between">
      <div
        class="qrcode"
        style="flex-shrink: 0; width: 128px; height: 128px; /* border: 1px solid #0003; */">
        <img id="qrcode" style="width: 100%; height: 100%" />
      </div>
      <div class="" style="text-align: right">
        <h2 class="shape-count" style="font-size: 20px; margin: 0 0 10px 8px">2890</h2>
        <h2 class="shape-placed" style="font-size: 20px; margin: 0 0 10px 8px">120</h2>
        <h2 class="shape-24" style="font-size: 20px; margin: 0 0 10px 8px">24x120</h2>
        <h2 class="shape-1" style="font-size: 20px; margin: 0 0 10px 8px">1x10</h2>
      </div>
    </div>
    <!-- <h2 class="pack-code" style="font-size: 20px; margin: 0 0 10px">S653</h2> -->
    <svg id="barcode"></svg>
  </div>
</template>

<script>
import JsBarcode from "jsbarcode";
import QRCode from "qrcode";
import { getLodop } from "@/utils/Lodop";

export default {
  name: "PrintDom",
  components: {},
  props: {},
  data() {
    return {
      lodop: null,
      datetime: new Date()
    };
  },
  computed: {},
  methods: {
    print(data) {
      console.log("print data", data);
      // 初始化打印控件
      if (!this.initPrintPlugin()) return this.close();

      this.paintBarCode();
      this.paintQrCode();
      this.handlePrint();

      this.close();
    },
    initPrintPlugin() {
      this.lodop = getLodop();
      if (!this.lodop) {
        alert("请先安装打印控件");
        return false;
      }
      return true;
    },
    paintBarCode(data) {
      console.log("JSBarcode", JsBarcode);
      JsBarcode("#barcode", "S653", {
        format: "CODE128",
        width: 2.5,
        height: 48,
        displayValue: true,
        margin: 0,
      });
    },
    paintQrCode(data) {
      console.log("JSBarcode", QRCode);
      QRCode.toDataURL(
        "S653",
        {
          width: 128,
          height: 128,
        },
        (err, url) => {
          if (err) {
            document.querySelector(".qrcode").innerHTML = "no QRCode";
            return;
          }
          console.log("url", url);
          document.querySelector("#qrcode").src = url;
        }
      );
    },
    handlePrint() {
      this.lodop.PRINT_INIT("RGV小票打印");
      // 纵向打印，宽度60mm，高度150mm，定义纸张名称
      this.lodop.SET_PRINT_PAGESIZE(1, 600, 1500, "ZebraT231 Tag Paper");
      this.lodop.ADD_PRINT_HTM(0, 0, "100%", "100%", document.querySelector(".print-area").outerHTML);
      this.lodop.PREVIEW();
    },
    close() {
      this.$emit("destroy");
    },
  },
};
</script>

<style scoped lang="scss">
.print-area {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}
</style>