zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

打印尺寸适配

Browse Source
This commit is contained in:
weiwei committed 2025-06-25 12:46:46 +08:00
1 parent d1a2dc0c7f
commit ef259a34b9
2 files changed
+94 -82
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/wallet/wallet-recharge-apply/index.vue
+1
View File
@@ -368,6 +368,7 @@ const previewInvoice = async (row: any) => {
getReceiptDataLoading.value = true
const res = await getInvoice({ id: row.id })
if (res.code == 0 && printDialogRef.value) return printDialogRef.value.openDialog(res.data)
return useMessage().error(res.data.msg || "获取发票信息失败")
} catch (error: any) {
useMessage().error(error.msg)
} finally {
src/views/wallet/wallet-recharge-apply/print-dialog.vue
+93 -82
View File
@@ -1,84 +1,86 @@
<template>
<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 id="receiptRef" ref="receiptRef" class="w-[17.5cm] h-[9.5cm] border border-gray-400 p-6 bg-[#EBE1C622]">
<div class="text-center mx-auto w-[10cm] text-3xl font-bold">浦江县行政事业单位食堂统一收款收据</div>
<div class="flex justify-between items-end mb-1">
<div></div>
<div class="text-lg">
{{ formatDate(new Date(receiptData.time), "YYYY年mm月dd日") || " 年 月 日".replace(/ /g, "&nbsp;&nbsp;") }}
<div>
{{ formatDate(new Date(receiptData.time), "YYYY年 mm月 dd日") || " 年 月 日".replace(/ /g, "&nbsp;&nbsp;") }}
</div>
<span class="text-xl text-red-500">No. {{ receiptData.code || "0000000" }}</span>
<span>
<span>No. </span>
<span class="text-xl text-red-500">{{ receiptData.code || "0000000" }}</span>
</span>
</div>
<div class="flex flex-row">
<div class="flex-1">
<table class="w-full border-collapse text-center text-lg">
<tr class="border border-gray-300">
<td class="border border-gray-300 px-2 w-3/12 h-10">交款单位（或个人）</td>
<td class="border border-gray-300 px-2 w-9/12 h-10 text-sm text-blue-800" colspan="4">
<input
type="text"
v-model="receiptData.deptOrUser"
class="caret-red-600 w-full h-full bg-transparent text-center"
ref="deptOrUserInput"
<div class="flex justify-center relative">
<table class="w-[15cm] h-[6cm] border-collapse text-center text-sm">
<tr>
<td class="border border-gray-600 px-2 w-3/12 h-[0.75cm]">交款单位（或个人）</td>
<td class="border border-gray-600 px-2 w-9/12 h-[0.75cm] text-sm text-blue-800" colspan="4">
<input
type="text"
v-model="receiptData.deptOrUser"
class="caret-red-600 w-full h-full bg-transparent text-center"
ref="deptOrUserInput"
/>
</td>
</tr>
<tr>
<td class="border border-gray-600 px-2 h-[0.75cm]" colspan="4">款项内容</td>
<td class="border border-gray-600 px-2 h-[0.75cm]">金额</td>
</tr>
<tr v-for="(item, index) in 3" :key="index">
<td class="border border-gray-600 px-2 h-[0.75cm] text-sm text-blue-800" colspan="4">
<!-- <input type="text" v-model="receiptDataItems[index].name" class="w-full h-full bg-transparent" /> -->
{{ receiptDataItems[index].name }}
</td>
<td class="border border-gray-600 px-2 h-[0.75cm] text-sm text-blue-800">
<!-- <input type="text" v-model="receiptDataItems[index].price" class="w-full h-full bg-transparent" /> -->
{{ receiptDataItems[index].price }}
</td>
</tr>
<tr>
<td class="border border-gray-600 px-2 text-left h-[0.75cm]" colspan="4">
<div class="flex items-center">
<span class="whitespace-nowrap">合计人民币（大写）：</span>
<!-- <input type="text" v-model="receiptData.totalPriceCnStr" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
<span class="text-sm text-blue-800">{{ receiptData.totalPriceCnStr }}</span>
</div>
</td>
<td class="border border-gray-600 px-2 text-left h-[0.75cm]">
<div class="flex items-center">
<span>￥：</span>
<!-- <input type="text" v-model="totalPrice" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
<span class="text-sm text-blue-800">{{ totalPrice }}</span>
</div>
</td>
</tr>
<tr class="relative">
<td class="border border-gray-600 px-2 w-1/6 h-[0.75cm]">收款单位<br />（盖章）</td>
<td class="border border-gray-600 px-2 text-left w-1/6 h-[0.75cm] text-sm text-blue-800">
<!-- <input type="text" v-model="receiptData.payeeDept" class="w-full h-full bg-transparent" /> -->
<img class="w-[2.5cm] h-[2.5cm] absolute -top-3 left-30 -rotate-12" src="/@/assets/receiptStamp.png" />
</td>
<td class="border border-gray-600 px-2 w-1/6 h-[0.75cm]">收款人<br />（签名）</td>
<td class="border border-gray-600 px-2 text-left w-1/6 h-[0.75cm] text-sm text-blue-800">
<input type="text" v-model="receiptData.payeeUser" class="w-full h-full bg-transparent" />
</td>
<td class="border border-gray-600 px-2 text-left align-text-top w-1/3 h-[0.75cm]">
<div class="flex">
<span class="whitespace-nowrap">备注：</span>
<textarea
v-model="receiptData.remark"
class="flex-1 text-sm text-blue-800 w-full h-full my-1 bg-transparent resize-none overflow-y-hidden"
/>
</td>
</tr>
<tr>
<td class="border border-gray-300 px-2 h-10" colspan="4">款项内容</td>
<td class="border border-gray-300 px-2 h-10">金额</td>
</tr>
<tr v-for="(item, index) in 3" :key="index">
<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800" colspan="4">
<!-- <input type="text" v-model="receiptDataItems[index].name" class="w-full h-full bg-transparent" /> -->
{{ receiptDataItems[index].name }}
</td>
<td class="border border-gray-300 px-2 h-10 text-sm text-blue-800">
<!-- <input type="text" v-model="receiptDataItems[index].price" class="w-full h-full bg-transparent" /> -->
{{ receiptDataItems[index].price }}
</td>
</tr>
<tr>
<td class="border border-gray-300 px-2 text-left h-10" colspan="4">
<div class="flex items-center">
<span class="whitespace-nowrap">合计人民币（大写）：</span>
<!-- <input type="text" v-model="receiptData.totalPriceCnStr" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
<span class="text-sm text-blue-800">{{ receiptData.totalPriceCnStr }}</span>
</div>
</td>
<td class="border border-gray-300 px-2 text-left h-10">
<div class="flex items-center">
<span>￥：</span>
<!-- <input type="text" v-model="totalPrice" class="text-sm text-blue-800 w-full h-full bg-transparent" /> -->
<span class="text-sm text-blue-800">{{ totalPrice }}</span>
</div>
</td>
</tr>
<tr>
<td class="border border-gray-300 px-2 w-1/6 h-10">收款单位<br />（盖章）</td>
<td class="border border-gray-300 px-2 text-left w-1/6 h-10 text-sm text-blue-800">
<input type="text" v-model="receiptData.payeeDept" class="w-full h-full bg-transparent" />
</td>
<td class="border border-gray-300 px-2 w-1/6 h-10">收款人<br />（签名）</td>
<td class="border border-gray-300 px-2 text-left w-1/6 h-10 text-sm text-blue-800">
<input type="text" v-model="receiptData.payeeUser" class="w-full h-full bg-transparent" />
</td>
<td class="border border-gray-300 px-2 text-left align-text-top w-1/3 h-10">
<div class="flex">
<span class="whitespace-nowrap">备注：</span>
<textarea
v-model="receiptData.remark"
class="flex-1 text-sm text-blue-800 w-full h-full my-1 bg-transparent resize-none overflow-y-hidden"
/>
</div>
</td>
</tr>
</table>
</div>
<div class="flex items-center ml-1">
<span class="text-gray-500 text-md whitespace-nowrap" style="writing-mode: vertical-rl; letter-spacing: 0.2em">
第一联 存根联
</div>
</td>
</tr>
</table>
<div class="flex items-center absolute bottom-0 top-0 right-0">
<span class="text-gray-500 text-sm whitespace-nowrap" style="writing-mode: vertical-rl; letter-spacing: 0.2em">
{{ "第一联 存根联".replace(/ /g, "&nbsp;&nbsp;&nbsp;&nbsp;") }}
</span>
</div>
</div>
@@ -86,6 +88,7 @@
<template #footer>
<el-button @click="handleClose">关闭</el-button>
<el-button type="primary" @click="stampReceipt" :disabled="loading">盖章</el-button>
<el-button type="primary" @click="saveReceipt" :disabled="loading">保存</el-button>
<el-button type="primary" @click="handlePrint" :disabled="loading">打印</el-button>
</template>
@@ -93,13 +96,13 @@
</template>
<script setup lang="ts">
import { ref, computed, nextTick } from "vue"
import { ref, computed } from "vue"
import * as htmlToImage from "html-to-image"
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from "html-to-image"
// import { toPng, toJpeg, toBlob, toPixelData, toSvg } from "html-to-image"
import { useMessage } from "/@/hooks/message"
import request from "/@/utils/request"
import { formatDate } from "/@/utils/formatTime"
import { displayPrice, storePrice } from "/@/utils/formatMoney"
import { displayPrice } from "/@/utils/formatMoney"
import printJS from "print-js"
import { putObj } from "/@/api/wallet/wallet-recharge-invoice"
@@ -142,7 +145,7 @@ const receiptDataItems = computed(() => {
return new Array(3).fill({ name: "", price: "" })
}
})
const totalPrice = computed(() => displayPrice(receiptData.value.totalPrice, ""))
const totalPrice = computed(() => displayPrice(receiptData.value.totalPrice))
const openDialog = (data: ReceiptData) => {
visible.value = true
@@ -159,9 +162,10 @@ const handleClose = () => {
const genImageUpload = async (): Promise<string | void> => {
if (receiptRef.value) {
const blob = await htmlToImage.toBlob(receiptRef.value, {
canvasWidth: 1920,
canvasHeight: 900,
canvasWidth: 661.5,
canvasHeight: 359.1,
backgroundColor: "#ffffff",
pixelRatio: 10,
})
if (blob) {
@@ -175,6 +179,8 @@ const genImageUpload = async (): Promise<string | void> => {
},
data: formData,
})
console.log(import.meta.env.VITE_IMAGE_BASE_PATH + data.url)
if (code == 0) return data.url
useMessage().error(data.msg || "上传失败")
}
@@ -198,15 +204,19 @@ const saveReceipt = async () => {
}
}
// 发票盖章
const stampReceipt = () => {}
// 打印
const handlePrint = async () => {
if (receiptRef.value) {
const pngBase64 = await htmlToImage.toPng(receiptRef.value, {
canvasWidth: 1920,
canvasHeight: 900,
canvasWidth: 661.5,
canvasHeight: 359.1,
pixelRatio: 10,
backgroundColor: "#ffffff",
})
printJS({ printable: pngBase64, type: "image", targetStyles: ["*"], maxWidth: 1920 })
printJS({ printable: pngBase64, type: "image", targetStyles: ["*"], maxWidth: 661.5 })
}
}
@@ -218,7 +228,8 @@ defineExpose({
<style scoped>
@media print {
@page {
size: A4 landscape;
size: 210mm 297mm;
/* size: A4 landscape; */
}
input {
border: none;