Скопировать HTML в буфер обмена (угловой)

Question

Есть ли способ скопировать html в буфер обмена в Angular?

Я использую ngx-буфер обмена и пытаюсь отформатировать скопированный текст (т. Е. Использовать жирный шрифт, маркеры)

.ts

constructor(private _clipboardService: ClipboardService) {}

callServiceToCopy() {
    this._clipboardService.copyFromContent('<B>This is an important message<\/B>\n These are the details');
}

Компонент:

<button class="btn btn-primary btn-sm" (click)="callServiceToCopy()">Copy</button>

Stackblitz: https://stackblitz.com/edit/github-ar12tp-irzz84

Answer 1

app.component.ts:

copyToClipboard(id:string): void {
  const fromHtml = this._elementRef.nativeElement.querySelector(id).innerHTML;
  const newNode = this.renderer.createElement('div');
  this.renderer.appendChild(this._elementRef.nativeElement, newNode);
  this.renderer.setProperty(newNode, 'innerHTML', fromHtml);
  this._clipboardService.copyFromContent(fromHtml);
}

app.component.html:

<textarea id="textId">This is a sample Text</textarea>
<button (click)="copyToClipboard('#textId')">Copy text</button>

Пожалуйста, проверьте этот StackBlitz: https://stackblitz.com/edit/github-ar12tp-scrwbn

Answer 2

Он не использует угловую функциональность, но вот что я использую:

var dummy = document.createElement('input'),
  text = window.location.href;

document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);

Answer 3

.html

<div id="infoEd" role="textbox" aria-multiline="true" tabindex="2" contenteditable="true" (keyup)="" (keydown)="" (paste)="wrapContent($event)">
      </div>

.ts

   public wrapContent(evt) {
      const pastedData = evt.clipboardData.getData('html');
        console.log(pastedData);
    }

Этот ответ Stackoverflow может помочь: - Как скопировать в буфер обмена в JavaScript?

Answer 4

copyToClipboard(id:string): void {
           const from = document.getElementById(id);
           const range = document.createRange();
           window.getSelection().removeAllRanges();
           range.selectNode(from);
           window.getSelection().addRange(range);
           document.execCommand('copy');
           window.getSelection().removeAllRanges();
 }

 <button (click)="copyToClipboard('<B>This is an important message<\/B>\n These are the details')">Copy text</button>