CODEWITHSUNDEEP
javascriptgoogle-chromechartsgoogle-chrome-headless
collisionTwo
collisionTwo

Reputation: 929

Headless chrome print-to-pdf displays Chart.JS javascript canvas incorrectly

I'm trying to automatically print some webpages with a Chart.JS canvas element using headless chrome version 71 like so: start chrome --enable-logging --headless --disable-gpu --run-all-compositor-stages-before-draw --virtual-time-budget=10000 --print-to-pdf=C:\test.pdf example.html

The result when I print from PDF manually in the Chrome browser looks exactly like it does on the webpage: enter image description here

But in the PDF created from headless chrome the element is bizarrely changed: enter image description here

Is there a way to get headless chrome to print a PDF precisely as the actual browser would have done?

Upvotes: 4

Views: 1868

Answers (2)

Jacob
Jacob

Reputation: 1

The delay before printing can be managed to let the canvas finish loading by adjusting the parameter --virtual-time-budget=40000 Here the value is 40 sec. Printing will not wait that long but once every element is loaded in the page, the printing will perform (as my understanding). I had the same problem and adjusting --virtual-time-budget flag helped me. This is how I undrestand the use of this parameter. I found that the explanation is not so clear in: Chrome Headless mode

Upvotes: 0

fwBasic
fwBasic

Reputation: 162

The problem is that web browser gives as the page loaded before the canvas has finished, To avoid this should generate some additional loads

at the end of the HTML code

add:

if ( location.href.toUpperCase().indexOf("HTTP") != 0) {
 var delay = 1000; // Delaying up load (in milliseconds).
  delay = new Date().getTime() + delay,
  xhttp = new XMLHttpRequest();

 while (new Date().getTime() < delay ) {
  xhttp.open("GET", location.href, true);
  xhttp.send();
 }
}

Upvotes: 2

Related Questions