From dde99b5a4cf54b7b6e57fb403641f363b4dd5f1b Mon Sep 17 00:00:00 2001
From: hongchao <3228015117@qq.com>
Date: Fri, 7 Nov 2025 16:25:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=9A=E5=8A=A1=E8=81=94=E7=B3=BB=E5=8D=95pd?=
=?UTF-8?q?f=E5=AF=BC=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../business/businessHandlingRecord/index.vue | 72 ++++++++++++++++++
.../leasePublish/component/homeApply.vue | 73 ++++++++++++++++++-
2 files changed, 144 insertions(+), 1 deletion(-)
diff --git a/src/views/business/businessHandlingRecord/index.vue b/src/views/business/businessHandlingRecord/index.vue
index 382ad70e..b438fd6c 100644
--- a/src/views/business/businessHandlingRecord/index.vue
+++ b/src/views/business/businessHandlingRecord/index.vue
@@ -275,6 +275,7 @@
@@ -554,6 +555,77 @@ export default {
console.error('生成单据错误:', error)
})
},
+
+ // 下载PDF
+ async downloadPDF() {
+ try {
+ this.$modal.loading('正在生成PDF，请稍候...')
+
+ // 获取要转换的DOM元素
+ const element = document.getElementById('print-content')
+ if (!element) {
+ this.$modal.closeLoading()
+ this.$message.error('未找到要导出的内容')
+ return
+ }
+
+ // 使用html2canvas将DOM元素转换为canvas
+ const canvas = await html2canvas(element, {
+ scale: 2, // 提高清晰度
+ useCORS: true, // 允许加载跨域图片
+ allowTaint: true,
+ logging: false, // 关闭日志记录
+ backgroundColor: '#ffffff'
+ })
+
+ // 创建PDF文档
+ const pdf = new jsPDF('p', 'mm', 'a4')
+
+ // 获取canvas的宽度和高度
+ const imgWidth = 210 // A4纸的宽度(mm)
+ const pageHeight = 297 // A4纸的高度(mm)
+ const imgHeight = (canvas.height * imgWidth) / canvas.width
+
+ let heightLeft = imgHeight
+ let position = 0
+
+ // 将canvas转换为图片
+ const imgData = canvas.toDataURL('image/jpeg', 1.0)
+
+ // 如果内容超过一页，需要分页
+ if (heightLeft > pageHeight) {
+ // 第一页
+ pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight)
+ heightLeft -= pageHeight
+
+ // 添加后续页面
+ while (heightLeft > 0) {
+ position = heightLeft - imgHeight
+ pdf.addPage()
+ pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight)
+ heightLeft -= pageHeight
+ }
+ } else {
+ // 单页内容
+ pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight)
+ }
+
+ // 生成PDF文件名
+ const fileName = `业务联系单_${this.dialogForm.code || '未命名'}_${new Date().getTime()}.pdf`
+
+ // 下载PDF
+ pdf.save(fileName)
+
+ this.$modal.closeLoading()
+ this.$message.success('PDF下载成功')
+ } catch (error) {
+ console.error('生成PDF失败:', error)
+ this.$modal.closeLoading()
+ this.$message.error('生成PDF失败，请稍后重试')
+ }
+ },
+
+
// 获取弹框内容
async getDialogContent(row) {
console.log('🚀 ~ getDialogContent ~ row:', row.taskId)
diff --git a/src/views/business/leasePublish/component/homeApply.vue b/src/views/business/leasePublish/component/homeApply.vue
index 267d3543..714d7711 100644
--- a/src/views/business/leasePublish/component/homeApply.vue
+++ b/src/views/business/leasePublish/component/homeApply.vue
@@ -250,7 +250,7 @@
@@ -272,6 +272,8 @@ import {
import { getLeaseTask, getCodePDF } from '@/api/business/index'
import vueEasyPrint from "vue-easy-print";
import printJS from 'print-js';
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
export default {
name: "Home",
@@ -525,6 +527,75 @@ export default {
})
},
+ // 下载PDF
+ async downloadPDF() {
+ try {
+ this.$modal.loading('正在生成PDF，请稍候...')
+
+ // 获取要转换的DOM元素
+ const element = document.getElementById('print-content1')
+ if (!element) {
+ this.$modal.closeLoading()
+ this.$message.error('未找到要导出的内容')
+ return
+ }
+
+ // 使用html2canvas将DOM元素转换为canvas
+ const canvas = await html2canvas(element, {
+ scale: 2, // 提高清晰度
+ useCORS: true, // 允许加载跨域图片
+ allowTaint: true,
+ logging: false, // 关闭日志记录
+ backgroundColor: '#ffffff'
+ })
+
+ // 创建PDF文档
+ const pdf = new jsPDF('p', 'mm', 'a4')
+
+ // 获取canvas的宽度和高度
+ const imgWidth = 210 // A4纸的宽度(mm)
+ const pageHeight = 297 // A4纸的高度(mm)
+ const imgHeight = (canvas.height * imgWidth) / canvas.width
+
+ let heightLeft = imgHeight
+ let position = 0
+
+ // 将canvas转换为图片
+ const imgData = canvas.toDataURL('image/jpeg', 1.0)
+
+ // 如果内容超过一页，需要分页
+ if (heightLeft > pageHeight) {
+ // 第一页
+ pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight)
+ heightLeft -= pageHeight
+
+ // 添加后续页面
+ while (heightLeft > 0) {
+ position = heightLeft - imgHeight
+ pdf.addPage()
+ pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight)
+ heightLeft -= pageHeight
+ }
+ } else {
+ // 单页内容
+ pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight)
+ }
+
+ // 生成PDF文件名
+ const fileName = `业务联系单_${this.dialogForm.code || '未命名'}_${new Date().getTime()}.pdf`
+
+ // 下载PDF
+ pdf.save(fileName)
+
+ this.$modal.closeLoading()
+ this.$message.success('PDF下载成功')
+ } catch (error) {
+ console.error('生成PDF失败:', error)
+ this.$modal.closeLoading()
+ this.$message.error('生成PDF失败，请稍后重试')
+ }
+ },
+
},
};