记录一下JavaScript解析当前复制的内容信息

发表于 更新于 分类于 阅读次数：

最近负责一套人员信息管理的系统的开发，某些场景下涉及到从别的第三方网站或者Excel电子文档中复制某些内容后在开发的系统中进行操作，这就需要用到JavaScript的粘贴事件Paste了

我们在使用Paste事件时，可通过Event对象获取到复制的内容信息，如下：

1
2
3
4
5
function onPaste(event) {
  // 这里的 element 即复制的内容信息
  let element = event.clipboardData.getData('text/html')
      
}

当然有些场景是需要根据复制的内容进行相关的处理，如复制的是图片，网页，文本，视频等等。

这种场景该如何处理呢？

好在，JavaScript或者说浏览器已经帮我们判断了复制内容的类型了，可通过 event.clipboardData.types来判断内容类型

在JavaScript中，event.clipboardData.types属性返回一个DOMStringList对象，其中包含了剪贴板中可用的数据类型。常见的类型包括：

  • "text/plain"：纯文本类型。
  • "text/html"：HTML格式的文本。
  • "text/rtf"：富文本格式。
  • "text/csv"：逗号分隔值（CSV）格式。
  • "image/png"：PNG图像格式。
  • "image/jpeg"：JPEG图像格式。
  • "image/gif"：GIF图像格式。
  • "application/pdf"：PDF文档格式。
  • "application/msword"：Microsoft Word文档格式。
  • "application/vnd.ms-excel"：Microsoft Excel电子表格格式。
  • "application/vnd.ms-powerpoint"：Microsoft PowerPoint演示文稿格式。
  • "application/json"：JSON数据格式。

除了上述常见的类型外，还可以存在其他自定义的数据类型，具体取决于剪贴板中可用的数据内容。

您可以通过访问event.clipboardData.types来查看特定事件中剪贴板中可用的数据类型，并根据需要进行相应的处理。

获取对应的文本类型使用 event.clipboardData.getData()方法即可，如：

要在JavaScript中获取粘贴的图片，您可以使用paste事件和DataTransfer对象来访问剪贴板中的数据。以下是一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
document.addEventListener('paste', function(event) {
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;

  for (var i = 0; i < items.length; i++) {
    var item = items[i];

    if (item.type.indexOf('image') !== -1) {
      var blob = item.getAsFile();
      var reader = new FileReader();

      reader.onload = function(event) {
        var imageDataUrl = event.target.result;
        // 在这里可以使用获取到的图片数据（imageDataUrl）
      };

      reader.readAsDataURL(blob);
    }
  }
});

在上述代码中，我们通过监听paste事件来捕获粘贴操作。然后，我们使用event.clipboardData或event.originalEvent.clipboardData来获取DataTransfer对象，其中包含了剪贴板中的数据项。我们遍历这些数据项，检查其类型是否为图像类型（item.type.indexOf('image') !== -1）。如果是图像类型，我们使用item.getAsFile()方法获取图像的Blob对象，并使用FileReader读取图像数据。通过FileReader的onload事件，我们可以获取到图像的数据URL（imageDataUrl），您可以在该事件处理程序中使用该数据URL进行进一步的操作，例如显示图像或上传图像。

请注意，由于安全性限制，某些浏览器可能不允许访问剪贴板中的图像数据。此外，不同浏览器对paste事件和DataTransfer对象的支持可能会有所差异，因此在实际使用中可能需要进行兼容性处理。