window.clipboardData在Microsoft Edge中未定义

Question

我正在尝试允许用户从浏览器复制数据网格中的数据。这在Microsoft Edge中不起作用。在Microsoft Edge中打印时，_window.clipboardData似乎返回undefined。

我让打印语句显示window.navigator.clipboard和_window.clipboardData都是未定义的。为什么_window.clipboardData返回undefined？

我使用_window是因为在使用window.clipboardData时，我会得到这样的错误:属性'clipboardData‘在类型'Window & typeof globalThis’上不存在。

copyData(event: KeyboardEvent){
/*OTHER CODE*/
  if (window.navigator.clipboard) {
    windowNavigator.clipboard.writeText(data);
  } else {
    data = data.substring(0, data.length-1); //remove newline for Edge andIE
    const _window = window;
    _window.clipboardData.setData("text", data);
  }
}

Answer 1

您可以使用event.clipboardData，而不是window.clipboardData，请参考以下代码：

html页面中的代码：

<div class="source"  (copy)="oncopyData($event)" contenteditable="true">Try copying text from this box...</div>
<div class="target" (paste)="onPaste($event)" contenteditable="true">...and pasting it into this one</div>

component.ts文件中的代码：

  oncopyData(event: ClipboardEvent){
    const selection = document.getSelection();
    event.clipboardData.setData('text/plain', "Copy function: " + selection.toString().toUpperCase() );
    event.preventDefault();
  }
  onPaste(event:ClipboardEvent){
    let paste = (event.clipboardData).getData('text');
    paste = "Paste function: "+paste.toUpperCase();

    const selection = window.getSelection();
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();
    selection.getRangeAt(0).insertNode(document.createTextNode(paste));

    event.preventDefault();
  }

结果如下(使用Microsoft Edge 44.18362版本)：

​

​