Невозможно скопировать строку в формате HTML в буфер обмена в Chrome - PullRequest
Новая
       4

Невозможно скопировать строку в формате HTML в буфер обмена в Chrome

0 голосов
/ 13 февраля 2019

Я работаю на angular5, и мне нужно скопировать код HTML из clipboard и вставить его в Outlook.Я добился этого для IE, но тот же код не работает в Chrome, Chrome вообще ничего не копирует и не отображает никаких ошибок консоли.

По сути, как только я копирую, мне нужно создать hyperlinkи после этой гиперссылки в outlook, и когда пользователь нажимает на эту ссылку, должна открываться новая страница с этой гиперссылкой.Мой код, как показано ниже, пожалуйста, помогите мне достичь функциональности копирования для Chrome? 

public copyToClipboard {
  const body = document.createElement('body');
  const breakLine = document.createElement('br');
  const ol = document.createElement('ol');

  const range = document.createRange();
  document.body.appendChild(body);
  body.appendChild(ol);

  let name: string;
  this.selectedFiles.forEach(doc => {
    const docURL = this.serviceCall();
    const anchor = document.createElement('a');
    const li = document.createElement('li');

    anchor.href = docURL;
    anchor.text = doc.fileName;
    name = doc.name;
    body.appendChild(li).appendChild(anchor);
   });
    range.selectNode(body);

    window.getSelection().addRange(range);
    document.execCommand('copy');
    document.body.removeChild(body);
}

//HTML
<button pButton (click)="copyToClipboard()"></button>

(Пожалуйста, игнорируйте, если в моем коде есть орфографические ошибки, поскольку я набрал код вместо копирования + вставки, этот код работает отличнов IE)

1 Ответ

0 голосов
/ 14 февраля 2019

Я полагаю, что их недавняя реализация асинхронного ClipboardAPI заставила Chrome изменить свое поведение по отношению к execCommand('copy'), поскольку похоже, что теперь это асинхронный метод.
execCommand должен быть синхронным методом, так что это квалифицируеткак ошибка браузера.

Теперь обходной путь - немного подождать, прежде чем удалить исходный элемент.

(Также обратите внимание, что использование элемента здесь было плохой идеей и на самом деледругая часть вопроса). 

const obj = {
  serviceCall() { return Math.random();},
  selectedFiles: [
    { name: 'foo', fileName: 'foo.bar' },
    { name: 'bar', fileName: 'bar.foo' }
  ],
  copyToClipboard() {
    // don't use a <body> element
    const body = document.createElement('div');
    const breakLine = document.createElement('br');
    const ol = document.createElement('ol');

    const range = document.createRange();
    document.body.appendChild(body);
    body.appendChild(ol);

    let name = ""; // we're in pure js
    this.selectedFiles.forEach(doc => {
      const docURL = this.serviceCall();
      const anchor = document.createElement('a');
      const li = document.createElement('li');

      anchor.href = docURL;
      anchor.text = doc.fileName;
      name = doc.name;
      body.appendChild(li).appendChild(anchor);
    });
    range.selectNode(body);

    window.getSelection().addRange(range);
    document.execCommand('copy');
    // wait just a bit
    requestAnimationFrame(() =>
      document.body.removeChild(body)
    );
  }
}

btn.onclick = e => obj.copyToClipboard();
<button id='btn'>
  copy to clipboard
</button>
<textarea>paste here to check your clipboard's content</textarea>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...