how to copy div content to clipboard as a string format

Question

I'm using ReactJS and when a user clicks a Button I want to copy some div content to clipboard.

I can't see why this code does not result in the data being copied to the clipboard. am giving value from redux store when its true am coping content from div

componentDidUpdate(prevProps, prevState, snapshot) {
  console.log("value to copy is-->", this.props.copy);
  var copyText = document.getElementById("myInput");

  /* Select the text field */

  console.log("copyText-->", copyText);
  console.log("document-->", document);
  /* Copy the text inside the text field */
  document.execCommand("copy");
}

Possible duplicate of [In reactJS, how to copy text to clipboard?](https://stackoverflow.com/questions/39501289/in-reactjs-how-to-copy-text-to-clipboard) also. There are possible solutions there. Otherwise I used many times [clipboard.js](https://clipboardjs.com/) — Lionel T, Jul 09 '19 at 09:37

score 1 · Accepted Answer · answered Jul 09 '19 at 09:31

1

You need to add el.select(); before run copy command.

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("value to copy is-->",this.props.copy);
    var copyText = document.getElementById("myInput");

    /* Select the text field */

    copyText.select();

    /* Copy the text inside the text field */
    document.execCommand("copy");
}

answered Jul 09 '19 at 09:31

Le Khiem

541
4
9

I found another solution here https://edupala.com/copy-div-content-clipboard/ It separates IE & other browsers. – Le Khiem Jul 09 '19 at 09:35
It's my pleasure! – Le Khiem Jul 09 '19 at 09:37
but its show me [object HTMLDivElement] – thesk Jul 09 '19 at 09:38
i want as a string – thesk Jul 09 '19 at 09:38
You can use `.innerHTML` or `.innerText` to get the HTML or TEXT. If the clipboard is an object – Le Khiem Jul 09 '19 at 09:41
Now its work Thanks – thesk Jul 09 '19 at 09:44
It should be noted that the execCommand is now obsolete: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand – Jarede Jan 12 '21 at 12:15

score 0 · Answer 2 · answered Jul 09 '19 at 09:33

0

You can use this package. It is very simple and it will work cross platform.

answered Jul 09 '19 at 09:33

SimoMatavulj

454
3
9

how to copy div content to clipboard as a string format

2 Answers2