实现复制到剪贴板并保留邮件签名的HTML元素

你的问题出在用<input>元素存储HTML内容——input只能保存纯文本，所以复制的时候把HTML源代码当成普通文本复制了，而Outlook、Mac Mail这类邮件客户端需要的是已经渲染好的富文本格式。下面给你两种可行的解决方案：

方案1：基于contenteditable的兼容方案（支持旧浏览器） #

修改你的复制函数，用隐藏的可编辑<div>来承载HTML内容，这样选中复制的是渲染后的富文本，而非源代码：

function copyToClipboard(element) {
  // 创建隐藏的可编辑div，避免干扰页面
  var $temp = $("<div>");
  $temp.css({
    position: "absolute",
    left: "-9999px",
    top: "0",
    whiteSpace: "pre-wrap" // 保留文本换行和格式
  });
  // 复制目标元素的HTML内容，并设置为可编辑
  $temp.html($(element).html()).attr("contenteditable", true);
  $("body").append($temp);
  
  // 选中div内的全部内容
  const range = document.createRange();
  range.selectNodeContents($temp[0]);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  
  // 执行复制并清理临时元素
  document.execCommand("copy");
  $temp.remove();
  $("#success").slideDown("slow");
}

方案2：现代Clipboard API方案（推荐，更规范） #

document.execCommand已经被标记为废弃，推荐使用现代的剪贴板API，它可以直接将HTML格式写入剪贴板，完美适配邮件客户端：

async function copyToClipboard(element) {
  try {
    // 获取目标签名的HTML内容
    const htmlContent = $(element).html();
    // 创建HTML格式的Blob对象
    const blob = new Blob([htmlContent], { type: 'text/html' });
    // 创建剪贴板项，指定HTML格式
    const clipboardItem = new ClipboardItem({ 'text/html': blob });
    // 写入剪贴板
    await navigator.clipboard.write([clipboardItem]);
    
    $("#success").slideDown("slow");
  } catch (err) {
    console.error('复制失败，使用降级方案:', err);
    // 兼容不支持Clipboard API的旧浏览器
    fallbackCopyToClipboard(element);
  }
}

// 降级函数，和方案1逻辑一致
function fallbackCopyToClipboard(element) {
  var $temp = $("<div>");
  $temp.css({
    position: "absolute",
    left: "-9999px",
    top: "0",
    whiteSpace: "pre-wrap"
  });
  $temp.html($(element).html()).attr("contenteditable", true);
  $("body").append($temp);
  
  const range = document.createRange();
  range.selectNodeContents($temp[0]);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  
  document.execCommand("copy");
  $temp.remove();
  $("#success").slideDown("slow");
}

注意事项 #

• 你的签名已经用了内联样式，这非常棒——邮件客户端大多不支持外部样式表，内联样式是正确的做法
• Clipboard API需要HTTPS环境（本地开发的localhost除外），如果是生产环境请确保站点是HTTPS
• 测试时直接粘贴到邮件编辑框（富文本模式），不要粘贴到纯文本编辑器（比如记事本），不然还是会显示HTML代码

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