如何从serveur中的剪贴板粘贴？

Question

我的角度项目存在问题，在localhost中测试我的函数时从剪贴板粘贴数据它运行良好

clipboard.js文件：

function pasteClipBoard(){}

pasteClipBoard.prototype.clipboardData = function clipboardData(textbox){

    navigator.clipboard.readText().then(

        clipText => textbox.value = clipText
    )
}
var clipboard = new pasteClipBoard()    
export {clipboard}

在.ts文件中使用我的剪贴板功能：

@ViewChild("keyTextbox") keyTextbox:DxTextBoxComponent

clipboardPaste($t){
    clipboard.clipboardData(this.keyTextbox)
}

.html文件：

<dx-text-box id="textbox_paste" [(value)]="textbox" #keyTextbox width="85%"></dx-text-box>

<dx-button icon="glyphicon glyphicon-paste" hint="Paste data from clipboard" width="15%" (onClick)="clipboardPaste($event)"></dx-button>

但在服务器（IIS）上它不能使用此错误消息：

错误TypeError：无法读取未定义的属性“readText”

https://stackblitz.com/edit/angular-b1f7ou

Answer 1

我已修改你的代码，如波纹管，

在您的组件上，切换到：

export class AppComponent  {
  @ViewChild("keyTextbox") keyTextbox:ElementRef // <-- should be ElementRef.

  clipboardPaste($t){
      clipboard.clipboardData(this.keyTextbox.nativeElement); // Here we provide the real HTMLElement object as parameter.
  }
}

然后在剪贴板帮助器上：

pasteClipBoard.prototype.clipboardData = textbox => {
  const el = document.createElement('textarea'); // We create temp textarea.
  el.value = textbox.value; // We populate the original values.
  el.setAttribute('readonly', ''); // we make it hidden.
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el); // We inject it on the dom to make next line working.
  el.select(); // We select the full text.
  document.execCommand('copy'); // We ask the browser to copy the content.
  document.body.removeChild(el); // We remove from dom the temp textarea.
}

you can have look on the live sample