js 复制文本带样式

一键复制带样式的html文本到邮件

<div><div id='copy-content'><div style={{ fontSize: '16px',fontWeight: 500, lineHeight: '24px', color: '#222', marginBottom: '16px' }}>邀请您参加腾讯会议网络研讨会（Webinar)</div></div><Button onClick={handleCopy}>Copy</Button>
</div>

1. 不带样式的纯文本

const handleCopy = () => {// 获取目标元素的innerHTMLlet innerHtml = document.getElementById('copy-content').innerHTML || ''// 处理innerHTML,使用转义符代替<br>标签const html = innerHtml.replace(/<br>/g, '\n').replace(/<[^>]*>/g, '');// 这是比较新的API，是一个异步方法navigator.clipboard.writeText(html).then(() => {// 按需处理想要的callbackmessage.success('复制成功');});}

2. html文本

const handleCopy = () => {// 获取目标元素的innerHTMLlet innerHtml = document.getElementById('copy-content').innerHTML || ''// 处理innerHTML,使用转义符代替<br>标签const html = innerHtml.replace(/<br>/g, '\n');// 这是比较新的API，是一个异步方法navigator.clipboard.writeText(html).then(() => {// 按需处理想要的callbackmessage.success('复制成功');});}

3. 带样式的纯文本

  const handleCopy= () => {const range = document.createRange();const element = document.getElementById('copy-content'); // 要复制的元素range.selectNode(element);window.getSelection().removeAllRanges();window.getSelection().addRange(range);document.execCommand('copy');window.getSelection().removeAllRanges();message.success('复制成功');};