JS获取剪切板内容

JavaScript025

JS获取剪切板内容,第1张

使用wangEditor粘贴excel数据时,如果数据中没有图片,一切正常。但是当excel中带有本地图片的数据时,由于js没有读取本地磁盘的权限而显示图片失败,同时也不可能把本地图片地址上传到服务器。

wangEditor应该取的是剪切板中html格式数据,这并不是我们想要的。根据产品提醒,禅道的富文本能够粘贴excel数据带图片。通过调试器分析,得知禅道取剪切板中有图片格式数据,转为base64上传到服务器后,使用img引用图片。

现代浏览器基于安全考虑,js 是无法直接读取剪贴板的。

唯一的可能性是,用户在可编辑元素中(如 contenteditable='true'

的 div)主动触发粘贴操作(如,通过 ctrl+V)。此时通过监听 paste 事件, 可以从event中获取到用户所粘贴的内容。

示例代码(支持现代浏览器):

<div id='editableDiv' contenteditable='true'>Paste here</div> function handlePaste (e) {

    var clipboardData, pastedData

    // 阻止粘贴

    e.stopPropagation()

    e.preventDefault()

    // 获取剪贴板信息

    clipboardData = e.clipboardData || window.clipboardData

    // 获取剪贴板内容,getData 的参数是数据类型,这里为了获取文件路径是 'URL';如果想获取粘贴的文本,用 'Text'

    pastedData = clipboardData.getData('URL')

    // 处理信息,此时 pastedData 应该是 'file:///path/to/xxx'

    alert(pastedData)

}

document.getElementById('editableDiv').addEventListener('paste', handlePaste)

但是,与其费心思这样做,为何不直接做成拖动上传呢,应该更易于使用吧。

示例来源

http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser/2177059#2177059

function copyToClipboard(s){

   if(window.clipboardData){

      window.clipboardData.setData('text',s)

   }else{

      (function(s){

         document.oncopy=function(e){

            e.clipboardData.setData('text',s)

            e.preventDefault()

            document.oncopy=null

         }

      })(s)

      document.execCommand('Copy')

   }

} //用法举例:

copyToClipboard("要复制到剪贴板的文字")