# Transform the content children of an app in a PDF file

**URL:** <https://community.plotly.com/t/transform-the-content-children-of-an-app-in-a-pdf-file/49419>\
**Category:** Dash Python\
**Created:** [January 27, 2021, 10:06pm UTC](https://community.plotly.com/t/transform-the-content-children-of-an-app-in-a-pdf-file/49419 "2021-01-27T22:06:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kabure](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/kabure/32/19351_2.png) [@kabure](https://community.plotly.com/u/kabure)\
**Post date:** [January 27, 2021, 10:06pm UTC](https://community.plotly.com/t/transform-the-content-children-of-an-app-in-a-pdf-file/49419/1 "2021-01-27T22:06:11Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/8249f388d4d0d2be0cf7dfd3e732d87a5021f33b.png)

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,

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [January 28, 2021, 9:04pm UTC](https://community.plotly.com/t/transform-the-content-children-of-an-app-in-a-pdf-file/49419/2 "2021-01-28T21:04:08Z")

</div>

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/](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:

```auto
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.