PdfGenerator on page using liveview components

Phoenix Forum Questions / Help
,
1

Background
I’m trying to generate a PDF of a page which contains 3 LiveView components. I’m using the PdfGenerator library to do this.

Problem
There’s two seperate problems.

  1. I want to generate the PDF with a landscape orientation, however I can’t seem to find any options to give the PDF a landscape orientation. Does anyone with more experience on this library know how to do this?
  2. When I generate the PDF, it doesn’t show any of the LiveView components. What would be the proper way to solve this?

The page looks like this:

Screenshot 2022-05-19 at 13.48.40
Screenshot 2022-05-19 at 13.48.401200×590 44.3 KB

The three charts are the LiveView components.

The PDF looks like this:

Screenshot 2022-05-19 at 13.52.47 1
Screenshot 2022-05-19 at 13.52.47 1989×741 31.3 KB

(I had to redact some of the information)

How would I go about this?

2

What data are you feeding into the PdfGenerator (html, url) and which engine are you using (wkhtmltopdf, puppeteer)?

I can only speculate that the pdf renderer might not see the full page with the charts. This can happen for many reasons:

  1. Data is coming to the live component only after socket connection, and in the dead view the page is empty.
  2. PDF renderer doesn’t know that it needs to wait for socket connection, or even can’t do it.
  3. Charts are rendered by some JS library. PDF renderer also either can’t do it or doesn’t know that it needs to wait for it to happen.
3

I’ve solved this problem by replacing the liveviews with a regular canvas and adding a JS file to the template to draw the chart. I’m also using a node.js script with Puppeteer instead of the PdfGenerator library to generate the pdf and calling the script using System.cmd/3.

Thanks for your help :slight_smile: