Hey EveryOne I am Sarvesh I am working On Two Python framework Django and Dash, Once I got task to generate pdf of dashboard and multiple graph so I go through the lots of things in dash and even in javascript and I generated pdf with multiple graph. Hope all of u find very used full
import pandas as pd
import datetime as dt
import plotly.offline as pyo
import plotly.graph_objs as go
import plotly.express as px
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
from django_plotly_dash import DjangoDash
labels = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen']
values = [4500, 2500, 1053, 500]
app = DjangoDash('Report',add_bootstrap_links=True)
app.css.append_css({ "external_url" : "/static/assets/css/dashstyle.css" })
html.Script(src='https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js')
card1 = dbc.Card([
dcc.Checklist(
options=[{'label':'Top Five Highest Frequent Customers',}],
className='printCheckBox',
labelStyle={'fontWeight':'600',},
inputStyle={'marginRight':'10px',},
inputClassName='chkremove',
),
dbc.CardBody([
html.P(['2 His Majesties Letter to the Lord Thresurer & other of the Lords to deliver the Charge of the Tower & Prisones thereunto S.r Wm Wade Knight which was done by the Earle of Dorsett and the Earle of Devonshire on Thursday in the Afternoon, at the Clock being the 15 of Aug. 1605'])
])
],className='cardDesign')
card2 = dbc.Card([
dcc.Checklist(
options=[{'label':'Top Five Highest Frequent Customers',}],
className='printCheckBox',
labelStyle={'fontWeight':'600',},
inputStyle={'marginRight':'10px',},
inputClassName='chkremove',
),
dbc.CardBody([
dcc.Graph(figure=dict(
data=[go.Pie(labels=labels,values=values)],
layout=dict(autosize=True)
),
responsive=True,
)
])
],className='cardDesign')
card2_1 = dbc.Card([
dbc.CardBody([
dcc.Graph(figure=dict(
data=[go.Pie(labels=labels,values=values)]
))
])
],className='cardDesign')
card2_2 = dbc.Card([
dbc.CardBody([
dcc.Graph(figure=dict(
data=[go.Pie(labels=labels,values=values)]
))
])
],className='cardDesign')
card3 = dbc.Card([
dcc.Checklist(
options=[{'label':'Top Five Highest Frequent Customers',}],
className='printCheckBox',
labelStyle={'fontWeight':'600',},
inputStyle={'marginRight':'10px',},
inputClassName='chkremove',
),
dbc.CardBody([
dcc.Graph(figure=dict(
data=[go.Bar(x=labels,y=values)]
))
])
],className='cardDesign')
app.layout = html.Div([
html.Div([
dbc.Row([
dbc.Col([
html.H3(['Report PDF Generator'])
]),
]),
dbc.Row([
dbc.Col([
card1
]),
]),
dbc.Row([
dbc.Col([
card2
]),
]),
dbc.Row([
dbc.Col([
dbc.Row([
dbc.Col([card2_1],xs=12, sm=12, md=12, lg=6, xl=6),
dbc.Col([card2_2],xs=12, sm=12, md=12, lg=6, xl=6),
])
]),
]),
dbc.Row([
dbc.Col([
card2
]),
]),
dbc.Row([
dbc.Col([
dbc.Row([
dbc.Col([card2_1],xs=12, sm=12, md=12, lg=6, xl=6),
dbc.Col([card2_2],xs=12, sm=12, md=12, lg=6, xl=6),
])
]),
]),
dbc.Row([
dbc.Col([
card3
]),
]),
],id='print'),
html.H1(id='h'),
dbc.Button(children=['Download'],className="mr-1",id='js',n_clicks=0),
html.Script(src="https://code.jquery.com/jquery-3.5.1.slim.min.js",integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj",crossOrigin='anonymous'),
html.Script(src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js",integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx",crossOrigin='anonymous'),
html.Script(src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js")
],id='main')
app.clientside_callback(
"""
function(n_clicks){
if(n_clicks > 0){
$('.chkremove').hide();
var opt = {
margin: 2,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1},
jsPDF: { unit: 'cm', format: 'a2', orientation: 'p' },
pagebreak: { mode: ['avoid-all'] }
};
html2pdf().from(document.getElementById("print")).set(opt).save();
setTimeout(function(){
$('.chkremove').show();
},2000);
}
}
""",
Output('js','n_clicks'),
Input('js','n_clicks')
)
