业务联系单pdf导出

src/views/business/businessHandlingRecord/index.vue

@@ -275,6 +275,7 @@
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="print">打 印</el-button>
+        <el-button type="success" icon="el-icon-download" @click="downloadPDF">下载PDF</el-button>
         <el-button @click="dialogVisible = false">取 消</el-button>
       </span>
     </el-dialog>
@@ -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)

src/views/business/leasePublish/component/homeApply.vue

@@ -250,7 +250,7 @@
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="print">打 印</el-button>
-        <!-- <el-button type="primary" @click="">查看PDF</el-button> -->
+        <el-button type="success" icon="el-icon-download" @click="downloadPDF">下载PDF</el-button>
         <el-button @click="dialogVisible = false">取 消</el-button>
       </span>
     </el-dialog>
@@ -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失败，请稍后重试')
+      }
+    },
+
   },
 
 };