html2canvas 无法正确呈现（重叠颜色）

Posted 2023-03-05

【中文标题】html2canvas 无法正确呈现（重叠颜色）

【英文标题】：html2canvas not rendering properly (overlapping color)

【发布时间】：2020-01-19 10:03:23

【问题描述】：

我正在使用 html2canvas 和 jsDoc。我正在将我当前的组件 html 渲染为 pdf。 但是在我下载 pdf 后，其他组件的颜色不知何故与当前组件重叠。这是 Angular 组件。

截图：

应用程序的屏幕截图

pdf 查看器的屏幕截图（侧边栏可见）：

3. pdf 查看器的屏幕截图（侧边栏隐藏）： 您可以看到颜色从提交按钮到结束是重叠的。

代码：

  downloadPdf() 
    html2canvas(document.querySelector(".main-content")).then(canvas => 
      var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);
      var imgData = canvas.toDataURL("image/jpeg",1.0);
      pdf.addImage(imgData, 0, 0, canvas.width, canvas.height);
      pdf.save('image.pdf');
    );
  

猜猜为什么颜色会重叠？任何其他将 HTML 呈现为 pdf 的解决方案？

【问题讨论】：

一些猜测；也许这是一个焦点/悬停状态？也许它与print 样式表有关？如果您可以添加一个最小的可预生产示例***.com/help/minimal-reproducible-example

，将会很有帮助

它与侧边栏有关。当侧边栏可见时，颜色会重叠。当侧边栏被隐藏/移除时，颜色不会重叠。

我发现了问题，它是由于宽度大小。

【参考方案1】：

也许我的回答对某人有所帮助。我通过添加 scale 属性解决了类似的问题

html2canvas(document.querySelector('#preview_modal'), 
    allowTaint: false,
    useCORS: true,
    scale: 2,
)