copy whole html table to clipboard javascript

Question

I have write javascript to select the table but I want to now automaticaly copy it after the click of the button.Please help me.My javascript is like this.

function selectElementContents(el) {
            var body = document.body, range, sel;
            if (document.createRange && window.getSelection) {
                range = document.createRange();
                sel = window.getSelection();
                sel.removeAllRanges();
                try {
                    range.selectNodeContents(el);
                    sel.addRange(range);
                    document.execCommand('Copy');
                } catch (e) {
                    range.selectNode(el);
                    sel.addRange(range);
                    document.execCommand('Copy');
                }
            } else if (body.createTextRange) {
                range = body.createTextRange();
                range.moveToElementText(el);
                range.select();
                range.execCommand('Copy');

            }
        }

Answer 1

function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
    range = document.createRange();
    sel = window.getSelection();
    sel.removeAllRanges();
    try {
        range.selectNodeContents(el);
        sel.addRange(range);
    } catch (e) {
        range.selectNode(el);
        sel.addRange(range);
    }
} else if (body.createTextRange) {
    range = body.createTextRange();
    range.moveToElementText(el);
    range.select();
}
document.execCommand("Copy");}

Answer 2

• This has worked for me, it is not only restricted to table, but it can even select and copy to clipboard all elements inside Node specified with id.

• I have tested in Mac Chrome as well as windows chrome.

• Usescase : Copy Signature created by Signature Generator based on JS

Demo :

<div id="signature_container">
  <p id="company_name" style="margin-top: 4px; margin-bottom: 0px; color: #522e64; font-weight: 700; font-size: 16px; letter-spacing: 1px; border-bottom: solid 2px #522e64; width:250px; padding-bottom: 3px;">The Company Name</p>
  <p style="margin-top: 4px; margin-bottom: 0px; color: #00706a; font-weight: 700; font-size: 15px;"> <span id="first_name_output_2"></span>Firstname<span id="last_name_output_2"> Lastname</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="designation_output_2" style="color: #000000; font-weight: 500; font-size: 15px;">Designation</span></p>
  <p style="margin-top: 0px; margin-bottom: 0px; color: #625469; font-weight: normal; font-size: 15px; letter-spacing: 0.6px;">[email protected]<span id="email_output_2"></span>&nbsp;&nbsp;&nbsp;</p>
</div>
<br><br>
<input type="button" onclick="selectElementContents( document.getElementById('signature_container') );" value="Copy to Clipboard">

<script>
  function selectElementContents(el) {
    var body = document.body,
      range, sel;
    if (document.createRange && window.getSelection) {
      range = document.createRange();
      sel = window.getSelection();
      sel.removeAllRanges();
      range.selectNodeContents(el);
      sel.addRange(range);
    }
    document.execCommand("Copy");
  }
</script>

Answer 3

Try this:

<script type="text/javascript">

function copytable(el) {
    var urlField = document.getElementById(el)   
    var range = document.createRange()
    range.selectNode(urlField)
    window.getSelection().addRange(range) 
    document.execCommand('copy')
}

</script>

<input type=button value="Copy to Clipboard" onClick="copytable('stats')">

<table id=stats>
    <tr>
        <td>hello</td>
    </tr>
</table>

Answer 4

I know this is an old one, but if any one still looking for a solution. this one worked for me

    <script>
    $(document).ready(function() {
        $("#copyBtn").on("click",
            function(e) {
                copyTable("listTable", e);
            });

    });

    function copyTable(el, e) {
        e.preventDefault();
        var table = document.getElementById(el);
        
        if (navigator.clipboard) {
            var text = table.innerText.trim();
            navigator.clipboard.writeText(text).catch(function () { });
        }
    }
</script>