JS ClipboardEvent ClipboardData 始终为空

Wat*_*ont 11 javascript typescript angular angular6

我想通过 CTRL+V 从 Angular6 中的 ClipboardEvent 接收文件。但剪贴板数据始终为空(我测试了图像和文本)。我在最新的 Chrome/Firefox 版本上对其进行了测试。

在此输入图像描述

正如您在屏幕截图中看到的,文件/项目属性为空。这是我当前的代码:

  ngOnInit() {
    document.addEventListener('paste', this.pasteEvent);
  }

  private pasteEvent(e): void {
    console.log(e);
  }
Run Code Online (Sandbox Code Playgroud)

a b*_*ver 7

由于安全限制和不同的浏览器支持,这可能是不可能的。

要从事件中获取数据,您必须调用getData(format)ClipboardData传递所需的 MIME 类型(或仅传递“文本”文本)。例如

private pasteEvent(e): void {
  console.log(e.clipboardData.getData("text/plain");
}
Run Code Online (Sandbox Code Playgroud)

获取文本。我不确定你是否可以获取文件。

当前的 Chrome 还支持新的Clipboard API

private async pasteEvent(e)  {
  const text = await navigator.clipboard.readText();
  console.log(text);
}
Run Code Online (Sandbox Code Playgroud)

read()但不支持通用方法。