wangqi
/
BTDK-DMS
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: pdf分页 打印table border 线不一致问题

master
taqi be 1 month ago
parent
435a760fe5
commit
4bfed9670d
1 changed files with 171 additions and 165 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 336
      src/pages/deviceInfo/testPDF.vue

336
src/pages/deviceInfo/testPDF.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save