dom-to-image导出PDF时，值在10-20区间报错问题求助

使用dom-to-image结合jsPDF导出PDF时，当differenceView的绝对值处于10-20区间时，dom-to-image抛出错误。

代码片段 #

JavaScript 导出逻辑 #

const downloadPdf = async () => {
    domtoimage.toJpeg(document.getElementById('htmlToPdf'), { quality: 0.95 })
      .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        img.onload = function () {
          console.log(img)
          var pdf = new jsPDF();
          var width = pdf.internal.pageSize.getWidth();
          var height = pdf.internal.pageSize.getHeight();
          pdf.addImage(img, 'JPEG', 0, 0, width, height);
          pdf.save('my-pdf-name.pdf');
        };
      })
      .catch(function (error) {
        console.error('Error:', error);
      });
}

相关HTML结构 #

<div class="-graphic-ratio">
    <div class="graphic-ratio-div">
        <label class={
            `chart-subtitle ${differenceView > 0
                ? 'label-positive'
                : differenceView === 0
                ? 'label-neutral'
                : 'label-negative'
            }`
        }>
            %{Math.abs(differenceView) || 0}
        </label>
    </div>
</div>

问题详述 #

当differenceView的值处于10至20区间时，dom-to-image会产生错误，求原因及解决方法。

• 布局波动触发渲染bug
  10-20区间的数值可能让label元素的宽高刚好达到临界值，导致dom-to-image在绘制canvas时出现坐标计算错误。
  解决：给.graphic-ratio-div设置固定宽高，强制布局稳定，避免数值变化引发元素尺寸波动。

• 模板语法未正确解析
  HTML中的%{Math.abs(differenceView) || 0}如果未被前端框架编译为纯数字，dom-to-image会把这段模板字符串当作普通文本处理，特定字符组合可能触发渲染异常。
  解决：导出前手动替换label内容为计算后的数值：

  // 调用domtoimage前执行
  const labelEl = document.querySelector('.chart-subtitle');
  labelEl.textContent = `${Math.abs(differenceView) || 0}%`;
  

• dom-to-image版本兼容性问题
  部分旧版本的dom-to-image对特定长度的数字文本渲染存在缺陷。
  解决：

  1. 升级dom-to-image到最新版；
  2. 替换为html2canvas（更稳定的HTML转Canvas工具）；
  3. 尝试改用domtoimage.toPng()替代toJpeg()，排除JPEG编码的特殊问题。

• CSS样式导致布局错乱
  label-positive/label-neutral/label-negative的样式（如字体大小、行高）可能在数值为10-20时引发元素溢出，导致dom-to-image渲染失败。
  解决：检查这些类的CSS规则，确保不同数值下元素布局一致；或临时移除样式后导出，验证是否为样式问题。

内容的提问来源于stack exchange，提问作者bbscoding