html转pdf图片失真怎么调_调html转pdf图片质【建议】

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% 的 ），导致像素丢失。必须显式传入 scale 并禁用 useCORS 外的干扰项：

• scale 设为 2 或更高（对应设备像素比），但需同步设置 width/height 为原始尺寸 × scale，否则 canvas 内部仍按 CSS 尺寸渲染
• 确保图片本身是高清源（如 src 指向 @2x.png 或 SVG），且没有 inline style="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 是内联写法（），且无外部 引用；避免 background-image: url(...svg)，这种一定会被光栅化
• 检查是否启用了 --no-pdf-compression —— 压缩本身不伤 SVG，但某些版本 bug 会导致 SVG 解析失败后退化为位图

真正卡住多数人的，是以为“调高 DPI 就行”，结果发现 logo 还是糊的——那张图片大概率是 200×200 像素却被 CSS 拉到 400×400，而所有工具都忠实地把它双线性插值了。根源不在转换工具，在 HTML 里那行

style="width: 100%"。