Transform the content children of an app in a PDF file

Dash Python
1

Hey Guys,

I’m trying to find a way to convert an entire html.Div children to a PDF file.

The idea is to allow the user to take a “picture” of the analysis he created and share it with teammates, stakeholders, friends, or whatever.

for example:

image
image1223×840 76 KB

When the user does click on the “download pdf” button, it will take all the content inside of the dashed border;

I read a lot of topics and questions about it but no one seems working as I need… I found alternatives that transform only the Plotly Chart into a .pdf file, but not the entire content div.

Any help or suggestions are very welcome and I will appreciate it a lot to know alternatives to solve this problem (even React components that could be it).

Regards,

2

Hi @kabure

I’ve also searched for this and haven’t found a good solution. (Well, other than Dash Enterprise ).

But here is something that may work depending on how an app is designed. It’s a simple clientside callback that opens the browser’s Print Dialog Box, which lets the user select printing options - including saving as a PDF.

You can see it in action at https://www.wealthdashboard.app/ (The print button is at the bottom of the page)

Here is the button in the layout:
html.Button('Print',id='print')

Here is the callback:

app.clientside_callback(
    """
    function(n) {
        if (n > 0) {
          window.print()
        }
        return ""
    }
    """,
    Output('print', 'title'),
    Input('print', 'n_clicks'),
)

Since it’s necessary to have an Output for a Dash callback, I just selected some unused parameter for the dummy output - in this case I used the title parameter of the html.Button .

It would be nice to be able to set defaults for the print dialogue options, like include Background Graphics and exclude Headers and Footers. But apparently these things aren’t part of a standard API for browsers (yet?). Some options like margins, page orenientation etc can be set with css.

I know this isn’t exactly what you are looking for, but others may find it helpful.

1 Like