React中使用jsPDF下载PDF报base64字符串相关错误如何解决？

问题原因 #

html2canvas 生成画布的逻辑依赖浏览器对目标DOM的实际渲染结果，设置了display: none的元素会被浏览器直接跳过渲染流程，没有实际的像素绘制内容，因此调用canvas.toDataURL()时会生成无效的空数据，触发jsPDF的base64格式校验错误。

解决方案 #

可以任选以下任意一种方案修复：

方案1：替换隐藏方式（最推荐，无感知不影响原有布局） #

不要使用display: none，改用绝对定位将元素移出屏幕可视范围，既不会被用户看到，浏览器也会正常完成渲染：
修改待下载组件外层div的样式：

<div 
  style={{
    position: 'absolute',
    left: '-9999px',
    top: '-9999px',
    opacity: 0,
    pointerEvents: 'none',
    zIndex: -999
  }} 
  id='content'
>
  {invoiceData ? (
    <ComponentToPrint
      orderId={displayOrderNo}
      payResponse={invoiceData}
      ref={componentRef}
    />
  ) : null}
</div>

该方案无需修改下载逻辑，适配性最高。

方案2：临时切换显示状态，生成PDF后恢复隐藏 #

如果不想改动原有隐藏逻辑，可以在下载执行时临时显示元素，渲染完成后立即隐藏：
修改handlePdf方法：

const handlePdf = () => {
  const input = document.getElementById("content");
  // 临时显示元素供渲染
  input.style.display = 'block';
  html2canvas(input)
    .then((canvas) => {
      // 渲染完成立即恢复隐藏
      input.style.display = 'none';
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF('landscape', 'px', 'a4', 'false');
      pdf.addImage(imgData, 'PNG', 0, 0);
      pdf.save("download.pdf");
    })
    .catch(err => {
      // 异常场景也要恢复隐藏，避免元素意外暴露
      input.style.display = 'none';
      console.error('工资单PDF生成失败', err)
    })
}

方案3：通过html2canvas的克隆回调修改渲染节点 #

html2canvas提供了onclone回调，可以修改它内部克隆的DOM节点状态，完全不影响原页面的元素显示：

const handlePdf = () => {
  const input = document.getElementById("content");
  html2canvas(input, {
    onclone: (clonedDoc) => {
      // 仅修改克隆节点的显示属性，不改动原页面DOM
      clonedDoc.getElementById('content').style.display = 'block';
    }
  })
  .then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('landscape', 'px', 'a4', 'false');
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save("download.pdf");
  })
}

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