Copy HTML table structure to clipboard

Question

Im just looking for advice on this. Ive been looking trough the internet for possible solutions on how to copy an HTML table structure with it's text to clipboard but no so lucky so far.

What I have at the moment is a simple table with data and users would need to copy that into an email using Outlook and when you copy/paste it. Pasting this manually into Outlook would show the table structure and its text rendered correctly. The only issue is that sometimes users could have several large tables making it sometimes clumsy to copy and scroll down at the same time to reach the bottom of the page.

So I am looking to get a simple button that essentially will do that automatically. So I am looking for something that would find my main div container and copy all of the table structures and text within it to the user's clipboard. I found that the most popular solution is called ZeroClipboard however it only copies the text and not the actual HTML table structure with it.

Would anyone know if this is something that is possible to accomplish with Jquery or other addons? I would appreciate any advice on this.

Answer 1

You could used also the execCommand method.

Example:

const btnCopyText = document.querySelector('#btn-copy-text');
const btnCopyTable = document.querySelector('#btn-copy-table');

const elText = document.querySelector('p');
const elTable = document.querySelector('table');

const copyEl = (elToBeCopied) => {
  let range, sel;

  // Ensure that range and selection are supported by the browsers
  if (document.createRange && window.getSelection) {

    range = document.createRange();
    sel = window.getSelection();
    // unselect any element in the page
    sel.removeAllRanges();

    try {
      range.selectNodeContents(elToBeCopied);
      sel.addRange(range);
    } catch (e) {
      range.selectNode(elToBeCopied);
      sel.addRange(range);
    }

    document.execCommand('copy');
  }

  sel.removeAllRanges();

  console.log('Element Copied! Paste it in a file')
};

btnCopyText.addEventListener('click', () => copyEl(elText));
btnCopyTable.addEventListener('click', () => copyEl(elTable));

HTML:

<div>
  <button id="btn-copy-text">Copy this text </button>
  <p id="text-to-copied">Text to be copied</p>
</div>

<div class="table-container">
  <button id="btn-copy-table">Copy Table</button>
  <table id="table-to-copied" border="1">
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
    <tr>
      <td>col1 </td>
      <td>col2 </td>
    </tr>
  </table>
</div>  

Live example: https://stackblitz.com/edit/js-copy-element

Answer 2

I don't think you can trigger copy event with a button, but a suggestion for a workaround: clipboard API allows you to set custom data on copy event. So what you could do is listen for copy event on your table and send HTML as text instead. So a user triggering a copy event from your table would get the HTML (or whichever text you want) in his clipboard instead.

In snippet example below select some text and copy it:

document.getElementById('sample').addEventListener('copy', function (e) {
    var html_data = document.getElementById('sample').innerHTML;
  document.getElementById('result').textContent = html_data;
    e.clipboardData.setData('text/plain', html_data);
    e.preventDefault();
});

span
{
  color: red;
}

<div id='sample'>
    <div style="padding-bottom: 5px;">Select some of this text and copy it to clipboard using ctrl+c or right-click+copy.</div>
  
</div>
<div >The content of the clipboard is: <span id="result"></span></div>

Doc for clipboard API: http://www.w3.org/TR/clipboard-apis/

And from caniuse: http://caniuse.com/#feat=clipboard