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
Split 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 @@ @@ -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 @@ @@ -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 @@ @@ -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() { @@ -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() { @@ -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() { @@ -281,6 +307,7 @@ async function generateAndPrintPDF() {
// 如果还有内容未绘制，添加新页
if (position < canvasHeight) {
page += 1
pdf.addPage()
}
}
@ -321,20 +348,23 @@ async function generateAndPrintPDF() { @@ -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() { @@ -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() { @@ -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() { @@ -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() { @@ -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;
}

Write Preview
Loading…
Cancel
Save