test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(导出): 导出 pdf 调整

This commit is contained in:
baiqi 2024-09-24 16:05:40 +08:00 committed by Craftsman
parent 14a6ec47b1
commit f24222598e
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/hooks/useExportPDF.ts
View File

@ -91,15 +91,16 @@ export default async function exportPDF(
}, },
styles: { styles: {
font: 'AlibabaPuHuiTi-3-55-Regular', font: 'AlibabaPuHuiTi-3-55-Regular',
fontSize: 8,
}, },
pageBreak: 'avoid', pageBreak: 'auto',
rowPageBreak: 'avoid', rowPageBreak: 'avoid',
margin: { top: 16, left: 16, right: 16, bottom: 16 }, margin: { top: 16, left: 16, right: 16, bottom: 16 },
tableWidth: PDF_WIDTH, tableWidth: PDF_WIDTH,
willDrawPage: (data) => { willDrawPage: (data) => {
const title = tableTitleMap?.[data.table.id as string]; const title = tableTitleMap?.[data.table.id as string];
if (title && data.cursor) { if (title && data.cursor) {
pdf.text(title, 16, data.cursor.y + 4); pdf.text(title, 10, data.cursor.y + 4);
// 在文字后加入 8px 高的空白 // 在文字后加入 8px 高的空白
data.cursor.y += 12; data.cursor.y += 12;
} }

4
frontend/src/utils/exportPdf.ts
View File

@ -9,7 +9,7 @@ const FOOTER_HEIGHT = 16;
const PAGE_HEIGHT = A4_HEIGHT - FOOTER_HEIGHT - HEADER_HEIGHT; const PAGE_HEIGHT = A4_HEIGHT - FOOTER_HEIGHT - HEADER_HEIGHT;
const PDF_WIDTH = A4_WIDTH - 32; // 左右分别 16px 间距 const PDF_WIDTH = A4_WIDTH - 32; // 左右分别 16px 间距
const CONTAINER_WIDTH = 1190; const CONTAINER_WIDTH = 1190;
export const SCALE_RATIO = window.devicePixelRatio * 1.2; export const SCALE_RATIO = window.devicePixelRatio * 1.5;
// 实际每页高度 = PDF页面高度/页面容器宽度与 pdf 宽度的比例(这里比例*SCALE_RATIO 是因为html2canvas截图时生成的是 SCALE_RATIO 倍的清晰度) // 实际每页高度 = PDF页面高度/页面容器宽度与 pdf 宽度的比例(这里比例*SCALE_RATIO 是因为html2canvas截图时生成的是 SCALE_RATIO 倍的清晰度)
export const IMAGE_HEIGHT = Math.ceil(PAGE_HEIGHT * (CONTAINER_WIDTH / PDF_WIDTH) * SCALE_RATIO); export const IMAGE_HEIGHT = Math.ceil(PAGE_HEIGHT * (CONTAINER_WIDTH / PDF_WIDTH) * SCALE_RATIO);
export const MAX_CANVAS_HEIGHT = IMAGE_HEIGHT * 20; // 一次截图最大高度是 20 页整（过长会无法截完整，出现空白） export const MAX_CANVAS_HEIGHT = IMAGE_HEIGHT * 20; // 一次截图最大高度是 20 页整（过长会无法截完整，出现空白）
@ -131,7 +131,7 @@ export default async function exportPDF(name: string, contentId: string) {
} }
// 将大分页的画布图片裁剪成pdf 页面内容大小，并渲染到临时画布上 // 将大分页的画布图片裁剪成pdf 页面内容大小，并渲染到临时画布上
tempContext.drawImage(_canvas, 0, -pagePosition, canvasWidth, canvasHeight); tempContext.drawImage(_canvas, 0, -pagePosition, canvasWidth, canvasHeight);
const tempCanvasData = cropCanvas.toDataURL('image/jpeg', 0.8); const tempCanvasData = cropCanvas.toDataURL('image/jpeg', 1);
// 将临时画布图片渲染到 pdf 上 // 将临时画布图片渲染到 pdf 上
pdf.addImage(tempCanvasData, 'jpeg', 16, 16, PDF_WIDTH, PAGE_HEIGHT); pdf.addImage(tempCanvasData, 'jpeg', 16, 16, PDF_WIDTH, PAGE_HEIGHT);
} }

5
frontend/src/views/test-plan/report/detail/exportPDF.vue
View File

@ -111,7 +111,10 @@
<div v-else-if="item.value === ReportCardTypeEnum.CUSTOM_CARD" ref="customCardRef"> <div v-else-if="item.value === ReportCardTypeEnum.CUSTOM_CARD" ref="customCardRef">
<MsRichText :raw="item.content" :editable="false" /> <MsRichText :raw="item.content" :editable="false" />
</div> </div>
<div v-else-if="item.value === ReportCardTypeEnum.SUMMARY" ref="summaryRef"> <div
v-else-if="item.value === ReportCardTypeEnum.SUMMARY && (isDefaultLayout ? detail.summary : item.content)"
ref="summaryRef"
>
<MsRichText :raw="isDefaultLayout ? detail.summary : item.content" :editable="false" /> <MsRichText :raw="isDefaultLayout ? detail.summary : item.content" :editable="false" />
</div> </div>
</div> </div>