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

Question

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

这个基于 javascript 的图表位于 ID 为 chart-0 的 Canvas 元素中

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

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

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

我正在使用 javascript 函数:

window.print();

打印包含 Canvas 元素“chart-0”的“PrintArea”div 元素，因为通过这种方式，它可以打印出 Chart.js javascript 图表以及“PrintArea”div 中的所有其他 html 内容。

这个网页工作正常，它在过去 4 年中打印出网页的一部分(“PrintArea”div)没有任何问题。

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

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

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

请帮忙。

Answer 1

我在 Angular 9 和 chartJs 2 中遇到了完全相同的问题。对我有用的是将它放在 css 中:

@media print {
html, body {
    display: inline-block;
  }
}