精臣打印机微信小程序打印预览

记录一下 ，在此感谢精臣打印机的程序员，二次开发有人指导会顺畅很多

<template>
  <view>
    <button @click="goToConnectPage()">连接打印机</button>
    <button @click="previewEvent()">预览</button>
    <button @click="printLabel()">打印</button>

    <canvas
      :style="{
        width: canvasWidthResponsive + 'px',
        height: canvasHeightResponsive + 'px',
      }"
      canvas-id="myCanvas"
    ></canvas>
  </view>
</template>

<script>
import { usePrint } from "@/utils/print";

const {
  startJob,
  startDrawLabel,
  drawText,
  drawBarcode,
  drawQRCode,
  drawRectangle,
  drawLine,
  drawImage,
  endDrawLabel,
  print,
  didReadPrintCountInfo,
  didReadPrintErrorInfo,
  getMultiple,
} = usePrint();
export default {
  data() {
    return {
      canvasWidth: 200,
      canvasHeight: 200,
    };
  },
  computed: {
    // 响应式宽高
    canvasWidthResponsive() {
      return this.canvasWidth;
    },
    canvasHeightResponsive() {
      return this.canvasHeight;
    },
  },
  methods: {
    goToConnectPage() {
      uni.navigateTo({
        url: "./index",
      });
    },
    //预览
    previewEvent() {
      //标签尺寸
      const labelWidth = 50;
      const labelHeight = 70;
      //B3S/B1/B21/B203/K3/K3W的multiple传8，B32/Z401/M2的multiple传11.81
      const multiple = 11.81;
      this.canvasWidth = labelWidth * multiple;
      this.canvasHeight = labelHeight * multiple;
      startDrawLabel("myCanvas", this, labelWidth, labelHeight, 0);
      drawText("固定资产标识卡", 4, 6, 3.5, 0, { bold: true });
      drawText("资产名称：饮水机", 4, 16, 3, 0);
      drawText("部门名称：综合管理部", 4, 26, 3, 0);
      drawText("资产编号：KCKA20220001", 4, 36, 3, 0);
      drawText("入库日期：2018-05-16", 4, 46, 3, 0);
      drawText("使用人：潘小晨", 4, 56, 3, 0);
      drawText("备注：", 4, 66, 3, 0);

      drawLine(0, 10, labelWidth, 0.1, 0);
      drawLine(0, 20, labelWidth, 0.1, 0);
      drawLine(0, 30, labelWidth, 0.1, 0);
      drawLine(0, 40, labelWidth, 0.1, 0);
      drawLine(0, 50, labelWidth, 0.1, 0);
      drawLine(0, 60, 29.5, 0.1, 0);
      drawLine(30, 50, 0.1, 20, 0);

      drawQRCode(
        "https://u.wechat.com/EohZr2D1c]s1rDRmQ7MQUEW?s=8",
        32,
        52.5,
        15,
        15,
        0,
        2
      );
      endDrawLabel(() => {
        console.log("预览");
      });
    },
    //打印
    printLabel() {
      uni.showToast({
        title: "开始打印",
      });

      didReadPrintCountInfo((res) => {
        console.log(res.count);
      });

      didReadPrintErrorInfo((res) => {
        console.log(res.errCode);
      });

      startJob(1, 3, 1, () => {
        //标签尺寸
        this.previewEvent();
        setTimeout(() => {
          print(1, () => {});
          console.log("打印");
        }, 500);
      });
    },
  },
};
</script>

<style>
/* canvas {
  display: flex;
  left: 100%;
} */
canvas {
  background-color: antiquewhite;
}
</style>