vue3+ts简单版打印功能

1、定义一个pdfprint组件

<template>
	<div id="panel" style="height: 0;overflow: hidden;">
		<p>{{info.boxesNum}}</p>
		<p>{{info.code}}</p>
		<p>{{info.postalCode}}</p>
		<p>{{info.orderNo}}</p>
	</div>
</template>

<script lang="ts">
	import {
		defineComponent,
	} from 'vue';
	export default defineComponent({
		name: "pdfPrint",
		props:["info"],
		setup(props, {
			emit
		}) {
			let info = props.info
			const print = () => {
				console.log(info)
				let newPage = window.open();
				const wpt = document.getElementById("panel");
				const newContent = wpt.innerHTML;
				// const oldContent = newPage.document.body.innerHTML;
				newPage.document.body.innerHTML = newContent;
				newPage.document.getElementsByTagName("body")[0].style.zoom = 0.86; //控制打印时的缩放
				newPage.print(); //打印方法
				// // newPage.location.reload();
				// newPage.document.body.innerHTML = oldContent;
			}
			return {
				info,
				print
			}
		}
	})
</script>

<style>
</style>

2、在父组件中引入

<template>
	<a @click="printContent">打印</a>
	<PdfPrint ref="pdfPrint" :info="info"/>
</template>

<script lang="ts">
	import {
		defineComponent,
		reactive
	} from 'vue';
	import PdfPrint from './pdfPrint.vue'
	
	export default defineComponent({
		components: {
			PdfPrint
		},
		setup(props, context) {
			let info = reactive({
				boxesNum: 0,
				code: '',
				postalCode: '',
				orderNo: '',
			})
			
			let pdfPrint = ref()
			function printContent() {
				console.log(pdfPrint.value.print())
			}
			return {
				pdfPrint,
				printContent,
				info,
			};
		}
	})
</script>

<style scoped>
</style>