zoukankan      html  css  js  c++  java
  • 前端操作剪切板不完全指北

    由于浏览器隐私协议限制,以前浏览器是不允许直接访问剪切板的,最近几年,随着web应用兴起,W3C也在逐渐拓宽JavaScript应用范围,现在前端也能直接操作剪切板。文中按照访问方式,分为间接访问直接访问

    间接访问

    交互事件

    用户交互事件,如paste(复制)、cut(剪切)、dragstart(拖拽)等,能够通过事件对象Event,访问到剪切板。可以通过这部分操作,我们可以格式化、自定义剪切板中内容。在contenteditable(可编辑)元素中,为了统一粘贴文本样式,我们可以在元素的复制事件中,对文本格式进行过滤。

    let editor = document.getElementById('editor)
    editor.addEventListener('paste', e => {
      e.preventDefault()
      let data = e.clipboardData.getData('text/plain')
      // 格式化粘贴xml标签
      data = data.replace(/>/g, '>')
          .replace(/</g, '&lt;')
      let result = data.split('/n').join('<br />')
      document.execCommand('insertHTML', null, result)
    })
    

    除了文本,我们还能获取其他内容吗?比如图像?答案是一半一半。为什么说一半一半?
    正常情况下,我们用截图软件截图,这部分是能在e.dataTransfer.files中获取到的,截图软件实际上是将base64文件放到了剪切板中。但是,假如我们在操作系统中复制一张图片,在dataTransfer对象中,是获取不到的,这是浏览器隐私协议限制,正如web页面不能直接操作系统文件(虽然部分浏览器已经支持File API)一样,遇到这种需求,需要先放一放。

    在业务开发中,测试童鞋们,总是能给人一些惊喜,谁说只能粘贴,我还可以拖拽,拖拽一些奇奇怪怪的内容进去,看,又发现一个Bug。可编辑元素默认是允许拖拽的,为避免这种方式,给我们的选择只有两个,第一,禁止拖拽,可以,但是比较暴力,第二就是改写拖拽内容,监听dragstart事件。

    let editor = document.getElementById('editor)
    editor.addEventListener('dragstart', e => {
      e.preventDefault()
      // 获取页面选中文本
      let selection = window.getSelection()
      let data = selection.toString()
      e.dataTransfer.setData('text/plain', data)
    })
    

    直接访问

    clipboard API

    最近navigator新增了Clipboard API,不仅能够对剪切板文本、文件读取,还提供了写的操作,但是兼容性较差。文本读写Chrome 66版本即支持,但是image/png76+才行。返回值是Promise,用起来比较方便,但是对于剪切板的访问,首先需要运行在https服务页面中,其次需要请求用户授权,授权通过后,才能访问。基本使用示例如下:

      // 读取文本
      navigator.clipboard.readText().then(
        clipText => document.getElementById("editor").innerText = clipText
      );
    
      // 读取剪切板中图片
      navigator.permissions.query({name: "clipboard-read"}).then(result => {
        if (result.state == "granted" || result.state == "prompt") {
          navigator.clipboard.read().then(data => {
            for (let i=0; i<data.items.length; i++) {
              if (data.items[i].type != "image/png") {
                alert("Clipboard contains non-image data. Unable to access it.");
              } else {
                const blob = data.items[i].getType("image/png");
                imgElem.src = URL.createObjectURL(blob);
              }
            }
          });
        }
      });
    

    electron clipboard

    electron现在被越来越多的公司纳入到桌面应用开发中。由于剪切板操作一直是web应用开发的一个痛点,在electron中,不管主进程还是渲染进程,都能使用剪切板API,操作也丰富许多,不仅能够操作文本、文件,还能操作Buffer,使得很多操作都成为可能。

    const { clipboard } = require('electron')
    
    clipboard.writeText('hello i am a bit of text!')
    
    const text = clipboard.readText()
    console.log(text)
    

    参考资料

  • 相关阅读:
    Ubuntu 19.04安装phpipam软件
    ubuntu snmp 安装与配置
    xcode 拷贝新的ios image 进去以后 出现 the divices is locked
    常用 Git 命令清单
    ios 从工程中删除Cocoapods
    ios app上架流程
    MySql某一列累计查询
    Docx4j将html转成word时,br标签为软回车的问题修改
    java面试题
    java获取classpath
  • 原文地址:https://www.cnblogs.com/gerry2019/p/14194192.html
Copyright © 2011-2022 走看看