Uncaught TypeError: item.getData is not a function

Question

我想将剪贴板内容粘贴到html页面。内容是从 ms-word 文件中复制的。包含文字和图像。考虑以下代码：

<div id="pasteArea" contenteditable="True"></div>
<script type="text/javascript">
    var pasteArea = document.getElementById('pasteArea');
    pasteArea.onpaste = function (event) {
        event.preventDefault();
        event.stopPropagation();
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        for (index in items) {
            var item = items[index];
            if(item.kind === 'string'){
                console.log(item.getData('text'));
                // Getting the error in here!
            }
            else if(item.kind === 'file'){
                // Code for handling images
            }
        }
    }
</script>

我尝试使用 event.clipboardData.getData('text');，但它获取了整个文本（即跳过了中间的图像）并且文本格式也丢失了。

知道如何处理上述情况吗？谢谢。

Answer 1

您的项目属于 DataTransferItem 类型，因此您应该使用 getAsString() 来检索项目的文本；

此函数将回调函数作为第一个参数： item.getAsString(str => console.log(str));

Answer 2

您正在寻找 getAsString，它需要回调来处理剪贴板。

https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/getAsString

const pasteArea = document.getElementById('pasteArea');

pasteArea.onpaste = event => {
  event.preventDefault();

  const { items } = event.clipboardData;
  for (const item of items) processClipboard(item)
}

const processClipboard = item => {
  if (item.kind === 'string' && item.type === 'text/plain') {

    item.getAsString(s => console.log(s))

  }
}

div { background-color: #ccc; }

<div id="pasteArea" contenteditable="True">Paste something here</div>

Uncaught TypeError: item.getData is not a function

Uncaught TypeError: item.getData is not a function

html

javascript

clipboarddata