使用 javascript 以编程方式复制时如何将元标记添加到剪贴板？

Question

我正在尝试以编程方式将 table 插入剪贴板以粘贴到 google 电子表格中。

这是我所做的：

$('.copy').click(function() {
 var copyContainer = $('<div>'); //a hidden container to copy from
 copyContainer.append('<meta name="generator" content="Sheets"/>');
  
 copyContainer.css('position', 'absolute').css('z-index', -999).css('opacity', 0);
 $('body').prepend(copyContainer);
 copyContainer.attr('contenteditable', true);
 
    // Let's grab a table from html to make example simpler
 copyContainer.append($('table').clone());
 copyContainer.select();
  
 copyContainer.on('focus', function() { 
  document.execCommand('selectAll',false,null) 
 });
 copyContainer.focus();
  
 document.execCommand('copy');
 copyContainer.remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="copy">Copy!</button>
<table><tr><td data-sheets-note="test">123</td></tr></table>

问题是这会将以下内容放入我的剪贴板：

<html>
<body>
<!--StartFragment-->
  <table style="color: rgb(0, 0, 0); font-family: &quot;Times New Roman&quot;; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
    <tbody>
      <tr>
        <td data-sheets-note="test">123</td>
      </tr>
    </tbody>
   </table>
<!--EndFragment-->
</body>
</html>

但这（与添加的元标记相同）正是我所需要的（因此 google 电子表格会正确识别它并将注释添加到单元格）：

<html>
<body>
<!--StartFragment-->
  <meta name="generator" content="Sheets"/>
  <table style="color: rgb(0, 0, 0); font-family: &quot;Times New Roman&quot;; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
    <tbody>
      <tr>
        <td data-sheets-note="test">123</td>
      </tr>
    </tbody>
   </table>
<!--EndFragment-->
</body>
</html>

如何强制将元标记添加到剪贴板？

Answer 1

如果我们捕捉到事件，我们可以编辑剪贴板数据。这意味着我们必须为 copy 事件设置一个侦听器，并且我们必须设置一个全局标志以了解复制事件是否需要修改。

嗯，如果我们直接设置剪贴板内容，我们还不如根本不把元素放在 DOM 中，而是将它们存储在另一个全局变量中。

工作片段：

$('.copy').click(function() {
    // Let's grab a table from html to make example simpler
 var theTable = $('table');

 copyingTable = true;
    tableToCopy = theTable [0].outerHTML; 

 document.execCommand('copy');
 copyingTable = false;
});

copyingTable = false;
document.addEventListener('copy', function(e) {
 if (copyingTable)
 {
  var data = '<meta name="generator" content="Sheets"/>' + tableToCopy;

  e.clipboardData.setData('text/html', data);
  e.preventDefault();
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="copy">Copy!</button>
<table><tr><td data-sheets-note="test">123</td></tr></table>

使用 javascript 以编程方式复制时如何将元标记添加到剪贴板？

How to add a meta tag to clipboard when copying programmatically with javascript?

javascript

clipboard