美文网首页
复制,粘贴(navigator.clipboard.write(

复制,粘贴(navigator.clipboard.write(

作者: 月下小酌_dbd5 | 来源:发表于2024-09-09 11:45 被阅读0次

复制

  • 文本复制( navigator.clipboard.writeText() )
 let text = "123"
 navigator.clipboard.writeText(text).then(() => {
    ElMessage.success('复制成功')
  });
  • Dom元素复制-Html( navigator.clipboard.write() )
const shareRef = ref() //获取Dom元素
 // 新标准 注意此处是异步的
 try {
     const item = new window.ClipboardItem({
        "text/html": new Blob([shareRef.value.innerHTML], { type: "text/html" })
      });
      await navigator.clipboard.write([item]).then(function() {
        ElMessage.success('复制成功')
      }, function(err) {
        ElMessage.error('复制失败')
        console.error('err: ', err);
      })
    
   } catch (error) {
      ElMessage.error('复制失败')
   }

获取粘贴剪贴板的内容(监听addEventListener)

  • 文本
 if(inputRef.value) {
      inputRef.value.addEventListener('paste', async (event:any) => {
          // 在这里编写你想在粘贴时执行的代码
          // alert('内容已粘贴!');
          // 1.可以通过navigator.clipboard.readText()获取粘贴板的内容
          navigator.clipboard.readText().then(clipText => {
              console.log('粘贴的文本内容:', clipText);
          }).catch(error => {
              console.error('读取剪贴板失败:', error);
          });

          // 2.可以通过event.clipboardData.getData('text')获取粘贴板的内容
          var pastedData = event.clipboardData.getData('text');
          console.log(pastedData);
      });
    }
  • Html--(注意:html片段直接在input输入框中粘贴不上,需要手动赋值)
if(inputRef.value) {
      inputRef.value.addEventListener('paste', async (event:any) => {
        // 异步
        try {
          const clipboardItems = await navigator.clipboard.read();
          for (const clipboardItem of clipboardItems) {
            for (const type of clipboardItem.types) {
              const blob = await clipboardItem.getType(type);
              const html = await blob.text()
              // const tempHtml = html.replace(/<[^>]+>/g, '\n');
              const tempHtml1 = html.replace(/<\/d[^>]+>/g, '\n');
              const tempHtml2 = tempHtml1.replace(/<[^>]+>/g, '');

              console.log(html) //<div>123</div><div>456</>
              console.log(tempHtml2) // 123\n456
              // console.log(URL.createObjectURL(blob));
              inputValue.value = tempHtml2 // 赋值
            }
          }
        } catch (err:any) {
          console.error(err.name, err.message);
        }
      });
    }

相关文章

  • 2020-03-21推荐“一键复制粘贴工具”,减轻双手负担

    一键复制粘贴工具简化了windows的文字复制、粘贴功能,真正实现了不间断复制,顺序粘贴的功能,配合丰富的复制粘贴...

  • JavaScript复制内容到粘贴板

    JavaScript复制内容到粘贴板;AngularJS复制内容到粘贴板;VueJS复制内容到粘贴板;其实都一样啦...

  • 复制,粘贴。

    你的生活是怎样,有没有每一天都很新鲜。 我的生活怎么样,每一天都在复制粘贴。

  • 复制,粘贴

    2015年7月份,我又再次回到了家中,只是这次变得不同。回到家中像记忆与所期盼的一样,杏子黄了,葡萄透绿透绿的。天...

  • 粘贴复制

    人与人相处有时候真的很奇怪 少一分怕不够,多一分怕打扰 进一步太近,退一步太远 人与人聊天大多时候很无聊 “你在干...

  • 复制   粘贴

    复制一个太阳 粘贴在我的世界 从此不再有阴雨连绵 复制一轮圆月 粘贴在我的世界 从此不再有月缺难圆 复制一个春天 ...

  • 粘贴复制

    我看透人的面目,人的本质就是一个可怜的小虫。对自己一无所知的人,必将终以黑夜般失败。 。。。。。。。 我会告诉你,...

  • 复制,粘贴

    阳光并不刺眼,窗外的枯树上几只麻雀在叽叽喳喳的叫着,孩子放了学,家里的烟囱冒着一缕缕青丝。 可是孩子并不能看见,结...

  • 复制 粘贴

    我发现一件有意思的事 几乎所有人,都会坚持自己曾经取得成功的工作方式,而不愿意去分析当时的成功是否有环境、时机的因...

  • Android 复制粘贴

    复制: 粘贴:

网友评论

      本文标题:复制,粘贴(navigator.clipboard.write(

      本文链接:https://www.haomeiwen.com/subject/lazeljtx.html