Angular 5-클립 보드에 복사


124

클릭하면 사용자의 클립 보드에 변수를 저장하는 아이콘을 구현하려고합니다. 나는 현재 여러 라이브러리를 시도했지만 그중 어느 것도 그렇게 할 수 없었습니다.

Angular 5에서 사용자의 클립 보드에 변수를 올바르게 복사하려면 어떻게해야합니까?


ngxyz-c2c를 사용할 수 있으며 여러 가지 방법이 있습니다.
Ankit Singh

Angular Material을 사용하는 경우 버전 9.0.0 (2020 년 2 월 6 일 출시)은 매우 사용하기 쉬운 클립 보드 패키지 를 도입했습니다 . Angular 문서 및 @Nabel의 답변을 참조하십시오 .
George Hawkins

답변:


235

해결 방법 1 : 텍스트 복사

HTML

<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>

.ts 파일

copyMessage(val: string){
    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);
  }

해결 방법 2 : TextBox에서 복사

HTML

 <input type="text" value="User input Text to copy" #userinput>
      <button (click)="copyInputMessage(userinput)" value="click to copy" >Copy from Textbox</button>

.ts 파일

    /* To copy Text from Textbox */
  copyInputMessage(inputElement){
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

여기에서 데모


해결 방법 3 : 타사 지시문 ngx-clipboard 가져 오기

<button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>

솔루션 4 : 사용자 지정 지시문

사용자 지정 지시문 사용을 선호하는 경우를 사용하여 구현 된 우아한 솔루션 인 Dan Dohotaru의 답변 을 확인하십시오 ClipboardEvent.


1
좋은 생각이지만 두 번째 솔루션을 복사했고 계속 Cannot read property 'select' of undefined각도 6에 들어갑니다.이 각도 6과 호환됩니까?
slevin

1
@slevin 나는 그것이 어떤 식 으로든 각도 버전과 관련이 있다고 생각하지 않습니다. 입력에`# userinput`을 추가 했습니까?
Sangram Nandkhile

1
@SangramNandkhile 반복해서 확인했지만 여전히 동일한 오류가 발생했습니다. 이건 내 코드입니다 <input *ngIf="invitation_code" type="text" readonly value="{{invitation_code}}" #userinput > <button *ngIf="code_success" (click)="copyInputMessage(userinput)" value="click to copy" > Copy code </button>감사합니다
슬레븐

당신도 제거 할 수 있습니다 position, left, top,와 opacity. 그리고로 교체selBox.style.height = '0';
멘디

사소한 문제가,하지 const를 사용해야합니다
스테판 뒤몽

70

나는 이것이 이미 여기에서 많이 투표되었다는 것을 알고 있지만, 차라리 사용자 지정 지시문 접근 방식을 선택하고 @jockeisorby가 제안한대로 ClipboardEvent에 의존하는 동시에 리스너가 올바르게 제거되었는지 확인합니다 (동일한 기능을 제공해야 함). 이벤트 리스너 추가 및 제거)

stackblitz 데모

import { Directive, Input, Output, EventEmitter, HostListener } from "@angular/core";

@Directive({ selector: '[copy-clipboard]' })
export class CopyClipboardDirective {

  @Input("copy-clipboard")
  public payload: string;

  @Output("copied")
  public copied: EventEmitter<string> = new EventEmitter<string>();

  @HostListener("click", ["$event"])
  public onClick(event: MouseEvent): void {

    event.preventDefault();
    if (!this.payload)
      return;

    let listener = (e: ClipboardEvent) => {
      let clipboard = e.clipboardData || window["clipboardData"];
      clipboard.setData("text", this.payload.toString());
      e.preventDefault();

      this.copied.emit(this.payload);
    };

    document.addEventListener("copy", listener, false)
    document.execCommand("copy");
    document.removeEventListener("copy", listener, false);
  }
}

그런 다음 그대로 사용하십시오.

<a role="button" [copy-clipboard]="'some stuff'" (copied)="notify($event)">
  <i class="fa fa-clipboard"></i>
  Copy
</a>

public notify(payload: string) {
   // Might want to notify the user that something has been pushed to the clipboard
   console.info(`'${payload}' has been copied to clipboard`);
}

참고 : window["clipboardData"]IE는 이해하지 못하므로 필요합니다.e.clipboardData


3
이것을 재사용 가능한 지시문으로 만드는 것에 대한 찬사. 좋은 생각입니다!
Rod

1
실제로, 버전 12.x 뭔가를 시작, 사파리 문제 : 다시입니다
댄 Dohotaru

2
최소한의 해결 방법은 범위를 작성하고 선택으로 그 범위를 추가하는 것, 작업 솔루션은 다음과 같이 보일 것이다 stackblitz.com/edit/angular-labs-copy-clipboard-r1
댄 Dohotaru

window [ "clipboardData"]가 IE에서 정의되지 않았습니까? 어떤 생각?
Victor Jozwicki

모바일에서는 작동하지 않습니다. 대신 ngx-clipboard 플러그인을 사용했습니다.
the-catalin

49

텍스트를 복사 할 때 이것이 훨씬 더 깨끗한 해결책이라고 생각합니다.

copyToClipboard(item) {
    document.addEventListener('copy', (e: ClipboardEvent) => {
      e.clipboardData.setData('text/plain', (item));
      e.preventDefault();
      document.removeEventListener('copy', null);
    });
    document.execCommand('copy');
  }

그런 다음 html의 클릭 이벤트에서 copyToClipboard를 호출하십시오. (클릭) = "copyToClipboard ( 'texttocopy')"


2
e.clipboardData가 정의되지 않았기 때문에 IE에서 작동하지 않습니다.
Dan Dohotaru 2010 년

9
또한 원래의 리스너 필요로 하나가 작동하지 않는의 removeListener는 인수로 전달합니다
댄 Dohotaru에게

2
이벤트 리스너 제거 작동 방법은 다음을 참조하십시오. stackoverflow.com/a/51843984/3849445
user123959

Angular 6에서 잘 작동합니다! Chrome에서 테스트되었습니다. 감사합니다.
moreirapontocom

16

Angular Material v9부터는 이제 클립 보드 CDK가 있습니다.

클립 보드 | 각도 재질

다음과 같이 간단하게 사용할 수 있습니다.

<button [cdkCopyToClipboard]="This goes to Clipboard">Copy this</button>

매력처럼 작동합니다. 적절한 해결책이 있다는 것을 결코 몰랐습니다!
Abdullah Feroz

1
Angular Material v9에서 사용할 수 있습니다.
andreivictor

14

이벤트 핸들러가 제대로 제거되지 않는 문제를 해결하는 jockeisorby의 답변 수정 버전.

copyToClipboard(item): void {
    let listener = (e: ClipboardEvent) => {
        e.clipboardData.setData('text/plain', (item));
        e.preventDefault();
    };

    document.addEventListener('copy', listener);
    document.execCommand('copy');
    document.removeEventListener('copy', listener);
}

1
Firefox에서 작동하지 않습니다. 오류 -document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler
OPTIMUS


1

아래 방법은 메시지 복사에 사용할 수 있습니다.

export function copyTextAreaToClipBoard(message: string) {
  const cleanText = message.replace(/<\/?[^>]+(>|$)/g, '');
  const x = document.createElement('TEXTAREA') as HTMLTextAreaElement;
  x.value = cleanText;
  document.body.appendChild(x);
  x.select();
  document.execCommand('copy');
  document.body.removeChild(x);
}

이것은 참으로 좋은 해결책입니다. 내 응용 프로그램을 위해 시도했지만 작동했습니다. 감사.
jaihind

1

Angular에서이 작업을 수행하고 코드를 단순하게 유지하는 가장 좋은 방법은이 프로젝트를 사용하는 것입니다.

https://www.npmjs.com/package/ngx-clipboard

    <fa-icon icon="copy" ngbTooltip="Copy to Clipboard" aria-hidden="true" 
    ngxClipboard [cbContent]="target value here" 
    (cbOnSuccess)="copied($event)"></fa-icon>

1

각도 cdk를 사용하여 복사,

Module.ts

import {ClipboardModule} from '@angular/cdk/clipboard';

프로그래밍 방식으로 문자열 복사 : MyComponent.ts,

class MyComponent {
  constructor(private clipboard: Clipboard) {}

  copyHeroName() {
    this.clipboard.copy('Alphonso');
  }
}

HTML을 통해 복사 할 요소를 클릭하십시오.

<button [cdkCopyToClipboard]="longText" [cdkCopyToClipboardAttempts]="2">Copy text</button>

참조 : https://material.angular.io/cdk/clipboard/overview


0

첫 번째 제안 된 솔루션이 작동합니다. 변경하면됩니다.

selBox.value = val;

selBox.innerText = val;

즉,

HTML :

<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>

.ts 파일 :

copyMessage(val: string){
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.innerText = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.