Копирование текста в буфер обмена звучит довольно просто, но поверьте мне, мне потребовалось много времени, чтобы заставить его работать для всех браузеров и устройств.
Самый простой способ сделать это - использовать javascript «execCommand».
public copyText(textToBeCopied) { let textarea = null; textarea = this.document.createElement("textarea"); textarea.style.height = "0px"; textarea.style.left = "-100px"; textarea.style.opacity = "0"; textarea.style.position = "fixed"; textarea.style.top = "-100px"; textarea.style.width = "0px"; document.body.appendChild(textarea); // Set and select the value (creating an active Selection range). textarea.value = textToBeCopied; textarea.select(); // Ask the browser to copy the current selection to the clipboard. let successful = document.execCommand("copy"); if (successful) { // do something } else { // handle the error } if (textarea && textarea.parentNode) { textarea.parentNode.removeChild(textarea); } }
В приведенном выше коде я использую javascript «execCommand» для копирования текста в буфер обмена. При этом мы динамически создаем элемент textarea с высотой и шириной как 0px, а также устанавливаем другие свойства, чтобы не отображать это textarea в пользовательском интерфейсе. Затем присвойте требуемое значение этому текстовому полю, выберите содержимое с помощью метода select () и вызовите execCommand, чтобы скопировать этот текст в буфер обмена. После копирования удалите это динамически созданное текстовое поле.
Единственным недостатком использования этого метода является то, что метод execCommand не работает в браузере Safari, а также, если вы используете рендеринг на стороне сервера в angular 2, вы не можете использовать объект документа окна.
В качестве альтернативы я нашел другой плагин javascript для копирования текста в буфер обмена, который называется clipboard.js. Но вопрос в том, как использовать clipboard.js с angular 2 ????
Чтобы использовать clipboard.js с angular 2, сначала вы должны включить файл clipboard.js в атрибут «scripts» .angular-cli.json, или, если вы используете webpack или systemJS, выполните необходимую конфигурацию для использования clipboard.js в своем приложении. . Вы можете найти этот файл по ссылке ниже.
Чтобы использовать clipboard.js с angular 2, я создам собственный ClipboardDirective. Так что я могу использовать его где угодно в вашем проекте. Реализация директивы следующая.
import { EventEmitter, ElementRef, Output, Input, Directive } from '@angular/core'; declare var Clipboard: any ; @Directive({ selector: '[clipboard]' }) export class ClipboardDirective { clipboard: any; @Input('clipboard') elt:ElementRef; @Output() clipboardSuccess:EventEmitter<any> = new EventEmitter(); @Output() clipboardError:EventEmitter<any> = new EventEmitter(); constructor(private eltRef:ElementRef) { } ngOnInit() { this.clipboard = new Clipboard(this.eltRef.nativeElement, { target: () => { return this.elt; } }); this.clipboard.on('success', (e) => { this.clipboardSuccess.emit(); }); this.clipboard.on('error', (e) => { this.clipboardError.emit(); }); } ngOnDestroy() { if (this.clipboard) { this.clipboard.destroy(); } } }
Мы хотим иметь возможность прикрепить буфер обмена к элементу с помощью директивы и предоставить в качестве параметра элемент DOM, с которым мы хотим связать. Значение, указанное в указанном целевом элементе, будет использоваться для копирования его текста. Вот пример использования:
<div> <input #elementToCopy/> <button [clipboard]="elementToCopy
(clipboardSuccess)="onSuccess()" (clipboardError)="onError()">Copy</button> </div>
Вы также можете реализовать методы для успешного и неудачного копирования события в соответствии с требованиями.
Выполнено!!! Это все, что вам нужно сделать, чтобы скопировать текст в буфер обмена.