Angular6中通过Ctrl+V接收文件时ClipboardData始终为空

嘿，我来帮你搞定这个剪贴板数据拿不到的问题！先分析下可能的原因，再给你靠谱的解决方案：

为啥会出现clipboardData为空的情况？ #

1. 事件绑定的姿势不对：你直接用document.addEventListener绑定粘贴事件，在Angular环境里这种原生绑定容易出现上下文丢失的问题，而且可能没正确获取到剪贴板的访问权限。
2. 剪贴板数据的获取方式没搞对：不同浏览器对剪贴板数据的存储位置有细微差别，另外如果没正确遍历clipboardData.items，就会看起来数据是空的。

正确的实现方式（Angular风格） #

推荐用Angular自带的@HostListener装饰器来监听粘贴事件，这更符合Angular的组件规范，还能避免上下文问题。同时我们要正确遍历剪贴板的items来提取文件：

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    // 不用再手动给document加监听啦，HostListener会帮我们处理好
  }

  @HostListener('document:paste', ['$event'])
  private async handlePaste(event: ClipboardEvent): Promise<void> {
    event.preventDefault(); // 先阻止默认粘贴行为，避免浏览器自带的操作干扰我们

    // 兼容不同浏览器的剪贴板数据获取方式
    const clipboardData = event.clipboardData || (window as any).clipboardData;
    if (!clipboardData) {
      console.log('没法访问剪贴板数据哦');
      return;
    }

    // 遍历剪贴板里的所有内容，找出文件或文本
    for (let i = 0; i < clipboardData.items.length; i++) {
      const item = clipboardData.items[i];
      if (item.kind === 'file') {
        const file = item.getAsFile();
        console.log('拿到的文件:', file);
        // 这里就可以处理你的文件啦，比如上传、预览啥的
      } else if (item.kind === 'string') {
        // 文本内容需要异步获取
        const text = await new Promise(resolve => item.getAsString(resolve));
        console.log('拿到的文本:', text);
      }
    }
  }
}

几个关键细节要注意 #

• 阻止默认行为：调用event.preventDefault()能避免浏览器把内容自动粘贴到输入框之类的地方，让我们完全掌控剪贴板数据。
• 跨浏览器兼容：同时检查event.clipboardData和window.clipboardData，不管是Chrome还是Firefox都能覆盖到。
• 文本内容异步获取：getAsString是异步方法，得用Promise来处理才能拿到正确的文本内容。

改成这样之后，你应该就能顺利拿到剪贴板里的图片和文本啦！

内容的提问来源于stack exchange，提问作者Joba