Как добавить метатег в буфер обмена при программном копировании с помощью JavaScript? - PullRequest
Новая
       7

Как добавить метатег в буфер обмена при программном копировании с помощью JavaScript?

0 голосов
/ 22 мая 2018

Я пытаюсь программно вставить таблицу в буфер обмена для вставки в электронные таблицы 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>

Как я могу принудительно добавить метатег в буфер обмена?

1 Ответ

0 голосов
/ 22 мая 2018

Мы можем редактировать данные буфера обмена, если поймаем событие.Это означает, что мы должны настроить прослушиватель для события 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...