HTML转PDF图片失真主因是渲染中多次缩放采样或未尊重原始分辨率，需控制html2canvas/pdfmake/wkhtmltopdf的像素处理逻辑：html2canvas须设scale≥2并同步宽高；wkhtmltopdf需--dpi 300与--zoom 2；SVG应内联或以字符串传入避免光栅化。
HTML 转 PDF 时图片失真，根本原因不是“压缩开关没开”，而是渲染流程中图像被多次缩放、采样降质，或原始分辨率未被尊重。关键在控制 html2canvas 或 pdfmake / wkhtmltopdf 的像素处理逻辑，而非单纯调高 DPI。
用 html2canvas + jsPDF 时图片模糊？先关掉自动缩放
html2canvas 默认会将 canvas 缩放到容器尺寸（比如 width: 100% 的 <img>），导致像素丢失。必须显式传入 scale 并禁用 useCORS 外的干扰项：
-
scale设为2或更高（对应设备像素比），但需同步设置width/height为原始尺寸 × scale，否则 canvas 内部仍按 CSS 尺寸渲染 - 确保图片本身是高清源（如
src指向@2x.png或 SVG），且没有 inlinestyle="width: 200px; height: auto"强制拉伸 - 禁用
logging: true和allowTaint: true—— 后者可能触发降级渲染路径
html2canvas(element, {
scale: 2,
width: element.scrollWidth * 2,
height: element.scrollHeight * 2,
useCORS: true,
logging: false,
allowTaint: false
}).then(canvas => { ... });
wkhtmltopdf 导出图片发虚？重点调这 3 个参数
wkhtmltopdf 不是“截图工具”，而是基于 WebKit 渲染后光栅化。失真多因默认使用低分辨率字体和位图缩放：
-
--dpi 300必须加，但仅对文本和矢量有效；位图图片仍按原始尺寸嵌入，所以图片本身要够大 -
--zoom 2比--dpi更直接：它放大整个页面再渲染，等效提升图像采样密度（注意：CSS 媒体查询会重新匹配） - 禁用
--enable-local-file-access外的资源限制，否则图片加载不全会导致 fallback 占位图被拉伸
命令示例：
立即学习“前端免费学习笔记（深入）”；
wkhtmltopdf --dpi 300 --zoom 2 --format A4 input.html output.pdf
SVG 图片在 PDF 里变锯齿？别让它被转成位图
wkhtmltopdf 和旧版 pdfmake 会把 SVG 当作 img 标签内容，直接光栅化成 PNG —— 这是失真的主因。解决路径只有两条：
- 若用
pdfmake：改用svg类型节点，传入原始 SVG 字符串（不是 URL），它会保留矢量路径 - 若用
wkhtmltopdf：确保 SVG 是内联写法（<svg>...</svg>），且无外部<use href="...">引用；避免background-image: url(...svg)，这种一定会被光栅化 - 检查是否启用了
--no-pdf-compression—— 压缩本身不伤 SVG，但某些版本 bug 会导致 SVG 解析失败后退化为位图
真正卡住多数人的，是以为“调高 DPI 就行”，结果发现 logo 还是糊的——那张图片大概率是 200×200 像素却被 CSS 拉到 400×400，而所有工具都忠实地把它双线性插值了。根源不在转换工具，在 HTML 里那行 style="width: 100%"。
