前端复制文本

最新推荐文章于 2024-09-16 06:30:00 发布

浅浅的痕迹

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量103

点赞数

文章标签：前端 javascript 开发语言 react.js

本文链接：https://blog.csdn.net/cdy_1/article/details/133128366

版权

import { message } from "antd"
// 复制
export let copyToCliboard = (text) => {

  const execCommandCopy = text => {
    if (!text) {
      return message.info('复制内容为空')
    }
    //   deprecated
    const input = document.createElement('textarea')
    try {
      input.setAttribute('readonly', 'readonly');
      input.value = text.replace(/\n/g, "\r") ///n的换行会丢失
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      message.success('复制成功!')
    } catch (e) {
      message.error('自动复制被禁用，请手动选取复制')
    }
  }

  const navigatorCopy = text => {
    if (!text) {
      return message.info('复制内容为空')
    }
    try {
      navigator.clipboard.writeText(text).then(
        () => {
          message.success('复制成功')
        },
        () => {
          execCommandCopy(text)
        },
      )
      return
    } catch (e) {
      execCommandCopy(text)
      console.error('不支持异步剪切板:', e)
    }
  }

  console.log('复制功能初始化')
  // 重写函数，避免函数执行重复性判断, 例如上述console.log('复制功能初始化')只会执行一次
  copyToCliboard = !navigator.clipboard ? execCommandCopy : navigatorCopy
  copyToCliboard(text)
}