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

<template>
	<el-dialog :model-value="props.showes" width="70%">
		<ceshi ref="ceshiRef"></ceshi>
		<div class="btnList">
			<el-button type="primary" @click="printElement">打印</el-button>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { defineProps, reactive, ref, nextTick } from 'vue';
import ceshi from './ceshi.vue';
import printJS from 'print-js';

const ceshiRef = ref(null);
const props = defineProps({
	listData: {
		type: Array,
		default: () => [],
	},
	showes: {
		type: Boolean,
		default: true,
	},
});
const state = reactive({
	dialogVisible: true,
});
const printElement = () => {
	// 获取 DOM 元素的 HTML
	nextTick(() => {
		console.log(ceshiRef.value.orderPrintingRef);

		// // 使用 print-js 打印
		printJS({
			printable: ceshiRef.value.orderPrintingRef,
			type: 'html', // 指定打印 HTML 内容
			style: `
         @page { 
      margin: 0; 
      size: auto; 
    }
    @page :header, @page :footer { 
      display: none; 
    }
      `,
		});
	});
};
</script>
<style scoped lang="scss">
.btnList {
	margin-top: 26px;
	display: flex;
	justify-content: center;
}
</style>