一鍵復制帶樣式的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>
- 不帶樣式的純文本
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('復制成功');});}
- 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('復制成功');});}
- 帶樣式的純文本
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('復制成功');};