JS ClipboardEvent clipboardData 总是空的

Question

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

如您在屏幕截图中所见，files/items 属性为空。这是我当前的代码：

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

  private pasteEvent(e): void {
    console.log(e);
  }

Answer 1

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

要从您的活动中获取数据，您必须在 clipboardData 上调用 getData(format) 并传递所需的 MIME 类型（或者仅 'Text' 用于文本）。例如

private pasteEvent(e): void {
  console.log(e.clipboardData.getData("text/plain");
}

获取文本。我不确定你是否能得到文件。

当前Chrome也支持新的Clipboard API:

private async pasteEvent(e)  {
  const text = await navigator.clipboard.readText();
  console.log(text);
}

虽然不支持通用 read() 方法。

JS ClipboardEvent clipboardData always empty