Angular 8 - скопировать в буфер обмена JSON Объект - PullRequest
Новая
       15

Angular 8 - скопировать в буфер обмена JSON Объект

0 голосов
/ 09 июля 2020

У меня есть ответ JSON, который я получаю от бэкэнда, который я отображаю как {{ response | json }}. Есть опция копирования в буфер обмена, где мне нужно скопировать содержимое response. У меня есть следующий код 

copy(response){
  let val = response;
  const selBox = document.createElement('textarea');
  selBox.style.position = 'fixed';
  selBox.style.left = '0';
  selBox.style.top = '0';
  selBox.style.opacity = '0';
  selBox.value = val;
  document.body.appendChild(selBox);
  selBox.focus();
  selBox.select();
  document.execCommand('copy');
  document.body.removeChild(selBox);}

Он копируется как [объект объекта], поскольку response является объектом. Я могу скопировать его, преобразовав ответ в строку как let val = JSON.stringyfy(response). Но это не копирует его в формате, который я показываю, а вместо этого копирует json в одну строку, как строку. Итак, как скопировать в буфер обмена объект JSON в правильном формате?

1 Ответ

0 голосов
/ 09 июля 2020

Со ссылкой на ответ, связанный с x4rf41, вы можете сделать свою строковую функцию пробелом вашего JSON с помощью let val = JSON.stringify(response,null,2). Если вам нужна подсветка синтаксиса, вы можете использовать функцию user123444555621 .

Более простой способ скопировать текст - добавить прослушиватель событий для события копирования и установить clipboardData dataTransfer object: 

window.addEventListener('copy', (event) => {
if(copying){
    let val = JSON.stringify(response,null,2);
    event.preventDefault(); //stop the browser overwriting the string
    event.clipboardData.setData("text/plain",val); //encode the appropriate string with MIME type "text/plain"
copying = false;}
});
copy = function (){
copying = true;
document.execCommand('copy');}

Если вы используете вышеупомянутую функцию выделения синтаксиса, вы, вероятно, захотите указать MIME-тип «text / html». Надеюсь, параметры форматирования в связанном ответе соответствуют вашим потребностям.

...