Chart.js - 打印包含 Chart.js 画布的网页会打印出数百个空白页

Question

我的网页上放置了一个 Chart.js javascript 图表 ( https://www.chartjs.org/ )。

这个基于 javascript 的图表位于 Canvas 元素内，其 ID 为：chart-0

<canvas id="chart-0" height="380px"></canvas>

该canvas元素被放置在ID为“Chart0”的绝对div元素内，该绝对div元素已被放置在ID为“PrintArea”的父/相对div元素内。

当用户单击“打印”按钮时，我编写的 JavaScript 代码会打印出 div 元素“PrintArea”及其内容。

我正在使用 javascript 函数：

window.print();

打印包含画布元素“chart-0”的“PrintArea”div元素，因为这样，它可以打印出Chart.js javascript图表以及“PrintArea”div内的所有其他html内容。

这个网页工作正常，在过去 4 年里打印网页的一部分（“PrintArea”div）没有任何问题。

但最近，当用户单击打印按钮时，网络浏览器会打印出“PrintArea”div 内容，并打印出其后的 715 个空白网页。Chrome 和 Edge 浏览器都会出现这种情况。

我可以看到，问题是由 Chart.js 画布元素引起的，因为如果我从网页中删除这个 Chart.js 画布元素 - “chart-0”，那么 Web 浏览器只会打印出“PrintArea”的内容没有任何错误。

那么，...我该如何修复这个错误？看起来我创建的包含 Chart.js 的任何网页现在都会导致此类问题 - 打印出数百个空白页面，无论我使用 Web 浏览器的默认打印菜单还是 JavaScript 打印功能。

请帮忙。

更新： 下面显示的乔纳森的答案解决了问题！谢谢你，

Answer 1

到目前为止，没有一个答案对我有用；然而，使用它们的组合产生：

@media print {
  .chartjs-size-monitor{
    position:fixed !important;
  }
}

这对我有用。一位用户刚刚向我报告了这个问题，将我的代码从 v2 更新到 v4 将需要大量重写。

Answer 2

我在使用 React-chartjs-2 时也面临同样的问题。如果我删除图表并仅尝试打印数据表，它就会按预期工作。但我的任何图表都会有大约 680 个空白页。该问题仅存在于 Chrome 中，也可能存在于 Edge 和其他基于 Chrome 的浏览器中。它在 Firefox 和 Safari 中都运行良好。

我发现了关于同一主题的另一个问题。这里有一个在某些情况下可能有效的解决方案，通过固定图表的位置。

<div style={{position: "fixed"}}>
  <TotalConsumptionGraph/>
</div>

这对我来说不起作用，因为我的报告有多个图表和数据表，所以修复位置会让一切变得混乱。但如果您只需要打印一张图表，这可能是一种临时解决方法。

• React-chartjs-2：5.1.0
• Chart.js：4.1.1