让前端飞

简单的复制文本到剪切板

2020-04-14  本文已影响0人  littleyu

copyTextToClipboard

直接调用会出现 DOMException: Document is not focused.

最好主动触发,如 click 后调用

function clipboardCopy (text) {
  if (navigator.clipboard) { // 如果浏览器兼容该 API
    return navigator.clipboard.writeText(text).catch(function (err) {
      throw (err !== undefined ? err : new DOMException('The request is not allowed', 'NotAllowedError'))
    })
  }

  // 或者使用 document.execCommand()

  // 把需要复制的文本放入 <span>
  const span = document.createElement('span')
  span.textContent = text

  // 保留文本样式
  span.style.whiteSpace = 'pre'

  // 把 <span> 放进页面
  document.body.appendChild(span)

  // 创建选择区域
  const selection = window.getSelection()
  const range = window.document.createRange()
  selection.removeAllRanges()
  range.selectNode(span)
  selection.addRange(range)

  // 复制文本到剪切板
  let success = false
  try {
    success = window.document.execCommand('copy')
  } catch (err) {
    console.log('error', err)
  }

  // 清除战场
  selection.removeAllRanges()
  window.document.body.removeChild(span)

  return success
    ? Promise.resolve()
    : Promise.reject(new DOMException('The request is not allowed', 'NotAllowedError'))
}
上一篇 下一篇

猜你喜欢

热点阅读