记一个vue开发问题-----js如何从浏览器剪贴板获取内容

最近公司开始了一个新项目，由于人手不够，让我一个搞qt的负责前端开发部分，内心简直一千匹马奔腾，但是想了想多学点儿东西总是好的，很多项目经理也都是前后端通吃，而且本人以前也做过网站，多学点儿东西总是好的。不多说了，讲问题吧。

-------->>>js如何获取浏览器剪贴板里边的内容

上网找了半天，都是讲如何复制内容 到浏览器剪贴板里边。
而且有些同学的获取方式经过本地测试又不行，例如：
通过

window.clipboardData.getData('Text')

这种方式执行是这样的:

根本获取不到这个对象。
最后发现其实剪贴板内容保存在window.navigator.clipboard里边。
而且剪贴板内容需要异步获取，以下是在chrome浏览器中执行通过的代码：

async getClipboardText() {
      const clipboardItems = await window.navigator.clipboard.read()
      let textHtml, textPlain
      for (const clipboardItem of clipboardItems) {
        for (const type of clipboardItem.types) {
          const item = await clipboardItem.getType(type)
          if (item && item.type === 'text/html') {
            textHtml = await item.text()
          }
          if (item && item.type === 'text/plain') {
            textPlain = await item.text()
          }
        }
      }
      console.log(textPlain)
      return { textHtml, textPlain }
    }

注：此方式需要开启浏览器的剪贴板权限