Download component as image using clientside_callback

Dash Python
4

I’ve since figured this out with html2canvas. Same setup, except the src will be:

app = dash.Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    external_scripts=[
        {'src': 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js'}
    ]
)

And the clientside_callback function will look like:

clientside_callback(
    """
    function(n_clicks){
        if(n_clicks > 0){
            html2canvas(document.getElementById("component-to-save"), {useCORS: true}).then(function (canvas) {
                var anchorTag = document.createElement("a");
                document.body.appendChild(anchorTag);
                anchorTag.download = "download.png";
                anchorTag.href = canvas.toDataURL();
                anchorTag.target = '_blank';
                anchorTag.click();
            });
        }
    }
    """,
    Output('download-image', 'n_clicks'),
    Input('download-image', 'n_clicks')

From what I found, html2pdf was built using html2canvas, so the above code might work with the html2pdf function to generate PDFs of your app. Note that html2pdf is a separate javascript function and will needed to be linked in the external stylesheets.