关于前端:前端操作剪切板不完全指北

因为浏览器隐衷协定限度，以前浏览器是不容许间接拜访剪切板的，最近几年，随着 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/png 得76+才行。返回值是 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)

参考资料

• navigator clipboard
• electron clipboard