发票保存

package.json

@@ -34,6 +34,7 @@
 		"element-plus": "2.5.5",
 		"form-designer-plus": "^0.1.5",
 		"highlight.js": "^11.7.0",
+		"html-to-image": "^1.11.13",
 		"js-base64": "^3.7.7",
 		"js-cookie": "^3.0.1",
 		"json-editor-vue3": "^1.1.1",
@@ -116,4 +117,4 @@
 		"type": "git",
 		"url": "https://gitee.com/log4j/pig"
 	}
-}
+}

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

@@ -175,7 +175,7 @@
 						>
 							删除
 						</el-button>
-						<el-button icon="print" text type="primary" @click="previewInvoice(row)">打印发票</el-button>
+						<el-button icon="printer" text type="primary" @click="previewInvoice(row)">打印发票</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -210,6 +210,7 @@ import { ElLoading, ElMessage } from "element-plus"
 import ProcessDrawer from "/@/components/processDrawer/index.vue"
 import { getDicts } from "/@/api/admin/dict"
 import { useUserInfo } from "/@/stores/userInfo"
+import { getInvoice } from "/@/api/wallet/wallet-recharge-invoice"
 
 const { push } = useRouter()
 
@@ -360,9 +361,17 @@ const taskSubmitEvent = () => {
 }
 
 // 预览发票
-const previewInvoice = (row: any) => {
-	// receiptData.value = row
-	printDialogVisible.value = true
+const previewInvoice = async (row: any) => {
+	try {
+		const res = await getInvoice({ id: row.id })
+		if (res.code == 0) {
+			receiptData.value = res.data
+			printDialogVisible.value = true
+			return
+		}
+	} catch (error: any) {
+		useMessage().error(error.msg)
+	}
 }
 </script>
 

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

@@ -1,6 +1,6 @@
 <template>
-	<el-dialog v-model="visible" title="打印发票" width="900px" :close-on-click-modal="false" draggable destroy-on-close>
-		<div class="border border-gray-300 p-6 bg-[#EBE1C622]">
+	<el-dialog v-model="visible" title="预览" width="900px" :close-on-click-modal="false" draggable destroy-on-close>
+		<div id="receiptRef" ref="receiptRef" class="border border-gray-300 p-6 bg-[#EBE1C622]">
 			<div class="text-center text-4xl font-bold">浦江县行政事业单位食堂统一收款收据</div>
 
 			<div class="flex justify-between items-end mb-1">
@@ -64,6 +64,7 @@
 
 		<template #footer>
 			<el-button @click="handleClose">关闭</el-button>
+			<el-button type="primary" @click="saveReceipt">保存</el-button>
 			<el-button type="primary" @click="handlePrint">打印</el-button>
 		</template>
 	</el-dialog>
@@ -71,6 +72,9 @@
 
 <script setup lang="ts">
 import { ref, computed } from "vue"
+import * as htmlToImage from "html-to-image"
+import { toPng, toJpeg, toBlob, toPixelData, toSvg } from "html-to-image"
+import { useMessage } from "/@/hooks/message"
 
 interface ReceiptData {
 	receiptNo?: string
@@ -102,8 +106,8 @@ const receiptData = computed(
 			cashier: "",
 		},
 )
+const receiptRef = ref<HTMLElement | null>()
 
-// 监听 visible 变化
 watch(
 	() => visible.value,
 	(newVal) => {
@@ -111,7 +115,6 @@ watch(
 	},
 )
 
-// 监听 props.modelValue 变化
 watch(
 	() => props.modelValue,
 	(newVal) => {
@@ -123,6 +126,28 @@ const handleClose = () => {
 	visible.value = false
 }
 
+const saveReceipt = () => {
+	if (receiptRef.value) {
+		htmlToImage
+			.toPng(receiptRef.value, {
+				canvasWidth: 1920,
+				canvasHeight: 900,
+				backgroundColor: "#ffffff",
+				// style: {},
+			})
+			.then((dataUrl: string) => {
+				console.log(dataUrl)
+				const img = new Image()
+				img.src = dataUrl
+			})
+			.catch((err) => {
+				useMessage().error(err)
+			})
+	}
+
+	// visible.value = false
+}
+
 const handlePrint = () => {
 	window.print()
 }