.html

Question

是否可以将html复制到Angular中的剪贴板？

我正在使用ngx-clipboard，并尝试格式化复制的文本（即，使用粗体，项目符号）

.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

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>

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答案可以帮助：-How do I copy to the clipboard in JavaScript?

Answer 4

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

将html复制到剪贴板（角度）

4 个答案:

.html

.ts