React中实现一键复制——五种办法

React中实现一键复制——五种办法

• copy-to-clipboard库（推荐）
• react-copy-to-clipboard库（推荐）
• navigator.clipboard.writeText(e)（推荐）
• document.execcommand(“copy”)
• copy-js库

copy-to-clipboard

1、安装方式

// npm安装---这种方式可能会对babel的版本有限制
npm i --save copy-to-clipboard


//cdn引入
<script src="https://wzrd.in/standalone/copy-to-clipboard@latest" async></script>
1
2
3
4
5
6

2、使用方式

import copy from 'copy-to-clipboard';
const handleClick = ()=>{
	copy('复制的内容');
	message.success('复制成功')
}

<Button onClick={handleClick}>复制</Button>
1
2
3
4
5
6
7

react-copy-to-clipboard

该方法是基于copy-to-clipboard的，如果在安装copy-to-clipboard的时候，发现和其他部分npm包有版本限制的话，那估计这个也不行，但是也不是不可以试试
1、安装

npm i --save react-copy-to-clipboard
1

2、用法——这里有个地方要注意，在中，只能有一个根元素，并且本人亲试，如果在中，一个根元素裹着两个兄弟节点比如div和一个button的话，复制也不会生效，我也不知道为啥，有兴趣的小伙伴可以去看看源码。

import { CopyToClipboard } from 'react-copy-to-clipboard';

 <CopyToClipboard text={'复制的内容'}
   onCopy={(_, result) => {
     if (result) {
       message.success('复制成功');
     } else {
       message.error('复制失败，请稍后再试');
     }
   }}
 >
   <Button
     type='primary'
     icon={<CopyOutlined />}
   />
 </CopyToClipboard>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

document.execcommand(“copy”)——已被弃用

不过好似有的浏览器还可以使用，具体看文档点我
这个方法我没有使用过，有什么坑我也不清楚。

使用方法

<button id="btn"  style="margin-top: 40px;">一键复制</button>

const btn = document.querySelector('#btn');
  btn.addEventListener('click', () => {
      const textarea= document.createElement('textarea');
      textarea.setAttribute('readonly', 'readonly');
      textarea.value = 'xxxxx';
      document.body.appendChild(textarea);
      textarea.select();
      if (document.execCommand('copy')) {
          document.execCommand('copy');
          alert('复制成功');
      }
      document.body.removeChild(textarea);
  })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

copy-js库

这块我只是找到了这个库，也没有使用过，但是我看源码底层也是使用的document.execcommand("copy")
1、安装

// npm包下载
npm install copy-js --save

// CDN导入
<script src="//cdn.rawgit.com/duyetdev/copy.js/master/dist/copy.min.js"></script>
1
2
3
4
5

2、使用

import copy from 'copy-to-clipboard';
copy('hello world', function(err) {
    if (err) console.log('Some thing went wrong!');
 
    console.log('Copied!');
});
1
2
3
4
5
6

navigator.clipboard.writeText(e)

这个方法也有踩坑的地方，开发时间比较短，也没有具体去研究原因
这个方法的参数e，是需要拿到input文本框的value值为复制的节点

但是这个方法可能在一些应用里边的端内浏览器会有限制，在正常浏览器里是可以使用的，但是比如说现在在飞书端内浏览器里边是没有clipboard这个对象的。还是得看场景使用。

1、使用方法

const { Search } = Input;
const copyLink = (e: any) => {
  navigator.clipboard.writeText(e).then(
    () => {
      message.success(intl.t('复制成功'));
      console.log(e);
    },
    () => {
      message.error(intl.t('复制失败，请稍后再试'));
    },
  );
};


 <Search
   bordered={false}
   value={window.location.href}
   enterButton={intl.t('复制链接')}
   size='middle'
   onSearch={copyLink}
 />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

可能还有其他一些方法，暂时没有想到的