I have a Python Dash app running, with a couple of callbacks and a nice looking graph. What I need next, is to have a button for copying some results to the cliboard in excel format (pretty specific, yup). I guess I need to implement a javascript function triggered by a button onclick, but I have no idea how to get the Python app to call the javascript. Can somebody help me out with this one? :)

something like this:

function copy_to_cliboard() {
  var copyText = document.getElementById("text_input");

  copyText.select();
  copyText.setSelectionRange(0, 99999);

  document.execCommand("copy");

  alert("Copied the text: " + copyText.value);
}

thanks a lot!

I have a Python Dash app running, with a couple of callbacks and a nice looking graph. What I need next, is to have a button for copying some results to the cliboard in excel format (pretty specific, yup). I guess I need to implement a javascript function triggered by a button onclick, but I have no idea how to get the Python app to call the javascript. Can somebody help me out with this one? :)

something like this:

function copy_to_cliboard() {
  var copyText = document.getElementById("text_input");

  copyText.select();
  copyText.setSelectionRange(0, 99999);

  document.execCommand("copy");

  alert("Copied the text: " + copyText.value);
}

thanks a lot!

• javascript
• python-3.x
• plotly-dash

• This may be helpful: munity.plot.ly/t/dash-v1-7-0-released/31961 – blong Commented Jun 12, 2020 at 11:38

2 Answers 2

In case some one is experiencing the same challenge, below is my solution.

app.clientside_callback(
    """
    function placeholder(n_clicks, data) {
        window.data_to_copy = data.data;
        var copyText = document.getElementById("text_input");
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        document.execCommand("copy");
    }

    // Overwrite what is being copied to the clipboard.
    document.addEventListener('copy', function(e){
      // e.clipboardData is initially empty, but we can set it to the
      // data that we want copied onto the clipboard.
      e.clipboardData.setData('text/plain', window.data_to_copy);

      // This is necessary to prevent the current document selection from
      // being written to the clipboard.
      e.preventDefault();
    });
    """,
    [Output("copy_output", "children")],
    [Input("copy_button", "n_clicks")],
    [State("excel_output", "data")]
)

You have to use socket for this, using sockets servers can trigger frontend. Push notifications are also used to send messages to the frontend, but in your case, sockets are the best solution. Please refer to the following answer. Hope it helps.

https://stackoverflow./a/52792016/11035114