Angular 4 - 將文本復制到剪貼板

Question

我在頁面上有一個可點擊的圖標。 單擊此圖標，我想構建一些文本並將其復制到剪貼板中

<td><img src='./assets/Copy.gif' (click)="copyToClipboard()"  /></td> 

並在組件中

  copyToClipboard() {
     this.textToCopy = this.text1 + this.text2 + this.text3;  
     this.toastr.info('Copied to Clipboard');
  }

我看過https://www.npmjs.com/package/ngx-clipboard 。 但是，此包需要引用輸入元素並從該輸入元素復制文本。 在我的用例中，文本需要動態創建，然后添加到剪貼板。

我可以使用 ngx-clipboard 復制到剪貼板還是有另一個包可以讓我實現這一目標？

Answer 1

用戶交互是執行document.execCommand所必需的，它用於將文本復制到剪貼板。

請參閱我的另一個答案。

如果您不想使用任何第三方庫，您可以使用下面的代碼片段將文本復制到剪貼板。

function copyTextToClipboard(text) {
  var txtArea = document.createElement("textarea");
  txtArea.id = 'txt';
  txtArea.style.position = 'fixed';
  txtArea.style.top = '0';
  txtArea.style.left = '0';
  txtArea.style.opacity = '0';
  txtArea.value = text;
  document.body.appendChild(txtArea);
  txtArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
    if (successful) {
      return true;
    }
  } catch (err) {
    console.log('Oops, unable to copy');
  } finally {
    document.body.removeChild(txtArea);
  }
  return false;
}

如下更改copyToClipboard函數以調用 copyTextToClipboard 函數

copyToClipboard() {
    this.textToCopy = this.text1 + this.text2 + this.text3;
    var result = this.copyTextToClipboard(this.textToCopy);
    if (result) {
        this.toastr.info('Copied to Clipboard');
    }
}

Answer 2

您需要對圖像使用ngxClipboard指令。 這是您需要如何使用它來解決您的問題：

<td>
    <img src='./assets/Copy.gif' (click)="copyToClipboard()" ngxClipboard [cbContent]="textToCopy" />
</td> 

請記住在您的應用程序模塊中添加ClipboardModule 。 示例代碼如下：

import { ClipboardModule } from 'ngx-clipboard';

@NgModule({
  imports: [
    // Other Imports
    ClipboardModule
  ],
  // Other code
})
export class AppModule { }

Answer 3

這是復制到剪貼板的最簡單方法。

在您的模板中

<button (click)="copyToClipboard(sharableLink)">Copy link</button>
<input type="text" value="This is the value to copy" #sharableLink>

在組件中

copyToClipboard(element) {
    element.select();
    document.execCommand('copy');
    this.toaster('success', 'Success!', 'Link copied to clipboard.');
  }

Answer 4

這是另一個不需要第三方庫或模塊的快速而骯臟的選擇。 取自這里

在您的模板中

<a class="accent" (click)="copyLink(textToCopy)">{{textToCopy}}</a>

在你的組件中

copyLink(text:string) {
        const event = (e: ClipboardEvent) => {
            e.clipboardData.setData('text/plain', text);
            e.preventDefault();
            // ...('copy', e), as event is outside scope
            document.removeEventListener('copy', e);
        }
        document.addEventListener('copy', event);
        document.execCommand('copy');
    }

Answer 5

ngx-clipboard 現在不需要你使用 input 元素。 現在它更直接，並提供了幾種方法來做到這一點。 一種方法是簡單地使用 ClipboardService。 三、從文檔

import { ClipboardService } from 'ngx-clipboard'

constructor(private _clipboardService: ClipboardService){
...
}
copy(text: string){
  this._clipboardService.copyFromContent(text)
}

但就我而言，這不起作用。 我在編譯時收到了一些警告，指出不滿足對等依賴項。 因為我使用的是 Angular 4，所以我預料到了這些警告。 但是，如果上述解決方案對您不起作用，則有一種簡單的方法可以使用 @ViewChild 執行此操作。

在你的 html 中：

<textarea name="copyText" #copyText id="" style="opacity: 0;height: 0;"></textarea>

在 Component 中：

@ViewChild('copyText', { read: ElementRef }) copyText: ElementRef;

copyText() {
    const element = this.copyText.nativeElement;
    element.value = 'some text';
    element.focus();
    element.select();
    document.execCommand('copy');
}

這只是帶有 Angular 的 @ViewChild 的簡單香草 javascript 方法

Answer 6

使用 NgxClipboard 的已批准答案的問題（稍后由 OP 突出顯示）是無法動態設置內容。

使用 (click) 事件偵聽器不起作用，因為它是在ngxClipboard 執行后觸發的。

因此，只需使用 @Input getter 定義 [cbContent]，而忘記 (click) 事件：

在模板中：

<button ngxClipboard [cbContent]="foo">Click me</button>

在組件中：

@Input()
get foo() {
    // Dynamic generation of the text to put in the clipboard:
    return this.text1 + this.text2 + this.text3
}