1. 浏览器自带API

// 简单使用
function copyToClipboard(text) {
  navigator.clipboard.writeText(text);
}           

具体例子copyButton

<!-- HTML -->
<div>
  <input type="text" class="to-copy" placeholder="Type something..." aria-label="Type something">
  <button class="write-btn">Copy to clipboard</button>
</div>

<div>
  <h3 class="clipboard-results"></h3>
  <button class="read-btn">Paste from clipboard</button>
</div>

// JavaScript
const readBtn = document.querySelector('.read-btn');
const writeBtn = document.querySelector('.write-btn');

const resultsEl = document.querySelector('.clipboard-results');
const inputEl = document.querySelector('.to-copy');

readBtn.addEventListener('click', () => {
  navigator.clipboard.readText()
    .then(text => {
      resultsEl.innerText = text;
    })
    .catch(err => {
      console.log('Something went wrong', err);
    })
});

writeBtn.addEventListener('click', () => {
  const inputValue = inputEl.value.trim();
  if (inputValue) {
    navigator.clipboard.writeText(inputValue)
      .then(() => {
        inputEl.value = '';
        if (writeBtn.innerText !== 'Copied!') {
          const originalText = writeBtn.innerText;
          writeBtn.innerText = 'Copied!';
          setTimeout(() => {
            writeBtn.innerText = originalText;
          }, 1500);
        }
      })
      .catch(err => {
        console.log('Something went wrong', err);
      })
  }
});

2. copy-to-clipboard(个人认为最简)

具体例子copy-to-clipboard

import copy from 'copy-to-clipboard';
 
copy('Text');
 
// Copy with options
copy('Text', {
  debug: true,
  message: 'Press #{key} to copy',
});

<!-- 简单用法 HTML -->
<input type="text" class="input-bar">
<button class="copy-btn">Copy to clipboard</button>

// 简单用法 JavaScript
import {message} from 'antd';
import copy from 'copy-to-clipboard';
const copyBtn = document.querySelector('.copy-btn');
const inputBar = document.querySelector('.input-bar');

copyBtn.addEventListener('click', () => {
   copy(inputBar.innerText);
   message.success('复制成功');
});

Value	Default	Notes
options.debug	false	Boolean. 可选参数. 开启可使输出到控制台。
options.message	Copy to clipboard: #{key}, Enter	String. 可选参数. 复制完成后的提示信息。
options.format	"text/html"	String. 可选参数. 设置要复制的MIME类型。使用text / html复制为 html，text / plain以避免粘贴到富文本编辑器时显示的继承样式。
options.onCopy	null	function onCopy(clipboardData: object): void. 可选参数，接收用于添加自定义行为（如其他格式）的剪贴板数据元素

3. react-copy-to-clipboard(JSX写法)

具体例子react-copy-to-clipboard

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

class App extends React.Component {
  state = {
    value: '',
    copied: false,
  };

  render() {
    return (
      <div>
        <input value={this.state.value}
          onChange={({target: {value}}) => this.setState({value, copied: false})} />

        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <span>Copy to clipboard with span</span>
        </CopyToClipboard>

        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <button>Copy to clipboard with button</button>
        </CopyToClipboard>

        {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
      </div>
    );
  }
}

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);