clipboardData属性与DataTransfer对象

发表于 分类于

前言

clipboardData属性是ClipboardEvent事件对象的一个属性，其本质上就是一个DataTransfer对象；而ClipboardEvent事件则包括copy、cut和paste这三个原生事件。

通过将剪切板的数据按照DataTransfer对象的方式保存到clipboardData上，可以在相应的事件中来获取或者修改剪切板的数据。

常用方法

getData

DOMString DataTransfer.getData(format);

该方法可以获取到剪切板中对应格式的数据，format参数就是指定数据的格式，其可选值有：

  • text/plain：普通文本；
  • text/uri-list：链接文本；
  • text：等同于text/plain；
  • url：等同于text/uri-list；

If format equals “text”, change it to “text/plain”.

If format equals “url”, change it to “text/uri-list”. [1]

如果没有对应的数据，则会返回一个空字符串。

DataTransferItem对象

可以看出getData()方法只能获取到文本类型的数据，但是有时候剪切板里面保存的数据可能是文件，比如复制一个图片的时候，要想从剪切板中获取图片内容就无法通过getData()方法了；这时候可以从DataTransfer.items属性入手，items属性是一个DataTransferItemList对象（一个伪数组对象），每个元素都是DataTransferItem对象。

该对象的属性有:

  • type：拖拽项（或者剪切板中保存的数据项）的类型，为MIME值；
  • kind：拖拽项的性质，可以是string或者file；

该对象的常用方法有：

  • getAsFile()：尝试将拖拽项数据包装成一个File对象返回，不是文件就返回null（kind对应file）。
  • getAsString(callback)：接受一个回调函数，将拖拽项数据解析为字符串后将该字符串传递给回调函数（kind对应string）；

通过DataTransferItem对象的getAsFile()就可以方便地提取出剪切板中复制的图片等文件，而File对象既可以用于上传，也能转为base64字符串，处理图片就比较便捷了。

参考文档

  1. HTML 5.1 2nd Edition: 5. User interaction ↩︎