In corporation Paged.js into Dash app

Dash Python
1

Hello, I’m trying to design a proof of concept for utilizing Paged.js. I have designed a simple demo app, but I haven’t gotten it to work. Can I confirm that this is the correct way to reference the Paged.js library via external CDN? Thanks

# Import necessary modules
import dash
from dash import dcc, html, Input, Output
import dash_table
from dash.exceptions import PreventUpdate

# Sample data for DataTable
data = [
    {'Column 1': 'Row 1 Data 1', 'Column 2': 'Row 1 Data 2'},
    {'Column 1': 'Row 2 Data 1', 'Column 2': 'Row 2 Data 2'},
    {'Column 1': 'Row 3 Data 1', 'Column 2': 'Row 3 Data 2'}
]

# Define Paged.js library URL
PAGEDJS_URL = "https://unpkg.com/pagedjs/dist/paged.polyfill.js"

# Define your Dash app with Paged.js reference
app = dash.Dash(__name__, external_scripts=[PAGEDJS_URL])

app.layout = html.Div([
    html.H1("My Dash App"),
    
    # Sample DataTable
    dash_table.DataTable(
        id='datatable',
        columns=[{"name": i, "id": i} for i in data[0].keys()],
        data=data
    ),
    
    # Sample graph
    dcc.Graph(
        id='sample-graph',
        figure={
            "data": [{"x": [1, 2, 3], "y": [4, 1, 2], "type": "bar", "name": "Sample Data"}],
            "layout": {"title": "Sample Graph"},
        }
    ),
    
    html.Button("Generate PDF", id="generate-pdf-button"),
    html.Div(id="pdf-output")
])

# Define a callback to generate PDF using Paged.js
@app.callback(
    Output("pdf-output", "children"),
    [Input("generate-pdf-button", "n_clicks")],
    prevent_initial_call=True
)
def generate_pdf(n_clicks):
    if n_clicks is None:
        return
    
    # JavaScript code to trigger PDF generation using Paged.js
    pdf_generation_script = """
    var doc = new Paged.Grammar("#datatable, #sample-graph");
    doc.render();
    doc.then(function () {
        doc.download({filename: "report.pdf"});
    });
    """
    
    return html.Script(pdf_generation_script)

if __name__ == "__main__":
    app.run_server(debug=True)
2

Hello @romarcin,

You cannot use html.Script this isnt executable. This was included for the completeness of the code base, this is due to the issue with possible script injection and arbitrary code execution.

However, what you are after is possible, you just need to use a clientside_callback instead. :slight_smile:

1 Like