如何将HTML以HTML格式复制到剪贴板，粘贴到Apple Mail显示样式而非源码？

你用navigator.clipboard.writeText()复制的是纯文本字符串，Apple Mail只会将其当作普通文本解析，所以显示原始HTML源码。要让邮件识别为格式化内容，需要向剪贴板写入富文本格式的数据，具体实现如下：

<a
  className="facebook"
  onClick={async (_) => {
    // 修正HTML语法：将React专属的className改为标准HTML的class，style改为CSS字符串格式
    const htmlContent = `
      <div style="width:284px;" class="cnt-box boxed">
        <img src="https://themekit.dev/shared/thumbs/wide.png" width="284" height="166" />
        <div class="caption">
          <h2>Jelentkezz vagy oszd meg és nyerj 250$-t</h2>
          <p>Segíts megtalálni a megfelelő jelöltet az XY nyitott pozícióiba.</p>
        </div>
      </div>
    `;
    // 准备纯文本降级内容，适配不支持富文本的场景
    const plainText = "Jelentkezz vagy oszd meg és nyerj 250$-t\nSegíts megtalálni a megfelelő jelöltet az XY nyitott pozícióiba.";

    try {
      // 创建HTML格式的Blob对象
      const htmlBlob = new Blob([htmlContent], { type: 'text/html' });
      // 构建剪贴板项，同时提供HTML和纯文本两种格式
      const clipboardItem = new ClipboardItem({
        'text/html': htmlBlob,
        'text/plain': new Blob([plainText], { type: 'text/plain' })
      });
      // 写入剪贴板
      await navigator.clipboard.write([clipboardItem]);
    } catch (err) {
      console.error('复制失败:', err);
    }
  }}
>
  <i className="icon-facebook"></i>
</a>

关键说明 #

• 使用navigator.clipboard.write()替代writeText()：该方法支持写入多格式剪贴板数据，是当前标准的富文本复制方案，无废弃风险。
• 必须提供text/html和text/plain双格式：Apple Mail会优先读取text/html渲染格式化内容，纯文本作为降级选项兼容其他场景。
• 修正HTML语法：将React的className改为标准HTML的class，style={{...}}改为style="..."的CSS字符串，确保邮件客户端能正确解析样式和结构。

内容的提问来源于stack exchange，提问作者János