PDF 下载弹窗 content 区域可行性方案
需求：按钮点击下载弹窗 content 内容为 PDF
实现方案：
获取弹窗 content 的 DOM 元素：通过ref获取需要截图的内容区域。
将 DOM 转换为图片：使用 html2canvas 库将 DOM元素渲染为 Canvas ，在转换为图片。
将图片生成PDF：使用 jspdf 库创建 PDF 文档，将图片添加到 PDF 中。
触发 PDF 下载：通过 jspdf 的 API 生成 PDF 文件并触发浏览器下载。
1.安装依赖
npm install html2canvas jspdf --save2.组件实现
核心是给弹窗的 content 区域添加和 ref，并绑定下载按钮的点击事件：
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';// 逻辑部分
// 创建ref用于获取content区域的DOM
const contentRef = useRef(null);// 下载PDF的核心函数
const downloadAsPDF = async () => {// 1. 检查content区域是否存在if (!contentRef.current) return;try {// 2. 使用html2canvas将DOM转为Canvasconst canvas = await html2canvas(contentRef.current, {useCORS: true, // 解决跨域图片问题scale: 2, // 缩放比例，提高清晰度（默认1，2表示2倍分辨率）logging: false // 关闭控制台日志});// 3. 将Canvas转为图片数据const imgData = canvas.toDataURL('image/png');// 4. 创建PDF文档（A4尺寸，纵向）const pdf = new jsPDF('p', 'mm', 'a4');// 获取A4纸的尺寸（单位：mm）const a4Width = 210; const a4Height = 297;// 获取图片的实际尺寸（单位：px）const imgWidth = canvas.width; const imgHeight = canvas.height;// 计算图片在PDF中的缩放比例（保持宽高比，适应A4宽度）const scale = a4Width / imgWidth; const pdfImgHeight = imgHeight * scale;// 5. 将图片添加到PDF（x=0, y=0，宽度为A4宽度，高度按比例计算）pdf.addImage(imgData, 'PNG', 0, 0, a4Width, pdfImgHeight);// 6. 触发下载（文件名自定义）pdf.save('弹窗内容.pdf');} catch (error) {console.error('下载PDF失败：', error);}};
// DOM部分
return （<><Modaltitle="查看AI评估"open={aiResumeModalOpen}footer={null}centeredonCancel={handleCancel}width={1000}classNames={{content: styles.myContent,header: styles.filterHeader,body: styles.filterBody,}}footer={<Button onClick={downloadAsPDF}>PDF下载</Button>}><div ref={contentRef}><Flex vertical gap={30} className={styles.filterBody}><ApplyPeopleHead applyDetail={selectApplyDetail} /><ApplyPeopleAiResume selectApplyDetail={selectApplyDetail} /></Flex></div></Modal></>
）3.分页处理（可选）
如果 content 内容超过一页 A4 纸，可通过计算高度分割图片为多页：
// 在添加图片时判断是否需要分页
const totalPages = Math.ceil(pdfImgHeight / a4Height); // 计算总页数
let yPosition = 0; // 当前页的Y轴起始位置for (let i = 0; i < totalPages; i++) {pdf.addImage(imgData, 'PNG', 0, yPosition, a4Width, pdfImgHeight);if (i < totalPages - 1) {pdf.addPage(); // 新增一页yPosition = -a4Height * i; // 调整下一页图片的起始位置}
}