初次对接

src/views/materialReceiptNotice/selectedData.vue

@@ -1,32 +1,56 @@
 <template>
-  <el-dialog :model-value="props.showes" width="70%" >
-    <ceshi></ceshi>
-    <div class="btnList">
-      <el-button type="primary">打印</el-button>
-    </div>
-  </el-dialog>
+	<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} from 'vue';
-import ceshi from './ceshi.vue'
+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
-  }
+	listData: {
+		type: Array,
+		default: () => [],
+	},
+	showes: {
+		type: Boolean,
+		default: true,
+	},
 });
 const state = reactive({
-  dialogVisible: true,
+	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;
+.btnList {
+	margin-top: 26px;
+	display: flex;
+	justify-content: center;
 }
-</style>
+</style>