в браузере JavaScript, я получаю сообщение об ошибке при записи текста csv в буфер обмена - PullRequest
Новая
       33

в браузере JavaScript, я получаю сообщение об ошибке при записи текста csv в буфер обмена

2 голосов
/ 05 мая 2020

В браузере JavaScript я пытаюсь записать некоторые данные CSV в буфер обмена, чтобы этот пользователь мог вставить их в Excel. Вот мой код: 

function onClick(){
      var txt=get_some_valid_csv_text()
      var items=[
          new ClipboardItem({
            'text/csv': new Blob([txt], { type: 'text/csv' })
          })
        ]
      navigator.clipboard.write(items)
}

Проблема: он не работает, и я получаю это сообщение об ошибке в консоли:

Uncaught (в обещании) DOMException: Sanitized Тип MIME text / csv не поддерживается при записи.

Ответы [ 3 ]

2 голосов
/ 07 мая 2020

Chrome по-прежнему активно работает над реализацией этого API , и хотя спецификации требуют от UA поддержки нескольких типов MIME, в настоящее время они поддерживают только "text/plain" и "image/png".

Так что на данный момент нам все еще приходится полагаться на уродливую execCommand('copy') + привязку события копирования для установки наших собственных данных ... 

document.querySelector('button').onclick = (e) => {
  const data = `A1,B1
A2,B2
A3,B3`;
  document.oncopy = e => {
    e.preventDefault(); // we handle it
    const dT = e.clipboardData;
    dT.setData( 'text/plain', 'this is plain text' ); // as plain text
    dT.setData( 'text/csv', data ); // as csv
  }
  document.execCommand( 'copy' );
  document.oncopy = null;
};

// to check what we have copied
document.querySelector('div[contenteditable]').onpaste = e => {
  e.preventDefault();
  const dT = e.clipboardData;
  console.log( 'retrieved "%s" as csv', dT.getData('text/csv') );
  console.log( 'retrieved "%s" as text', dT.getData('text/plain') );
};
<button>copy to clipboard</button>

<div contenteditable>paste here</div>

Хотя я должен отметить, что не пытался вставить это в MS Excel, поэтому я не знаю, решит ли это вашу проблему, но оба Google Таблицы и номера Apple смотрят только на значение plain / text , но могут автоматически распознавать CSV и TSV.

2 голосов
/ 08 мая 2020

Я только что нашел ответ методом пробной ошибки. Секрет, похоже, в том, чтобы использовать текст в формате csv с табуляцией в качестве разделителя, а не запятой. Нет необходимости в интерфейсе ClipboardItem, используйте просто navigator.clipboard.writeText

Это новый код 

function onClick(){
      var txt=get_some_valid_csv_text(sep='\t')
      navigator.clipboard.writeText(txt)
}
0 голосов
/ 07 мая 2020

https://www.w3.org/TR/clipboard-apis/#writing -в буфер обмена это все, что я смог найти,
"Эти типы данных должны быть помещены в буфер обмена с соответствующим описанием собственного типа, если они добавлены к объекту DataTransfer во время копирования. и вырезать события. "
Я правда не понимаю :( но надеюсь, что это поможет :)

...