Common Components
On this page

标签打印 ​

点击查看代码
javascript
import { FormItemControlType } from "@nbicc/common-components";
import { onMounted, ref, watch } from "vue";
import Jsbarcode from "jsbarcode";
import QRCode from "qrcode";
import NPrintLodop from "../../../src/components/n-print/lodop/NPrintLodop.vue";

const nPrintRef = ref();

const data = ref({
  size: "custom",
  width: 80,
  height: 60,
  pagingMode: "clip",
  orientation: "landscape"
});
const fields = ref([]);

watch(
  () => ({ size: data.value.size }),
  ({ size }) => {
    const _fields = [
      [
        { name: "size", label: "尺寸", type: FormItemControlType.SELECT, initialValue: "custom" },
        {
          options: [
            { label: "自定义", value: "custom" },
            { label: "A5", value: "A5" },
            { label: "A4", value: "A4" },
            { label: "A3", value: "A3" },
            { label: "B5", value: "B5" },
            { label: "B4", value: "B4" },
            { label: "JIS-B5", value: "JIS-B5" },
            { label: "JIS-B4", value: "JIS-B4" },
            { label: "letter", value: "letter" },
            { label: "legal", value: "legal" },
            { label: "ledger", value: "ledger" }
          ]
        }
      ]
    ];

    if (size === "custom") {
      _fields.push(
        [
          {
            name: "width",
            label: "宽度",
            type: FormItemControlType.INPUT_NUMBER,
            initialValue: 80
          },
          { addonAfter: "mm", min: 20 }
        ],
        [
          {
            name: "height",
            label: "高度",
            type: FormItemControlType.INPUT_NUMBER,
            initialValue: 61
          },
          { addonAfter: "mm", min: 20 }
        ]
      );
    }

    _fields.push(
      [
        {
          name: "margin",
          label: "外边距",
          type: FormItemControlType.INPUT_NUMBER,
          initialValue: 1
        },
        { addonAfter: "mm" }
      ],
      [
        {
          name: "padding",
          label: "内边距",
          type: FormItemControlType.INPUT_NUMBER,
          initialValue: 1
        },
        { addonAfter: "mm" }
      ],
      [
        {
          name: "orientation",
          label: "方向",
          type: FormItemControlType.RADIO_GROUP,
          initialValue: "portrait"
        },
        {
          options: [
            { label: "纵向", value: "portrait" },
            { label: "横向", value: "landscape" }
          ]
        }
      ],
      [
        {
          name: "pagingMode",
          label: "分页模式",
          type: FormItemControlType.RADIO_GROUP,
          initialValue: "auto"
        },
        {
          options: [
            { label: "自动", value: "auto" },
            { label: "裁剪", value: "clip" },
            { label: "紧凑", value: "compact" }
          ]
        }
      ],
      [{ name: "title", label: "标题", type: FormItemControlType.INPUT, initialValue: "打印测试" }],
      [
        {
          name: "component",
          label: "组件",
          type: FormItemControlType.SELECT,
          initialValue: "NPrint"
        },
        {
          options: [
            { label: "浏览器打印(PrintJS)", value: "NPrint" },
            { label: "Lodop打印", value: "NPrintLodop" }
          ]
        }
      ]
    );

    _fields.push(
      [
        {
          name: "hostname",
          label: "C-LODOP 服务地址",
          type: FormItemControlType.INPUT,
          initialValue: "localhost"
        },
        { type: "url" }
      ],
      { name: "port", label: "端口", type: FormItemControlType.INPUT_NUMBER, initialValue: 8000 },
      {
        name: "standbyPort",
        label: "备用端口",
        type: FormItemControlType.INPUT_NUMBER,
        initialValue: 18000
      }
    );

    fields.value = _fields;
  },
  { immediate: true }
);

const qrcodeDataUri = ref("");
onMounted(() => {
  Jsbarcode("#svg", "bopomofodetenele", {
    width: 1,
    height: 40,
    font: "SimSun"
  });

  QRCode.toString("bopomofodetenele", { type: "svg" }, function (err, string) {
    if (err) throw err;
    qrcodeDataUri.value = `data:image/svg+xml;base64,${btoa(string)}`;
  });
});

function handleClose() {
  console.log("打印关闭");
}
html
<template>
  <n-form v-model:data="data" :fields="fields" :field-layout="{ span: 12 }" />

  <a-space>
    <n-button type="primary" @click="nPrintRef.print()">通过 ref 实例接口打印</n-button>
  </a-space>

  <NPrintLodop
    ref="nPrintRef"
    :size="data.size === 'custom' ? [`${data.width}mm`, `${data.height}mm`] : data.size"
    :margin="`${data.margin}mm`"
    :padding="`${data.padding}mm`"
    :orientation="data.orientation"
    :paging-mode="data.pagingMode"
    :title="data.title"
    :service-config="{ hostname: data.hostname, port: data.port, standbyPort: data.standbyPort }"
    @close="handleClose"
  >
    <template #toolbar="{ print }">
      <n-button type="primary" @click="print">通过 slot 打印</n-button>
    </template>

    <template v-for="index in 2" :key="index">
      <n-print-page>
        <div class="tag">
          <div><svg id="svg" /></div>
          <img style="width: 30mm" :src="qrcodeDataUri" />
        </div>
      </n-print-page>
    </template>
  </NPrintLodop>
</template>

<style lang="less" scoped>
.tag {
  width: 100%;
  height: 100%;
  border: 1pt black solid;
}
</style>