插件  

jsbarcode、uuid、vue-easy-print、vue-qr

主页面

<script setup lang="ts">
	import { ref } from 'vue'
	import PrintUser from './printUser.vue'
	const easyPrint = ref()
	const printDemo = () => {
		setTimeout(() => {
			easyPrint.value.print()
		}, 1000)
	}
	/**
	 * 打印假数据
	 */
	const pieceList = [
		{
			mouldName: 'a23121231233123aa',
			mouldCode: 'a21312312312312a',
			bomTypeName: 'aa12323123a',
			confirmationCode: 'a3213123123123a',
			mouldType: 'a3213123123123a',
			technologyList: [
				{ id: 1, num: 1, content: 'Muju111', code: 'codeMuju111', sign: '老王' },
				{ id: 2, num: 2, content: 'Muju2222', code: 'codeMuju222', sign: '老六' },
				{ id: 3, num: 3, content: 'Muju3333', code: 'codeMuju333', sign: '老八' },
			],
			id: 1244124,
			barCode: 'ETC785216',
		},
		{
			mouldName: 'aaa',
			mouldCode: 'aaa',
			bomTypeName: 'aaa',
			confirmationCode: 'aaa',
			mouldType: 'a3213123123123a',
			technologyList: [
				{ id: 1, num: 1, content: 'Muju111', code: 'codeMuju111', sign: '老王' },
				{ id: 2, num: 2, content: 'Muju2222', code: 'codeMuju222', sign: '老六' },
				{ id: 3, num: 3, content: 'Muju3333', code: 'codeMuju333', sign: '老八' },
			],
			id: 124232344124,
			barCode: 'EAN13',
		},
		{
			mouldName: 'aaa',
			mouldCode: 'aaa',
			bomTypeName: 'aaa',
			confirmationCode: 'aaa',
			mouldType: 'a3213123123123a',
			technologyList: [
				{ id: 1, num: 1, content: 'Muju111', code: 'codeMuju111', sign: '老王' },
				{ id: 2, num: 2, content: 'Muju2222', code: 'codeMuju222', sign: '老六' },
				{ id: 3, num: 3, content: 'Muju3333', code: 'codeMuju333', sign: '老八' },
			],
			id: 124423124,
			barCode: 'CODE39',
		},
	]
</script>

<template>
	<div>
		<el-button class="edit" size="small" @click="printDemo">打印</el-button>
		<PrintUser :pieceList="pieceList" ref="easyPrint"></PrintUser>
	</div>
</template>

<style lang="scss" scoped></style>

printUser.vue

<template>
	<div style="width: 100%">
		<vue-easy-print ref="technologyCardOneRef" class="card-1">
			<div v-for="piece in props.pieceList" :key="piece.id" style="page-break-after: always">
				<img src="@/assets/bg.jpg" alt="" style="width: 100%; height: 150px" />
				<div class="top">
					<div class="item-col">
						<span>模具名称：{{ piece.mouldName }}</span>
					</div>
					<div class="item-col">
						<span>模具编号：{{ piece.mouldCode }}</span>
					</div>
					<div class="item-col">
						<span>BOM类型：{{ piece.bomTypeName }}</span>
					</div>
					<div class="item-col">
						<span>工件确认号：{{ piece.confirmationCode }}</span>
					</div>
					<div class="item-col">
						<span>模具类型：{{ piece.mouldName }}</span>
					</div>
				</div>
				<div class="bottom">
					<table align="center" border="1px">
						<tr>
							<th style="width: 10%">工序序号</th>
							<th style="width: 30%">工序内容</th>
							<th style="width: 40%">工序条码</th>
							<th style="width: 20%">老板确认签名</th>
						</tr>
						<tr v-for="tech in piece.technologyList" :key="tech.id">
							<td>{{ tech.num }}</td>
							<td>{{ tech.content }}</td>
							<td>{{ tech.code }}</td>
							<td>{{ tech.sign }}</td>
						</tr>
					</table>
				</div>
				<vue-qr text="http://www.baidu.com" :size="80"></vue-qr>
				<div>{{ piece.barCode }}</div>
				<js-barcode :value="piece.barCode"></js-barcode>
			</div>
		</vue-easy-print>
	</div>
</template>

<script setup lang="ts">
	import vueEasyPrint from 'vue-easy-print'
	import vueQr from 'vue-qr/src/packages/vue-qr.vue'
	import jsBarcode from './code.vue'

	const technologyCardOneRef = ref()

	const props = defineProps<{
		pieceList: Array<any>
	}>()

	const print = () => {
		setTimeout(() => {
			technologyCardOneRef.value.print()
		}, 10)
	}

	defineExpose({ print })

</script>

<style scoped lang="less">
	/* 移除打印页眉页脚 */
	@page {
		size: auto; /* auto is the initial value */
		margin: 3mm; /* this affects the margin in the printer settings */
	}

	.top {
		display: flex;
		flex-wrap: wrap;
		.item-col {
			width: 33.33%;
			margin: 10px 0;
		}
	}

	.bottom {
		table {
			border: 1px solid #000;
			border-spacing: 0;
			width: 100%;
		}
		th,
		td {
			text-align: center;
		}
	}
</style>

code.vue

<template>
	<!-- 条形码容器，可选svg、canvas，或img标签 -->
	<svg v-if="tagCode === 'svg'" :id="idName"></svg>
	<canvas v-if="tagCode === 'canvas'" :id="idName"></canvas>
	<img v-if="tagCode === 'img'" :id="idName" />
</template>

<script>
	import { onMounted, nextTick } from 'vue'
	import { v4 as uuidv4 } from 'uuid'
	// https://github.com/lindell/JsBarcode/wiki/Options
	import jsbarcode from 'jsbarcode'

	export default {
		name: 'jsBarcode',
		props: {
			tagCode: {
				type: String,
				default: 'svg',
			},
			value: [String, Number],
		},
		setup(props, ctx) {
			const idName = `jsBarcode${uuidv4()}`
			onMounted(() => {
				// 生成条形码
				nextTick(() => {
					jsbarcode(`#${idName}`, props.value, {
						height: 35,
						fontSize: 18,
						textAlign: 'left', // Set the horizontal alignment of the text. Can be left / center / right
						displayValue: true, //是否显示文字信息
					})
				})
			})
			return {
				idName,
			}
		},
	}
</script>

<style lang="scss" scoped></style>