VUE中通過DOM導出PDF

最終效果

在這里插入圖片描述

前端導出PDF的核心在于樣式的繪制上，這里其實直接使用CSS進行繪制和布局就行，只不過需要計算好每頁DIV盒子的大小，防止一頁放不下造成樣式錯亂。

項目依賴

項目是Vue3 + TS

npm i html2canvas@1.4.1
npm i jspdf@3.0.1

工具類(htmlToPdf.ts)

import {App} from 'vue';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';declare module '@vue/runtime-core' {interface ComponentCustomProperties {htmlToPdfInstall: (name: string, title: string) => Promise<void>;htmlToPdfPrint: (name: string, title: string) => Promise<void>;}
}export default {// 下載install(app: App) {app.config.globalProperties.htmlToPdfInstall = async function (name: string, title: string): Promise<void> {const ele = document.querySelector(`#${name}`) as HTMLElement;if (!ele) {console.error(`Element with id '${name}' not found.`);return;}const eleW = ele.offsetWidth;const eleH = ele.offsetHeight;const eleOffsetTop = ele.offsetTop;const eleOffsetLeft = ele.offsetLeft;const canvas = document.createElement('canvas');let abs = 0;const win_in = document.documentElement.clientWidth || document.body.clientWidth;const win_out = window.innerWidth;if (win_out > win_in) {abs = (win_out - win_in) / 2;}canvas.width = eleW * 2;canvas.height = eleH * 2;const context = canvas.getContext('2d');if (!context) return;context.scale(2, 2);context.translate(-eleOffsetLeft - abs, -eleOffsetTop);const pdf = new jsPDF('', 'pt', 'a4');const childrenBox = Array.from(ele.children);const pdfItem = []for (let i = 0; i < childrenBox.length; i++) {pdfItem.push(...Array.from(childrenBox[i].children))}for (let i = 0; i < pdfItem.length; i++) {const res = await html2canvas(pdfItem[i] as HTMLElement, {dpi: 300,useCORS: true,scale: 4,});const pageData = res.toDataURL('image/jpeg', 1.0);const contentWidth = res.width;const contentHeight = res.height;const imgWidth = 555.28;const imgHeight = (552.28 / contentWidth) * contentHeight;pdf.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight);// 添加頁碼（居中底部）const pageNum = i + 1;const pageCount = pdfItem.length;pdf.setFontSize(8);pdf.setTextColor(96, 98, 102); // 設置字體顏色為 #606266 (RGB: 96, 98, 102)pdf.text(`- ${pageNum} / ${pageCount} -`, pdf.internal.pageSize.getWidth() / 2, pdf.internal.pageSize.getHeight() - 10, {align: 'center'});if (i < pdfItem.length - 1) {pdf.addPage();}}pdf.save(`${title}.pdf`);};app.config.globalProperties.htmlToPdfPrint = async function (name: string, title: string): Promise<void> {const ele = document.querySelector(`#${name}`) as HTMLElement;if (!ele) {console.error(`Element with id '${name}' not found.`);return;}const eleW = ele.offsetWidth;const eleH = ele.offsetHeight;const eleOffsetTop = ele.offsetTop;const eleOffsetLeft = ele.offsetLeft;const canvas = document.createElement('canvas');let abs = 0;const win_in = document.documentElement.clientWidth || document.body.clientWidth;const win_out = window.innerWidth;if (win_out > win_in) {abs = (win_out - win_in) / 2;}canvas.width = eleW * 2;canvas.height = eleH * 2;const context = canvas.getContext('2d');if (!context) return;context.scale(2, 2);context.translate(-eleOffsetLeft - abs, -eleOffsetTop);const pdf = new jsPDF('', 'pt', 'a4');const childrenBox = Array.from(ele.children);const pdfItem = [];for (let i = 0; i < childrenBox.length; i++) {pdfItem.push(...Array.from(childrenBox[i].children));}for (let i = 0; i < pdfItem.length; i++) {const res = await html2canvas(pdfItem[i] as HTMLElement, {dpi: 300,useCORS: true,scale: 4,});const pageData = res.toDataURL('image/jpeg', 1.0);const contentWidth = res.width;const contentHeight = res.height;const imgWidth = 555.28;const imgHeight = (552.28 / contentWidth) * contentHeight;pdf.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight);// 添加頁碼（居中底部）const pageNum = i + 1;const pageCount = pdfItem.length;pdf.setFontSize(8);pdf.setTextColor(96, 98, 102); // 設置字體顏色為 #606266 (RGB: 96, 98, 102)pdf.text(`- ${pageNum} / ${pageCount} -`, pdf.internal.pageSize.getWidth() / 2, pdf.internal.pageSize.getHeight() - 10, {align: 'center'});if (i < pdfItem.length - 1) {pdf.addPage();}}// 👉 自動打開打印預覽并調用 print()const blob = pdf.output('blob');const blobUrl = URL.createObjectURL(blob);// 👉 創建隱藏 iframeconst iframe = document.createElement('iframe');iframe.style.display = 'none';iframe.src = blobUrl;document.body.appendChild(iframe);iframe.onload = function () {setTimeout(() => {iframe.contentWindow?.focus();iframe.contentWindow?.print();}, 300);}}}
}

上面工具類中有兩個方法：htmlToPdfInstall 是將html轉化成PDF并在瀏覽器下載；htmlToPdfPrint 是將html轉化成PDF然后實現打印預覽，這兩個方法的轉化PDF都是 html2canvas 進行轉化，區別是一個是瀏覽器下載，一個是預覽打印，并且兩個都添加了分頁效果。

全局注冊htmlToPdf工具

在main.ts中注冊函數

// html轉PDF
import htmlToPdf from '@/utils/htmlToPdf';
const app = createApp(App)
app.use(htmlToPdf)
app.mount('#app1')

在global.d.ts中添加如下代碼：

import { ComponentCustomProperties } from 'vue';declare module '@vue/runtime-core' {interface ComponentCustomProperties {htmlToPdfInstall: (name: string, title: string) => Promise<void>;htmlToPdfPrint: (name: string, title: string) => Promise<void>;}
}

編寫頁面樣式

html代碼

<!--  報名信息導出預覽  --><div v-if="isRegisterInfo" class="register_pdf_view_warp"><div class="register_pdf_view_title">報名信息預覽</div><div class="register_pdf_view_btn"><el-buttontype="warning"plainsize="small"@click="printPDF":loading="exportLoading"><Icon icon="ep:view" class="mr-5px"/>打印預覽</el-button><el-buttontype="primary"plainsize="small"@click="exportPDF":loading="exportLoading"><Icon icon="ep:download" class="mr-5px"/>下載</el-button><Icon icon="ep:circle-close" color="#303133" @click="closeRegisterInfo" size="20" class="preview_close_icon"/></div><div ref="registerPdfView" class="register_pdf_view_con"><div id="contentToExport"><div v-for="(item,index) in teamAndMemberInfo" :key="index" class="register_pdf_view_item"><div v-for="(member, i) in item.memberTotalPages" :key="i" class="register_pdf_view_item_table"><div class="register_pdf_view_item_title"><el-row :gutter="10"><el-col :span="12"><span class="register_pdf_team_info_label">參&nbsp;賽&nbsp;隊：</span><span>{{item.teamName}}</span></el-col></el-row><el-row :gutter="10"><el-col :span="12"><span class="register_pdf_team_info_label">領&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隊：</span><span>{{item.leader}}</span></el-col><el-col :span="12"><span class="register_pdf_team_info_label">聯系電話：</span><span>{{item.leaderPhone}}</span></el-col></el-row><el-row :gutter="10"><el-col :span="12"><span class="register_pdf_team_info_label">主&nbsp;教&nbsp;練：</span><span>{{item.coach}}</span></el-col><el-col :span="12"><span class="register_pdf_team_info_label">聯系電話：</span><span>{{item.coachPhone}}</span></el-col></el-row><el-row :gutter="10"><el-col :span="12"><span class="register_pdf_team_info_label">助理教練：</span><span>{{item.assistantCoach}}</span></el-col><el-col :span="12"><span class="register_pdf_team_info_label">隊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;醫：</span><span>{{item.teamDoctor}}</span></el-col></el-row></div><el-table border:cell-style="{ textAlign: 'center' }":header-cell-style="{textAlign: 'center',background: 'var(--el-table-row-hover-bg-color)',color: 'var(--el-text-color-primary)'}":data="item['memberList'+ i]":stripe="true":show-overflow-tooltip="true"><el-table-column type="index" label="序號" width="60"/><el-table-column prop="role" label="身份"/><el-table-column prop="name" label="姓名" width="100"/><el-table-column prop="sex" label="性別" width="60"/><el-table-column prop="hbw" label="身高/體重" width="120"/><el-table-column prop="raceNum" label="比賽號碼" width="100"/><el-table-column prop="idCard" label="身份證號" width="180"/><el-table-column prop="clothNum" label="服裝號碼" width="90"/></el-table></div><div v-for="(photo, i) in item.photoTotalPages" :key="i" class="register_pdf_view_item_list_warp"><div class="register_pdf_view_item_list_title">隊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：{{item.teamName}}</div><div class="register_pdf_view_item_list"><div v-for="item1 in item['photoInfoList' + i]" :key="item1" class="register_pdf_view_item_list_item_warp"><el-image class="list_item_img" fit="contain":src="item1.imagePath" :preview-src-list="[item1.imagePath]" /><div class="list_item_info_warp"><span class="list_item_role">{{item1.role}}：</span><span class="list_item_name">{{item1.name}}</span></div><div class="list_item_info_id_card">{{item1.idCard}}</div><div v-if="item1.raceNumber" class="list_item_info_race_number">號碼：{{item1.raceNumber}}</div></div></div></div></div></div></div></div>

ts代碼

// 報名信息預覽
const closeRegisterInfo = () => {isRegisterInfo.value = false
}// 預覽pdf
const printPDF = () => {message.warning("報名表打印預覽生成中，請耐心等待...")htmlToPdfPrint?.('contentToExport', '【'+ currentCompetition.value.matchName +'】報名信息表');
}// 導出pdf
const exportPDF = () => {message.warning("報名表導出中，請耐心等待...")htmlToPdfInstall?.('contentToExport', '【'+ currentCompetition.value.matchName +'】報名信息表');
}const pageSize = 24; // 每頁大小
// 預覽報名信息
const viewRegisterInfo = async () => {try {if (currentEvent.value.id){teamAndMemberInfo.value = await SmallEventRegisterTeamApi.getRegisterTeamAndMemberInfo(currentEvent.value.id);// 分頁teamAndMemberInfo.value.forEach(item => {// 人員信息分頁const memberTotalPages = Math.ceil(item.memberList.length / pageSize);item['memberTotalPages'] = memberTotalPagesfor (let i = 0; i < memberTotalPages; i++) {const start = i * pageSize;const end = start + pageSize;item[`memberList${i}`] = item.memberList.slice(start, end);}// 頭像信息分頁const photoTotalPages = Math.ceil(item.photoInfoList.length / pageSize);item['photoTotalPages'] = photoTotalPagesfor (let i = 0; i < photoTotalPages; i++) {const start = i * pageSize;const end = start + pageSize;item[`photoInfoList${i}`] = item.photoInfoList.slice(start, end);}})}else {message.error("請先選中項目,然后進行導出操作!!!")}} finally {isRegisterInfo.value = !isRegisterInfo.value}
}

提示：上面獲取預覽信息的數據來自于后端，這里進行數據處理，默認每頁是24條數據，如果超出24條就直接換到下一頁，這個大家可以根據自己的數據大小和多少動態的計算

CSS代碼

這里其實對專業前端來說，小菜一碟。

.register_pdf_view_warp {position: absolute;top: 10px;left: 10px;width: 880px;padding: 15px;background-color: #FAFAFA;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);z-index: 999;height: 80vh;
}.register_pdf_view_title {font-size: 18px;font-weight: 600;color: #303133;margin-bottom: 15px;
}.register_pdf_view_con {overflow-x: auto;height: 90%;
}.register_pdf_view_item_table, .register_pdf_view_item_list_warp {border: 1px solid #f2f2f2;padding: 10px;margin-bottom: 10px;background-color: #fff;position: relative;height: 1210px;
}.register_pdf_view_item_title {width: 90%;color: #303133;font-size: 16px;margin: 20px 0 20px;padding: 0 20px;
}.register_pdf_view_item_list {display: grid;justify-content: center;grid-template-columns: repeat(4, 1fr);align-items: center;column-gap: 10px;row-gap: 10px;
}.list_item_img {width: 80px;height: 110px;
}.register_pdf_view_btn {position: absolute;top: 10px;right: 10px;display: flex;gap: 20px;
}.register_pdf_view_item_list_item_warp {text-align: center;color: #303133;font-size: 14px;
}.register_pdf_team_info_label {display: inline-block;width: 94px;text-align: justify;text-align-last: justify;line-height: 35px;
}.register_pdf_view_item_list_title {font-size: 16px;margin: 20px 0;padding-left: 20px;
}/* Webkit 瀏覽器：Chrome / Edge / Safari */
.register_pdf_view_con::-webkit-scrollbar {width: 8px; /* 垂直滾動條寬度 */height: 8px; /* 水平滾動條高度 */
}.register_pdf_view_con::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.2); /* 滾動條拖動塊顏色 */border-radius: 4px;
}.register_pdf_view_con::-webkit-scrollbar-track {background-color: transparent; /* 滾動條軌道顏色 */
}/* 鼠標懸浮時滾動條更明顯 */
.register_pdf_view_con::-webkit-scrollbar-thumb:hover {background-color: rgba(0, 0, 0, 0.3);
}