Question

我正在尝试以编程方式将表格插入剪贴板以粘贴到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>

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

<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>

如何强制将meta标签添加到剪贴板中？

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以编程方式复制时如何将元标记添加到剪贴板？

1 个答案: