React项目中html2canvas截图异常：组件显示不全、颜色失真

一、Card组件仅显示水平一半的解决步骤 #

• 为html2canvas添加元素尺寸配置，确保完整捕获目标DOM：
  修改html2canvas的配置项，手动指定要捕获元素的宽高并提高缩放比例，避免裁剪和模糊：

html2canvas(input, {
  useCORS: true,
  scrollX: -window.scrollX,
  scrollY: -window.scrollY,
  width: input.offsetWidth,
  height: input.offsetHeight,
  scale: 2 // 提升缩放比例，优化捕获精度
})

• 检查Card组件的样式：确保没有设置overflow: hidden或固定宽度导致内容被截断，必要时在捕获前临时移除这类样式，完成后再恢复。

二、Info和Console组件颜色失真的解决步骤 #

• 排查并替换不兼容的CSS属性：html2canvas对filter、backdrop-filter、复杂渐变等属性支持有限，建议在捕获前临时将这些属性替换为兼容样式（比如将模糊背景换成纯色），捕获完成后再恢复原样式。
• 调整html2canvas的配置项：开启allowTaint并保持缩放比例，提升颜色渲染准确性：

html2canvas(input, {
  useCORS: true,
  scrollX: -window.scrollX,
  scrollY: -window.scrollY,
  allowTaint: true,
  scale: 2
})

• 移除transform属性：如果组件使用了transform布局，可能导致颜色渲染异常，尝试替换为传统的margin、padding等布局方式。

三、优化PDF生成适配 #

调整jsPDF的参数，确保图片完全适配A4纸尺寸，避免因缩放导致的显示问题：

const pdf = new jsPDF("p", "mm", "a4");
const pageWidth = pdf.internal.pageSize.getWidth();
const pageHeight = pdf.internal.pageSize.getHeight();
// 预留左右各10mm边距
const imgWidth = pageWidth - 20;
const imgHeight = (canvas.height * imgWidth) / canvas.width;

pdf.addImage(imgData, "PNG", 10, 10, imgWidth, imgHeight);
pdf.save("ok.pdf");

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