javaScript实现复制到剪贴板

使用react-copy-to-clipboard库实现

在项目中引入，直接使用， 里面有一个text，就是要复制的内容，还有一个复制函数 onCopy

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

// 简单使用，value为复制内容
 <CopyToClipboard onCopy={onCopy} text={value}>
	 复制
  <CopyToClipboard/> 

在react中简单使用

import React fron 'react';

interface PropsType {
	value:string;
}

const CopyClick =  (props: PropsType) => {
	const { value } = props;
        const onCopy = () => {
        	if (value) {
            	  alert('复制成功')
            	} else {
                  alert('复制失败，内容为空')
                }
        }
    
   	 return (
    		<CopyToClipboard onCopy={onCopy} text={value}>
	 		<span>复制</span>
  		<CopyToClipboard/> 
   	 )
}

export default CopyClick

使用js实现，复制到剪贴板

首先介绍下会用到的api 知识

1.查询API权限

navigator.permissions.query() 主要用来查询API的权限状态，里面的result.state有三个值，许可（granted）”、“拒绝（denied）”、“需要授权（prompt）”

剪贴板事件有六个，分别是copy、cut、paste、beforecopy（忽略）、beforecut（忽略）和beforepaste（忽略）

2.clipboardData对象以及方法

里面还用到了ClipboardEvent.clipboardData 这个属性,可以操作剪贴板中的数据，ie浏览器中，该对象是window的成员，其他浏览器中，该对象是事件对象的属性。该对象有三个方法，其一getData()，其二setData()，其三clearData()，使用这些方法时需要指定数据类型，ie中数据类型为text或URL，其它浏览器中为mime类型（text/plain）

getData()

从剪切板中获取数据，需要一个参数，表示要获取的数据的类型。

setData()

向剪切板中添加数据，它需要两个参数，其一数据类型，其二文本内容

clearData()

从剪切板中删除数据，需要一个参数，表示要删除的数据的类型

完整实现代码

export const copyToclipboard = (string) => {
  navigator.permissions
    .query({
      name: 'clipboard-write',
    })
    .then(result => {
      if (result.state === 'granted' || result.state === 'prompt') {
        if (window.navigator && window.navigator.clipboard) {
         // 将内容写到剪贴板
          window.navigator.clipboard
            .writeText(string)
            .then(() => {
              console.log('复制成功');
            })
            .catch(err => {
              console.log('复制失败 ');
            });
        } else {
          console.warn('navigator is not  exist');
        }
      } else {
        console.warn('浏览器权限不允许复制');
        // 所以利用clipboardData 进行复制
        copyAgainCallback(string);
      }
    });
};

function copyAgainCallback(string) {
  function handler(event) {
    const clipboardData = event.clipboardData || (window as any).clipboardData ||event.originalEvent.clipboardData;
    // 将值设置到剪贴板
    clipboardData.setData('text/plain', string);
    event.preventDefault();
    document.removeEventListener('copy', handler, true);
  }
  // 监听copy事件将值写入到剪贴板
  document.addEventListener('copy', handler, true);
  const successful = document.execCommand('copy');
  if (successful) {
    alert('复制成功');
  } else {
    alert('复制失败');
  }
}