一键复制多行数据

react 项目后台一键复制多行数据需求，
例：
姓名： 小明
性别： 男，
偶像：奥特曼

同步复制

/**
 * 复制文本到剪切板中
 *
 * @export
 * @param {*} value 需要复制的文本
 * @param {*} cb 复制成功后的回调
 */
function copy(value, cb) {
	// 动态创建 textarea 标签
	const textarea = document.createElement('textarea')
	// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
	// textarea.readOnly = 'readonly'
	textarea.readOnly = true
	textarea.style.position = 'absolute'
	textarea.style.left = '-9999px'
	// 将要 copy 的值赋给 textarea 标签的 value 属性
	textarea.value = value
	// 将 textarea 插入到 body 中
	document.body.appendChild(textarea)
	// 选中值并复制
	textarea.select()
	textarea.setSelectionRange(0, textarea.value.length)
	document.execCommand('Copy')
	document.body.removeChild(textarea)
	if (cb && Object.prototype.toString.call(cb) === '[object Function]') {
		cb()
	}
}

缺点：
一，它只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容。

二，它是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应

异步复制

await navigator.clipboard.writeText(text);

该方法不支持http协议下的页面
所以可以两者结合使用

// 一键复制
	async function handleCopyAll() {
		let text = ''
		try {
				text = `姓名: 小明
						性别： 男，
						偶像：奥特曼
					`.replace(/\s{2,}/g, '\r\n')
			await navigator.clipboard.writeText(text);
			message.success('复制成功');
		} catch (err) {
			// http 协议下无法异步复制，采用同步
			try {
				copy(text, () => {
					message.success('复制成功');
				})
			}catch (error) {
				console.error('Failed to copy: ', err);

			}
		}
	}