html2canvas img 和 pdf 反应中的背景颜色偏移

Question

ReactJS
我正在使用 html2canvas 将 div 转换为图像，然后转换为 pdf，但是在图像和 pdf 视图中，元素的背景颜色正在发生变化，因此文本的底部部分被剪切。

初见

转换为图片/pdf后 使用

（单击按钮时，调用函数）

const pdf = new jsPDF({
  orientation: 'portrait',
  unit: 'mm',
  format: 'a4',
});
html2canvas(page, { scale: 1 }) // Set scale to 1 to disable scaling
      .then(canvas => {
        console.log(canvas.toDataURL('image/jpeg'))
        pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0);
        pdf.save('page.pdf');
      });
  };

// 示例 HTML 法内吉克德

div 的样式（任何组件）=> {父 div => 相对，目标=> 绝对（允许拖动和更改位置）

Answer 1

Tailwind CSS设置img标签的display属性为display: block;在飞行前。这会在元素下方引入一个在 UI 渲染中看不到的换行符。但是，当您使用 html2canvas 将相同的 HTML 转换为图像时，会渲染换行符，从而在结果图像中添加不必要的空间。为了解决这个问题，我们可以在 tailwind.css 文件中添加以下代码。

@layer base {
  img {
    @apply inline-block;
  }
}

这是初步答案：

html2canvas 向下移动文本