初次对接

src/views/materialReceiptNotice/selectedData.vue

@@ -1,17 +1,21 @@
 <template>
-	<el-dialog :model-value="props.showes" width="70%">
-		<ceshi ref="ceshiRef"></ceshi>
+	<el-dialog :model-value="props.showes" @close="closeFun" width="70%">
+		<div ref="ceshiRef">
+			<ceshi id="ceshi" :data="props.listData"></ceshi>
+		</div>
 		<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 { defineProps, reactive, ref, nextTick, defineEmits } from 'vue';
 import ceshi from './ceshi.vue';
 import printJS from 'print-js';
+import html2canvas from 'html2canvas';
 
-const ceshiRef = ref(null);
+const ceshiRef = ref();
+const emits = defineEmits(['close']);
 const props = defineProps({
 	listData: {
 		type: Array,
@@ -23,29 +27,43 @@ const props = defineProps({
 	},
 });
 const state = reactive({
-	dialogVisible: true,
+	snapshotUrl: '',
 });
+const closeFun = () => {
+	emits('close');
+};
 const printElement = () => {
+	captureSnapshot();
 	// 获取 DOM 元素的 HTML
 	nextTick(() => {
-		console.log(ceshiRef.value.orderPrintingRef);
-
-		// // 使用 print-js 打印
 		printJS({
-			printable: ceshiRef.value.orderPrintingRef,
-			type: 'html', // 指定打印 HTML 内容
+			printable: state.snapshotUrl,
+			type: 'image',
 			style: `
-         @page { 
-      margin: 0; 
-      size: auto; 
-    }
-    @page :header, @page :footer { 
-      display: none; 
-    }
+        @page {
+          size: auto;
+          margin: 0mm;
+        }
+        body {
+          margin: 0;
+          padding: 36px;
+        }
       `,
 		});
 	});
 };
+// 截图函数
+const captureSnapshot = async () => {
+	// 使用 html2canvas 将 div 渲染为 Canvas
+	const canvas = await html2canvas(ceshiRef.value, {
+		allowTaint: true, // 允许跨域图片
+		useCORS: true, // 使用 CORS 加载图片
+		scale: 2, // 提高截图分辨率
+		width: ceshiRef.value.clientWidth,
+		height: ceshiRef.value.clientHeight,
+	});
+	state.snapshotUrl = canvas.toDataURL('image/png');
+};
 </script>
 <style scoped lang="scss">
 .btnList {