feat:生成图片更新

src/views/wallet/wallet-recharge-invoice/index.vue

@@ -86,6 +86,12 @@
 							:downloadName="`${row.code}-${row.deptOrUser}-${row.payeeDept}-发票-${row.updateTime}`" />
 					</template>
 				</el-table-column>
+				<el-table-column prop="stampPicUrl" min-width="120" label="发票图片">
+					<template #default="{ row }">
+						<preview-image :src="row.picUrl" download
+							:downloadName="`${row.code}-${row.deptOrUser}-${row.payeeDept}-发票-${row.updateTime}`" />
+					</template>
+				</el-table-column>
 				<el-table-column prop="remark" label="备注" show-overflow-tooltip />
 				<el-table-column width="250" label="时间">
 					<template #default="{ row }">

src/views/wallet/wallet-recharge-invoice/print-dialog.vue

@@ -247,6 +247,13 @@ const waitForFrames = async (count: number) => {
 	}
 }
 
+const captureFilter = (node: Node) => {
+	if (!(node instanceof HTMLElement)) return true
+	if (node.classList.contains("el-loading-mask")) return false
+	if (node.classList.contains("el-loading-spinner")) return false
+	return true
+}
+
 const withReceiptCaptureStyle = async <T,>(fn: () => Promise<T>) => {
 	const el = receiptRef.value
 	if (!el) return fn()
@@ -278,8 +285,9 @@ const genImage = async (): Promise<Blob | void | null> => {
 		return await htmlToImage.toBlob(receiptRef.value!, {
 			canvasWidth: 661.5,
 			canvasHeight: 359.1,
-			backgroundColor: "transparent",
+			backgroundColor: "#ffffff",
 			pixelRatio: 3,
+			filter: captureFilter,
 		})
 	}).catch((error) => {
 		console.error(error)
@@ -374,7 +382,8 @@ const handlePrint = async () => {
 				canvasWidth: 661.5,
 				canvasHeight: 359.1,
 				pixelRatio: 4,
-				backgroundColor: "transparent",
+				backgroundColor: "#ffffff",
+				filter: captureFilter,
 			})
 		})
 		printJS({ printable: pngBase64, type: "image", targetStyles: ["*"], maxWidth: 661.5 })