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

【问题标题】：html2canvas not rendering properly (overlapping color)html2canvas 无法正确呈现（重叠颜色）
【发布时间】：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 样式表有关？如果您可以添加一个最小的可预生产示例stackoverflow.com/help/minimal-reproducible-example，将会很有帮助
它与侧边栏有关。当侧边栏可见时，颜色会重叠。当侧边栏被隐藏/移除时，颜色不会重叠。
我发现了问题，它是由于宽度大小。

标签： html css angular html2canvas jsdoc

【解决方案1】：

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

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

【讨论】：