maxcess-synergy-admin/src/views/materialReceiptNotice/barCode.vue

<template>
	<el-dialog :model-value="props.showes" @close="closeFun" width="600">
		<div id="printTemplate" class="print-hide">
			<div class="typefaceBox" ref="typefaceBoxRef">
				<VueQr :text="props.data.tiaoMa" :size="200"></VueQr>
				<div class="titleList">
					<div class="itemText">供应商：{{ props.data.supplierName }}</div>
					<div class="itemText">物料编码：{{ props.data.materialCode }}</div>
					<div class="itemText">包装数量：{{ props.data.qty }}</div>
					<div class="itemText">美塞斯批号：{{ props.data.mssSupplierLot }}</div>
					<div class="itemText">供应商批号：{{ props.data.fSupplierLot }}</div>
					<div class="itemText">采购订单号：</div>
					<div class="itemText">送货日期：{{ props.data.deliveryDate }}</div>
					<div class="itemText">收料通知单单号：{{ props.data.fBillNo }}</div>
				</div>
			</div>
		</div>
		<div class="btnList">
			<el-button type="primary" @click="handlePrint">打印</el-button>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { defineProps, reactive, ref, defineEmits } from 'vue';
import VueQr from 'vue-qr/src/packages/vue-qr.vue';
import printJS from 'print-js';
import html2canvas from "html2canvas";
const typefaceBoxRef = ref();
const emits = defineEmits(['close']);
const props = defineProps({
	showes: {
		type: Boolean,
		default: true,
	},
	data: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
const state = reactive({
	snapshotUrl: '',
});
const handlePrint = async () => {
  const canvas = await html2canvas(typefaceBoxRef.value, {
    allowTaint: true, // 允许跨域图片
    useCORS: true, // 使用 CORS 加载图片
    scale: 2, // 提高截图分辨率
    width: typefaceBoxRef.value.clientWidth,
    height: typefaceBoxRef.value.clientHeight,
  });
  state.snapshotUrl = canvas.toDataURL('image/png');
	// 获取打印模板的DOM元素
	const printElement = document.getElementById('printTemplate');
	if (printElement) {
		printJS({
			printable: state.snapshotUrl,
			type: 'image',
			style: `
         @page { size: 100mm 50mm landscapes; margin: 0; }
      `,
		});
	}
};

const closeFun = () => {
	emits('close');
};
</script>
<style scoped lang="scss">
.typefaceBox {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 64px 0;
	.titleList {
		flex: 1;
	}
}

.btnList {
	margin-top: 26px;
	display: flex;
	justify-content: center;
}
</style>