javascript - html2canvas 在不同的窗口大小上捕获一个全屏大小的chart.js-Chart

Question

我想用 html2canvas 创建的图像生成 PDF。我网站上的基本组件如下：

在全屏浏览器上生成的 PDF 如下所示：

如果我调整窗口大小，组件现在看起来像这样

PDF 现在看起来像这样：

我的问题是，无论您使用哪种窗口大小，我都希望这两个图表在 PDF 中看起来相同。文本已经正确呈现，因为我添加windowHeight: "1080px", windowWidth: "1920px"了 html2canvas 的选项，如下所示：

let dataURL;
await html2canvas(document.getElementById(id), {
  windowHeight: "1080px",
  windowWidth: "1920px",
}).then(canvas => 
  dataURL = canvas.toDataURL()
)
return dataURL

不知何故，图表并没有据此改变它们的大小。

我该如何解决这个问题？

标签： javascripthtmlreactjschart.jshtml2canvas

Answer 1

解决方案1：

（无法添加评论，因此列出潜在的解决方案作为答案）我在工作中遇到了类似的问题。这就是我解决它的方法：

1. 通过转换为 base64 并保存它们，将每个图表收集为单独的图像。
2. 拥有一个具有预定义布局的 pdf，使用 pdf 解析器将这些图像放置在预定位置。

这样pdf看起来总是一样的。

看起来，你也有数据......你可以在 json 中收集它们中的每一个，然后再次使用 PDF 解析器编写信息。

解决方案2：

当用户单击“打印/另存为 PDF：”时

1. 在具有预定高度/宽度的新窗口中打开同一页面（其中一切看起来都很好）。
2. 完全加载后触发打印。

这样你的 pdf 看起来总是一样的。