javascript - Chart.js - printing a webpage containing Chart.js canvas prints out hundreds of blank pages - Stack Overflow

admin管理员组

文章数量:1356084

I have a Chart.js javascript chart ( / ) placed on my web page.

This javascript based chart sits inside a Canvas element which has ID: chart-0

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

This canvas element is put inside a absolute div element with ID "Chart0" which has been put inside a parent/relative div element with ID "PrintArea".

When users click the "Print" button, javascript code which I wrote prints out the the div element "PrintArea" and its contents.

I was using the javascript function:

window.print();

to print the "PrintArea" div element containing the canvas element "chart-0" because this way, it could print out the Chart.js javascript chart as well as all other html contents inside the "PrintArea" div.

This web page was working fine, it was printing out the part of the web page ("PrintArea" div) without any problem for the last 4 years.

But recently, when users click the print button, the web browser is printing out the "PrintArea" div contents AS WELL AS printing out 715 blank web pages after it. This happens with both Chrome and Edge browsers.

I can see, the problem IS caused by the Chart.js canvas element because if I remove this Chart.js canvas element - "chart-0" from the web page, then the web browser only prints out the contents of the "PrintArea" without any errors.

So,... how do I fix this error? It looks like any webpages that I've created which contain Chart.js are now causing this sort of problem - printing out hundreds of blank pages, whether I use the web browser's default printing menu or javascript printing function.

Please help.

UPDATE: Jonathan's answer shown below solved the problem! Thank you,

I have a Chart.js javascript chart ( https://www.chartjs/ ) placed on my web page.

This javascript based chart sits inside a Canvas element which has ID: chart-0

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

This canvas element is put inside a absolute div element with ID "Chart0" which has been put inside a parent/relative div element with ID "PrintArea".

When users click the "Print" button, javascript code which I wrote prints out the the div element "PrintArea" and its contents.

I was using the javascript function:

window.print();

to print the "PrintArea" div element containing the canvas element "chart-0" because this way, it could print out the Chart.js javascript chart as well as all other html contents inside the "PrintArea" div.

This web page was working fine, it was printing out the part of the web page ("PrintArea" div) without any problem for the last 4 years.

But recently, when users click the print button, the web browser is printing out the "PrintArea" div contents AS WELL AS printing out 715 blank web pages after it. This happens with both Chrome and Edge browsers.

I can see, the problem IS caused by the Chart.js canvas element because if I remove this Chart.js canvas element - "chart-0" from the web page, then the web browser only prints out the contents of the "PrintArea" without any errors.

So,... how do I fix this error? It looks like any webpages that I've created which contain Chart.js are now causing this sort of problem - printing out hundreds of blank pages, whether I use the web browser's default printing menu or javascript printing function.

Please help.

UPDATE: Jonathan's answer shown below solved the problem! Thank you,

• javascript
• canvas
• chart.js

Share Improve this question Follow edited Jan 17, 2023 at 3:28 user3059325 asked Dec 16, 2022 at 6:01 user3059325user3059325 8511 silver badge77 bronze badges 1

• I am having the exact same problem. Could not find a solution yet. Tried to upgrade the chart.js version but then I have hundreds of peer dependency errors :( – sticky_elbows Commented Dec 19, 2022 at 15:52

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

So far, none of the answers worked for me; however, using a bination of them yielded:

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

which worked for me. A user just reported this issue to me, and updating my code from v2 to v4 would have required a giant rewrite.

I had the exact same issue with Angular 9 and chartJs 2. What worked for me is putting this in the css:

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

Inspecting the CSS added to the page by chart.js, there is a div with 1000000px height and width which is not properly hidden.

Jonathan's answer above to override the chartjs-size-monitor position is the best solution if you can't upgrade to the latest version.

I also face this same issue using React-chartjs-2. If I remove the chart and only try to print a table of data it works like intended. But with any of my charts present i get about 680 blank pages. The problem is only present in Chrome and possibly Edge and other chrome-based browsers. It works fine in both Firefox and Safari.

I found this other question about the same topic. here that has a solution that might work in some cases, by making the chart's position fixed.

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

This will not work for me since my report has multiple graphs and tables of data, so fixing the position will mess everything up. But if you only need to print one single chart it could be a temporary workaround.

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

本文标签：