使用jsPDF+html2canvas转PDF时，Logo与日期字段无法捕获怎么办？

已花费数小时寻找解决方案但毫无进展，使用jsPDF结合html2canvas生成PDF图片时，无法捕获页面中的Logo和日期字段。尝试将日期输入框的内容转为字符串，以及添加JavaScript日期处理逻辑，但均未奏效。

界面截图：

原代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
function onClick() {
    html2canvas(document.body, {
    onrendered: function(canvas) {

    var img = canvas.toDataURL("image/png");
    var doc = new jsPDF();
    doc.setFontSize(40);
    doc.addImage(img, 'JPEG', -95, -10);
    doc.save('Authorization To Close Account.pdf');
    doc.autoPrint('Authorization To Close Account.pdf');
    }

    });
};

var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);
</script>

1. 升级依赖版本 #

你当前使用的html2canvas 0.4.1和jsPDF 1.3.5版本过于老旧，对现代HTML元素（如input[type=date]、跨域图片）的支持存在缺陷。直接替换为最新稳定版：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

2. 处理跨域Logo图片 #

如果Logo来自第三方域名，需要在html2canvas配置中开启跨域支持，否则图片无法被渲染：

html2canvas(document.body, {
  useCORS: true, // 允许加载跨域图片
  allowTaint: true // 允许渲染包含跨域内容的画布（按需启用）
})

3. 修复日期输入框捕获问题 #

旧版html2canvas无法正确读取日期输入框的显示值，可在渲染前临时将输入框替换为纯文本元素，渲染完成后再恢复：

function onClick() {
  // 临时替换日期输入框为文本节点
  const tempElements = [];
  document.querySelectorAll('input[type="date"]').forEach(input => {
    if (input.value) {
      const span = document.createElement('span');
      span.textContent = input.value;
      span.style.cssText = getComputedStyle(input).cssText;
      tempElements.push({ input, span });
      input.parentNode.replaceChild(span, input);
    }
  });

  // 执行渲染
  html2canvas(document.body, { useCORS: true }).then(canvas => {
    // 恢复原日期输入框
    tempElements.forEach(item => {
      item.span.parentNode.replaceChild(item.input, item.span);
    });

    // 生成PDF
    const img = canvas.toDataURL("image/png");
    const doc = new jspdf.jsPDF();
    doc.setFontSize(40);
    doc.addImage(img, 'PNG', -95, -10); // 用PNG格式避免JPEG压缩失真
    doc.save('Authorization To Close Account.pdf');
    doc.autoPrint();
  });
};

4. 优化渲染范围与参数 #

避免直接渲染整个document.body，可指定具体的容器元素，同时添加参数确保元素完整捕获：

html2canvas(document.getElementById('pdf-container'), {
  useCORS: true,
  scrollX: 0,
  scrollY: 0,
  windowWidth: document.documentElement.offsetWidth,
  windowHeight: document.documentElement.offsetHeight
})

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