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 acplish with Jquery or other addons? I would appreciate any advice on this.

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 acplish with Jquery or other addons? I would appreciate any advice on this.

• javascript
• jquery
• html

• Can you configure zero clipboard to copy a hidden input, then place the dom structure within the input? – Jason W Commented Jun 1, 2015 at 4:13
• Going to e at this at a pletely different angle: why would they need to copy/paste into an email client instead of simply telling your page(s) to just email them the currently highlighted range? (which your page tells your server about, and it then knows what to send the user for them to do with whatever they need?) – Mike 'Pomax' Kamermans Commented Jun 1, 2015 at 4:23
• I thought about the option of having some sort of email template and have the HTML table automatically populated. I'm not the most savvy with jquery to do something like that but ill look into that possibility. – Daniel Ellison Commented Jun 1, 2015 at 4:27

2 Answers 2

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