Javascript 将HTML表结构复制到剪贴板

我只是想在这方面寻求建议。我一直在互联网上寻找可能的解决方案，如何将HTML表格结构的文本复制到剪贴板上，但到目前为止还没有找到

我现在拥有的是一个简单的数据表，用户需要使用Outlook将数据复制到电子邮件中，并在您复制/粘贴它时进行复制。将其手动粘贴到Outlook将显示正确呈现的表结构及其文本。唯一的问题是，有时用户可能有几个大表，这使得同时复制和向下滚动到页面底部有时很笨拙

因此，我希望得到一个简单的按钮，基本上会自动做到这一点。因此，我正在寻找可以找到我的主div容器并将其中的所有表结构和文本复制到用户的剪贴板中的东西。我发现最流行的解决方案是ZeroClipboard，但是它只复制文本，而不复制实际的HTML表结构

---

有人知道这是不是可以通过Jquery或其他插件来实现的吗？如果您能给我一些建议，我将不胜感激。

我认为您不能用一个按钮触发复制事件，但有一个解决方法的建议：剪贴板API允许您在复制事件上设置自定义数据。因此，您可以监听表上的

copy

事件，并将

HTML

作为文本发送。因此，从表中触发复制事件的用户将在其剪贴板中获得

HTML

（或任何您想要的文本）

在下面的代码段示例中，选择一些文本并复制它：

document.getElementById（'sample'）.addEventListener（'copy'，函数（e）{
var html_data=document.getElementById（'sample'）.innerHTML；
document.getElementById（'result'）.textContent=html\U数据；
e、 setData（'text/plain'，html\u数据）；
e、 预防默认值（）；
});
span
{
颜色：红色；
}

选择部分文本，并使用ctrl+c或右键单击+复制将其复制到剪贴板。
剪贴板的内容是：
您也可以使用
execCommand
方法

例如：

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:


复制此文本您可以配置zero clipboard来复制隐藏的输入，然后将dom结构放在输入中吗？从一个完全不同的角度来看：为什么他们需要复制/粘贴到电子邮件客户端，而不是简单地告诉您的页面通过电子邮件发送当前高亮显示的范围？（你的页面告诉你的服务器关于哪些内容，然后它就知道应该向用户发送什么，让他们处理他们需要的任何事情？）我考虑了使用某种电子邮件模板并自动填充HTML表的选项。我对jquery不是最精通的，但我会研究这种可能性。嗨，Julien，谢谢你的代码，我该如何从按钮触发副本？我有点困惑如何工作。对不起，我不清楚，请参阅编辑。我认为一个按钮是不可能的，这是一个解决办法的建议。感谢您的澄清，目前用户只需突出显示表格，右键单击“复制”或CTRL-C并将其粘贴到电子邮件中即可。我真的在寻找一个按钮，可以为用户自动复制DIV内容。我知道用户现在可以复制，这个解决方案的作用是允许您在复制时推送您想要的内容。他们只能选择一个单词或一个字母，当他们复制时，他们拥有表格的整个html。或者你可以有一个不同的div，比如“复制此内容以获得整个表”，当他们这样做时，你推整个表。在任何情况下，这都是一个解决方案，但可能它不能满足您的需要。这个解决方案似乎适用于所有浏览器。非常感谢。但问题是。。。如何自定义它以使用我的代码。我有一个id为的表（比如#Table1），这将如何影响代码。你的这个javascript太超前了，我想不出任何东西：（@Aamir）你的问题中没有代码示例。发布一个带有示例的链接