canvas导出pdf需经渲染→图像/矢量→封装链路；高质量关键在清晰度、可读性、合理分页；html2canvas需放大再缩放、高质png、cors配置；文本应元数据记录+jspdf重绘；长图须逻辑分页重绘；复杂场景推荐服务端渲染或pdf-lib手动构造。
Canvas 本身不能直接输出 PDF，必须借助前端库或服务端渲染完成“渲染→图像/矢量→PDF 封装”这一链路。要获得高质量预览图，核心是控制清晰度、保留可读性、合理分页，并避免像素模糊和文字失真。
提升截图清晰度的关键设置
html2canvas 是最常用的前端截图方案，但默认导出易模糊。关键操作包括：
- 将 Canvas 临时放大（例如 width/height 设为原尺寸的 2 倍），再用
scale缩放回原始逻辑尺寸，相当于提高采样率 - 调用
toDataURL('image/png', 1.0)保持最高压缩质量，避免 JPEG 引入噪点 - 设置
useCORS: true和allowTaint: false，防止跨域资源被截断或降质 - 确保 Canvas 的
width和height属性为整数且与 CSS 渲染尺寸一致，避免浏览器自动缩放拉伸
文字不变成马赛克：分离处理文本层
Canvas 绘制的 fillText 截图后是位图，PDF 中无法选中、搜索、缩放不失真。解决办法不是“修图”，而是从源头区分：
- 在绘制时同步记录每个文本块的
x, y, text, font, fillStyle等元数据，存入数组 - 导出 PDF 时，跳过截图中的文字区域，改用 jsPDF 的
text()方法按坐标重绘，字体大小单位统一为 pt - 对含中文的场景，提前用
jsPDF.setFont('simhei')加载自定义字体，否则会显示为空白或方块
分页不割裂内容：按逻辑坐标切片
长图表（如流程图、时间轴）不能靠“拉伸截图+硬裁剪”，否则线条断裂、文字错位。正确做法是：
- 以 A4 页面可用区域为准（595×842 pt），结合 Canvas 当前缩放比，计算每页能容纳的逻辑高度
- 用
ctx.save() → ctx.translate(0, -pageTop) → renderPage() → ctx.restore()分段重绘，每次只画可视区域 - 每段生成独立 canvas，再逐个
addImage到 jsPDF，比单张大图分页更稳定、内存占用更低
更稳更清的进阶选择
纯前端在复杂图表或高 DPI 输出时容易卡顿、崩溃。可考虑轻量级增强方案：
- 前端仅序列化绘图指令（JSON 格式：路径点、文字、颜色等），发给 Node.js 服务端，用 Puppeteer 或 node-canvas 重新绘制并生成 PDF —— 支持字体嵌入、无内存压力
- 离线环境可用
pdf-lib+ Canvas 像素数据手动构造 PDF 对象，但需自行处理字体子集、压缩和坐标映射 - 导出前加预览：生成 Blob URL 并用
<iframe src="blob:..."></iframe>快速查看效果，确认无锯齿、无错位再下载
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
