Skip to main content
Version: 9.x

Report with JavaScript charts

You have a report page whose charts draw with JavaScript, a second after it loads. You want an A4 PDF with the charts drawn, the report's title at the top of each page and page numbers at the bottom.

Request​

curl \
  --request POST http://localhost:3000/forms/chromium/convert/html \
  --form files=@index.html \
  --form files=@header.html \
  --form files=@footer.html \
  --form waitForSelector=#chart.ready \
  --form paperSize=A4 \
  --form marginTop=1in \
  --form marginBottom=1in \
  -o report.pdf

Result​

The PDF shows "Revenue: 42,000 EUR", not "Loading…", with "Sales report" above and "Page 1 of 1" below.

How it works​

  • The page's script adds the class ready to #chart once it draws, and waitForSelector waits for it: see Wait for the page.
  • header.html prints the page's <title>, and footer.html the page numbers: see Add headers and footers.
  • The one-inch margins make room for both.

Variations​

  • The page sets a global when it's ready: waitForExpression: "window.chartReady === true".
  • The charts fetch their data: add skipNetworkIdleEvent: false.
  • A live dashboard: send its url to /forms/chromium/convert/url with the same fields, and its session in cookies.