From 4bfed9670dc65155abf553dc9f9a4380a2612158 Mon Sep 17 00:00:00 2001
From: taqi be <taqibe@taqis-MacBook-Pro.local>
Date: Fri, 17 Jan 2025 15:04:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20pdf=E5=88=86=E9=A1=B5=20=E6=89=93?=
 =?UTF-8?q?=E5=8D=B0table=20border=20=E7=BA=BF=E4=B8=8D=E4=B8=80=E8=87=B4?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/deviceInfo/testPDF.vue | 336 ++++++++++++++++---------------
 1 file changed, 171 insertions(+), 165 deletions(-)

diff --git a/src/pages/deviceInfo/testPDF.vue b/src/pages/deviceInfo/testPDF.vue
index b2105b3..8331e1a 100644
--- a/src/pages/deviceInfo/testPDF.vue
+++ b/src/pages/deviceInfo/testPDF.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="overflow: auto">
     <el-button @click="generateAndPrintPDF">打印</el-button>
     <div id="printArea" class="report">
       <h2 class="title">北京比塔技术服务有限公司</h2>
@@ -47,6 +47,134 @@
             <td>合格</td>
             <td></td>
           </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>外观</td>
+            <td>表面光滑无划伤，无明显凹凸不平，无污渍，腐蚀点及一致均匀，无色差</td>
+            <td>✔</td>
+            <td>合格</td>
+            <td></td>
+          </tr>
 
           <tr>
             <!-- rowspan="3" 动态生成 -->
@@ -84,114 +212,7 @@
           <td class="value">2024.12.2</td>
         </tr>
       </table>
-      <table class="table res-table">
-        <tr>
-          <td class="conclusion" rowspan="2">建议结论</td>
-          <td colspan="4">边缘控制器</td>
-        </tr>
-        <tr>
-          <td class="inspector">检验员</td>
-          <td class="value">xs</td>
-          <td class="data">检验日期</td>
-          <td class="value">2024.12.2</td>
-        </tr>
-      </table>
-      <table class="table res-table">
-        <tr>
-          <td class="conclusion" rowspan="2">建议结论</td>
-          <td colspan="4">边缘控制器</td>
-        </tr>
-        <tr>
-          <td class="inspector">检验员</td>
-          <td class="value">xs</td>
-          <td class="data">检验日期</td>
-          <td class="value">2024.12.2</td>
-        </tr>
-      </table>
-      <table class="table res-table">
-        <tr>
-          <td class="conclusion" rowspan="2">建议结论</td>
-          <td colspan="4">边缘控制器</td>
-        </tr>
-        <tr>
-          <td class="inspector">检验员</td>
-          <td class="value">xs</td>
-          <td class="data">检验日期</td>
-          <td class="value">2024.12.2</td>
-        </tr>
-      </table>
-      <table class="table res-table">
-        <tr>
-          <td class="conclusion" rowspan="2">建议结论</td>
-          <td colspan="4">边缘控制器</td>
-        </tr>
-        <tr>
-          <td class="inspector">检验员</td>
-          <td class="value">xs</td>
-          <td class="data">检验日期</td>
-          <td class="value">2024.12.2</td>
-        </tr>
-      </table>
-      <table class="table res-table">
-        <tr>
-          <td class="conclusion" rowspan="2">建议结论</td>
-          <td colspan="4">边缘控制器</td>
-        </tr>
-        <tr>
-          <td class="inspector">检验员</td>
-          <td class="value">xs</td>
-          <td class="data">检验日期</td>
-          <td class="value">2024.12.2</td>
-        </tr>
-      </table>
-      <table class="table res-table">
-        <tr>
-          <td class="conclusion" rowspan="2">建议结论</td>
-          <td colspan="4">边缘控制器</td>
-        </tr>
-        <tr>
-          <td class="inspector">检验员</td>
-          <td class="value">xs</td>
-          <td class="data">检验日期</td>
-          <td class="value">2024.12.2</td>
-        </tr>
-      </table>
-      <table class="table res-table">
-        <tr>
-          <td class="conclusion" rowspan="2">建议结论</td>
-          <td colspan="4">边缘控制器</td>
-        </tr>
-        <tr>
-          <td class="inspector">检验员</td>
-          <td class="value">xs</td>
-          <td class="data">检验日期</td>
-          <td class="value">2024.12.2</td>
-        </tr>
-      </table>
-      <table class="table res-table">
-        <tr>
-          <td class="conclusion" rowspan="2">建议结论</td>
-          <td colspan="4">边缘控制器</td>
-        </tr>
-        <tr>
-          <td class="inspector">检验员</td>
-          <td class="value">xs</td>
-          <td class="data">检验日期</td>
-          <td class="value">2024.12.2</td>
-        </tr>
-      </table>
-      <table class="table res-table">
-        <tr>
-          <td class="conclusion" rowspan="2">建议结论</td>
-          <td colspan="4">边缘控制器</td>
-        </tr>
-        <tr>
-          <td class="inspector">检验员</td>
-          <td class="value">xs</td>
-          <td class="data">检验日期</td>
-          <td class="value">2024.12.2</td>
-        </tr>
-      </table>
+
       <div class="footer">
         <span>电话: 010 - 82736682</span>
         <span>地址: 北京市海淀区信息路28号上地信息大厦B座901</span>
@@ -216,40 +237,41 @@ async function generateAndPrintPDF() {
     const canvas = await html2canvas(printArea, {
       scale: window.devicePixelRatio * 2,
     })
-
-    // 获取 Canvas 的宽高
     const canvasWidth = canvas.width
     const canvasHeight = canvas.height
 
-    // 将 Canvas 转为图片数据
     const imgData = canvas.toDataURL('image/jpeg', 1.0)
 
-    // 创建 jsPDF 实例
     const pdf = new jsPDF('p', 'mm', 'a4')
-    const pdfWidth = pdf.internal.pageSize.getWidth() // PDF 页面的宽度
-    const pdfHeight = pdf.internal.pageSize.getHeight() // PDF 页面的高度
+    const pdfWidth = pdf.internal.pageSize.getWidth()
+    const pdfHeight = pdf.internal.pageSize.getHeight()
+    pdf.setFontSize(12)
 
     const headerHeight = 20 // Header 高度
     const footerHeight = 20 // Footer 高度
+    const leftMargin = 15 // 左边距
+    const rightMargin = 15 // 右边距
+    const contentWidth = pdfWidth - leftMargin - rightMargin // 内容区域宽度
     const contentHeight = pdfHeight - headerHeight - footerHeight // 内容区域高度
 
     // 计算 PDF 中图片的等比例高度
-    const imgHeight = (canvasHeight * pdfWidth) / canvasWidth
+    const imgHeight = (canvasHeight * contentWidth) / canvasWidth
+
+    const PDFInsertTextX = pdfWidth / 2
+    const PDFInsertTextY = pdfHeight / 2
+    const PDFInsertFooterTextY = pdfHeight - footerHeight / 2
 
     // 如果内容高度小于一页，直接添加到 PDF
     if (imgHeight <= contentHeight) {
-      pdf.text('Header Title', pdfWidth / 2, headerHeight / 2, { align: 'center' }) // 添加 Header
-      pdf.addImage(imgData, 'JPEG', 0, headerHeight, pdfWidth, imgHeight)
-      pdf.text('Footer Text', pdfWidth / 2, pdfHeight - footerHeight / 2, {
-        align: 'center',
-      }) // 添加 Footer
+      pdf.addImage(imgData, 'JPEG', leftMargin, headerHeight, contentWidth, imgHeight)
     } else {
       // 分页逻辑
       let position = 0 // 当前绘制的起始位置
+      let page = 1 // 当前页数
       while (position < canvasHeight) {
         const pageCanvas = document.createElement('canvas')
         pageCanvas.width = canvasWidth
-        pageCanvas.height = (contentHeight * canvasWidth) / pdfWidth
+        pageCanvas.height = (contentHeight * canvasWidth) / contentWidth
 
         const pageCtx = pageCanvas.getContext('2d')
         pageCtx?.drawImage(
@@ -266,14 +288,18 @@ async function generateAndPrintPDF() {
 
         const pageImgData = pageCanvas.toDataURL('image/jpeg', 1.0)
 
-        // 添加 Header
-        pdf.text(' ', pdfWidth / 2, headerHeight / 2, { align: 'center' })
-
-        // 添加当前页到 PDF
-        pdf.addImage(pageImgData, 'JPEG', 0, headerHeight, pdfWidth, contentHeight)
+        // 添加当前页到 PDF，左右边距调整
+        pdf.addImage(
+          pageImgData,
+          'JPEG',
+          leftMargin,
+          headerHeight,
+          contentWidth,
+          contentHeight
+        )
 
         // 添加 Footer
-        pdf.text(' ', pdfWidth / 2, pdfHeight - footerHeight / 2, {
+        pdf.text(`${page}`, PDFInsertTextX, PDFInsertFooterTextY, {
           align: 'center',
         })
 
@@ -281,6 +307,7 @@ async function generateAndPrintPDF() {
 
         // 如果还有内容未绘制，添加新页
         if (position < canvasHeight) {
+          page += 1
           pdf.addPage()
         }
       }
@@ -321,20 +348,23 @@ async function generateAndPrintPDF() {
     height: 60px;
     line-height: 60px;
     text-align: center;
-    border: 1px solid #000;
+    border: 2px solid #000;
     border-bottom: none;
   }
+  table {
+  }
 
   .table {
     width: 100%;
-    border-collapse: collapse;
-
+    border-collapse: separate;
+    border-spacing: 0;
+    border: 1px solid black;
     thead,
     tbody {
       th,
       td {
-        border: 1px solid #000;
-        padding: 12px 18px;
+        border: 1px solid #000 !important;
+        padding: 12px 18px !important;
         text-align: center;
         box-sizing: border-box;
       }
@@ -343,7 +373,7 @@ async function generateAndPrintPDF() {
 
   .result {
     text-align: center;
-    border: 1px solid #000;
+    border: 2px solid #000;
     border-top: none;
     border-bottom: none;
     height: 50px;
@@ -352,27 +382,14 @@ async function generateAndPrintPDF() {
   }
 
   .result-table {
-    width: 100%;
-    border-collapse: collapse;
-
-    thead,
-    tbody {
-      th,
-      td {
-        border: 1px solid #000;
-        padding: 12px 18px;
-        text-align: center;
-        box-sizing: border-box;
-      }
-    }
-
+    border-bottom: none;
     tr {
       .index {
-        min-width: 40px;
+        min-width: 80px;
       }
 
       .project {
-        min-width: 80px;
+        min-width: 120px;
       }
 
       .content {
@@ -380,11 +397,11 @@ async function generateAndPrintPDF() {
       }
 
       .consequence {
-        min-width: 40px;
+        min-width: 80px;
       }
 
       .decide {
-        min-width: 40px;
+        min-width: 80px;
       }
 
       .remark {
@@ -394,20 +411,9 @@ async function generateAndPrintPDF() {
   }
 
   .res-table {
-    width: 100%;
-    border-collapse: collapse;
-
-    thead,
-    tbody {
-      td {
-        border: 1px solid #000;
-        padding: 12px 18px;
-        text-align: center;
-      }
-    }
-
+    border-top: none;
     .conclusion {
-      width: 63px;
+      width: 80px;
       font-weight: bold;
     }