js 复制文本带样式

Hope Fancy

已于 2024-07-02 10:51:56 修改

阅读量415

点赞数 3

文章标签： javascript 前端 java

于 2024-07-01 10:51:57 首次发布

本文链接：https://blog.csdn.net/Meetacoo/article/details/140093484

版权

一键复制带样式的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 = () => {
    // 获取目标元素的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('复制成功');
    });
  }

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('复制成功');
    });
  }

带样式的纯文本

  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('复制成功');
  };