如何实现在邮件中分享带HTML格式的文章？

你遇到的问题本质是mailto协议本身只支持纯文本内容，不管你通过直接构造链接还是next-share组件传递HTML代码，邮件客户端都会把这些标签当成普通文本显示——因为mailto没有提供指定邮件内容类型为HTML的参数。

下面是两种可行的解决思路：

1. 通过服务器端发送HTML邮件 #

这是最可靠的方案，前端触发的mailto由本地邮件客户端处理，无法控制格式；而后端可以直接设置邮件的内容类型为HTML，确保格式正常渲染。

示例后端代码（Node.js + Nodemailer） #

const nodemailer = require('nodemailer');

async function sendHtmlEmail(to, subject, htmlBody) {
  // 创建邮件传输器，可替换为其他邮件服务（如Outlook、企业邮箱）
  let transporter = nodemailer.createTransport({
    service: 'Gmail',
    auth: {
      user: '你的邮箱地址',
      pass: '你的邮箱授权码'
    }
  });

  // 发送HTML格式邮件
  let info = await transporter.sendMail({
    from: '你的邮箱地址',
    to: to,
    subject: subject,
    html: htmlBody // 直接传入HTML内容
  });

  console.log('邮件发送成功：', info.messageId);
}

前端调用接口示例 #

async function sendFormattedEmail() {
  const htmlContent = '<a href="https://google.com/">some link</a>';
  try {
    await fetch('/api/send-email', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        to: 'email@example.com',
        subject: 'Hello from Abstract!',
        htmlBody: htmlContent
      })
    });
    alert('邮件已发送');
  } catch (err) {
    console.error('发送失败：', err);
  }
}

2. 前端替代方案（体验稍弱） #

如果不想依赖后端，可以做一个格式化内容的预览区域，提示用户手动复制区域内的格式化内容，再粘贴到邮件客户端：

<div id="html-content" style="display:none;"><a href="https://google.com/">some link</a></div>
<button onclick="copyFormattedContent()">复制格式化内容</button>

<script>
function copyFormattedContent() {
  const contentEl = document.getElementById('html-content');
  const range = document.createRange();
  range.selectNode(contentEl);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');
  window.getSelection().removeAllRanges();
  alert('已复制格式化内容，请粘贴到邮件中');
}
</script>

内容的提问来源于stack exchange，提问作者domanskyi