js自动触发paste事件?

Question

希望点击一个按钮,然后自动触发paste粘贴事件,获取到粘贴板的内容,该怎么实现

document.querySelector('div').addEventListener('click',()=>{
    navigator.permissions.query({name: "clipboard-read"}).then(result => {
        console.log(result);
        if (result.state == "granted" || result.state == "prompt") {
            navigator.clipboard.read().then(async data => {
            })
        }
    });
})

// 异常信息 Uncaught (in promise) DOMException: No valid data on clipboard.

Answer 1

使用Clipboard: https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard/re...

clipboard.js插件: https://clipboardjs.com/ 赋值文本

主要是添加一下定时器就可以了 , 但是不能读取图片

   function getClipboardContents () {
    setTimeout( async () => {
      try {
        const clipboardItems = await navigator.clipboard.read();
        for (const clipboardItem of clipboardItems) {
          for (const type of clipboardItem.types) {
            const blob = await clipboardItem.getType(type);
            console.log("已读取剪贴板中的内容：", await blob.text());
          }
        }
      } catch (err) {
        console.error("读取剪贴板内容失败: ", err);
      }
    }, 1000)
  }

使用原生可以粘贴图片:
https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard_API

  let div = document.querySelector('.outerbox1')

  div.addEventListener('paste', (e) => {
    let file = null;
    const items = (e.clipboardData || window.clipboardData).items;
    if (items && items.length) {
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          // 如果是image类型存为file
          file = items[i].getAsFile();
          break;
        }
      }
    }
    console.log(file, 'file')
    if (file) {
      let reader = new FileReader();
      reader.onload = function (e) {
        // e.target.result是图片的base64地址
        let img = document.createElement('img');
        img.src = e.target.result;
        div.appendChild(img);
      }
      reader.readAsDataURL(file);
    }
  })

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。