0
点赞
收藏
分享

微信扫一扫

js 复制文本带样式

玉字璧 2024-07-24 阅读 31

一键复制带样式的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 = () => {
    // 获取目标元素的innerHTML
    let innerHtml = document.getElementById('copy-content').innerHTML || ''
    // 处理innerHTML,使用转义符代替<br>标签
    const html = innerHtml.replace(/<br>/g, '\n').replace(/<[^>]*>/g, '');

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

    // 这是比较新的API,是一个异步方法
    navigator.clipboard.writeText(html).then(() => {
      // 按需处理想要的callback
      message.success('复制成功');
    });
  }
  1. 带样式的纯文本
  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('复制成功');
  };
举报

相关推荐

0 条评论