# How does the Print PDF button works in vanguard report?

**URL:** <https://community.plotly.com/t/how-does-the-print-pdf-button-works-in-vanguard-report/14086>\
**Category:** Dash Python\
**Created:** [September 29, 2018, 8:06pm UTC](https://community.plotly.com/t/how-does-the-print-pdf-button-works-in-vanguard-report/14086 "2018-09-29T20:06:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sharmaji](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sharmaji/32/4173_2.png) [@sharmaji](https://community.plotly.com/u/sharmaji)\
**Post date:** [September 29, 2018, 8:06pm UTC](https://community.plotly.com/t/how-does-the-print-pdf-button-works-in-vanguard-report/14086/1 "2018-09-29T20:06:17Z")

</div>

I am making a dashboard app and I want to add the Print PDF button just like [https://vanguard-report.herokuapp.com/](https://vanguard-report.herokuapp.com/) report, can anyone please explain its working ?

---

<div class="post-metadata">

**Author:** ![jks](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jks/32/4005_2.png) [@jks](https://community.plotly.com/u/jks)\
**Post date:** [October 1, 2018, 2:37pm UTC](https://community.plotly.com/t/how-does-the-print-pdf-button-works-in-vanguard-report/14086/2 "2018-10-01T14:37:40Z")

</div>

If you look at the source code at

[https://github.com/plotly/dash-vanguard-report/blob/master/app.py](https://github.com/plotly/dash-vanguard-report/blob/master/app.py)

you will find links to various external resources including

> [https://codepen.io/bcd/pen/YaXojL.js](https://codepen.io/bcd/pen/YaXojL.js)  
> [https://codepen.io/bcd/pen/KQrXdb.css](https://codepen.io/bcd/pen/KQrXdb.css)

The JavaScript file calls `window.print()` when the button is clicked, and the css file sets up the print layout in `@media print`.

---

<div class="post-metadata">

**Author:** ![mahendrark](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mahendrark/32/10460_2.png) [@mahendrark](https://community.plotly.com/u/mahendrark)\
**Post date:** [June 26, 2020, 11:57am UTC](https://community.plotly.com/t/how-does-the-print-pdf-button-works-in-vanguard-report/14086/3 "2020-06-26T11:57:49Z")

</div>

This example code is not available anymore ☹

---

<div class="post-metadata">

**Author:** ![Praveen](https://avatars.discourse-cdn.com/v4/letter/p/3ec8ea/32.png) [@Praveen](https://community.plotly.com/u/Praveen)\
**Post date:** [September 23, 2021, 11:09pm UTC](https://community.plotly.com/t/how-does-the-print-pdf-button-works-in-vanguard-report/14086/4 "2021-09-23T23:09:27Z")

</div>

You can print pdf like this:

1. install this package python -m pip install visdcc
2. import visdcc
3. Add these lines in the layout

html.Div([  
html.Button(“Download”, id=“click1”),  
visdcc.Run\_js(id = ‘javascript’)  
])

1. add callback

@app.callback(  
Output(‘javascript’, ‘run’),  
[Input(‘click1’, ‘n\_clicks’)])

def myfun(x):  
if x:  
return “window.print()”  
return “”

1. save it, run the code and click download button. It will work 100%  
6.Thanks