求助：JS生成的多行文本无法在邮件中正常显示的解决办法

我完全理解你折腾了好几种方法都没解决的挫败感——邮件客户端对换行的处理确实挺让人头疼的，不同客户端（比如Outlook、Gmail、苹果邮件）对纯文本/HTML格式的解析规则差异很大。结合常见的JS表单生成场景，给你几个针对性的方案：

方案1：改用Windows风格换行符\r\n替代\n #

很多桌面端邮件客户端（尤其是Outlook）只认Windows标准的换行符\r\n，而普通的\n经常会被忽略或者变成空格。你可以把生成的文本里所有换行都替换成\r\n：

// 假设你的原始文本生成逻辑是这样的
const generateEmailText = (formData) => {
  return `姓名: ${formData.name}
邮箱: ${formData.email}
留言内容: ${formData.message}`;
};

// 替换换行符为\r\n
const formattedText = generateEmailText(formData).replace(/\n/g, '\r\n');

// 复制到剪贴板
navigator.clipboard.writeText(formattedText)
  .then(() => alert('文本已复制，可直接粘贴到邮件'))
  .catch(err => console.error('复制失败:', err));

方案2：生成HTML格式的内容（更稳定的多行显示） #

如果你的目标邮件客户端支持HTML格式，直接生成带HTML标签的内容会更可靠——用<p>分段或者<br>强制换行，复制HTML内容到剪贴板，粘贴到邮件里会保留完美的格式：

const generateEmailHtml = (formData) => {
  return `
    <p><strong>姓名:</strong> ${formData.name}</p>
    <p><strong>邮箱:</strong> ${formData.email}</p>
    <p><strong>留言内容:</strong><br>${formData.message.replace(/\n/g, '<br>')}</p>
  `;
};

// 创建临时元素来复制HTML内容
const copyHtmlToClipboard = (html) => {
  const tempEl = document.createElement('div');
  tempEl.style.position = 'absolute';
  tempEl.style.left = '-9999px';
  tempEl.innerHTML = html.trim();
  document.body.appendChild(tempEl);

  // 选中并复制
  const range = document.createRange();
  range.selectNodeContents(tempEl);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');

  // 清理临时元素
  document.body.removeChild(tempEl);
  window.getSelection().removeAllRanges();
};

// 使用示例
copyHtmlToClipboard(generateEmailHtml(formData));
alert('HTML内容已复制，粘贴到邮件时选择保留格式');

方案3：同时提供纯文本和HTML格式（兼容性最强） #

这个方法是最稳妥的——通过ClipboardItem同时把纯文本和HTML格式写入剪贴板，邮件客户端会自动选择它支持的格式来显示：

const formData = { name: '张三', email: 'zhangsan@example.com', message: '这是一条多行留言\n第二行内容\n第三行内容' };

// 生成两种格式的内容
const plainText = `姓名: ${formData.name}\r\n邮箱: ${formData.email}\r\n留言内容:\r\n${formData.message.replace(/\n/g, '\r\n')}`;
const htmlText = `
  <p><strong>姓名:</strong> ${formData.name}</p>
  <p><strong>邮箱:</strong> ${formData.email}</p>
  <p><strong>留言内容:</strong><br>${formData.message.replace(/\n/g, '<br>')}</p>
`;

// 创建ClipboardItem并写入剪贴板
navigator.clipboard.write([
  new ClipboardItem({
    'text/plain': new Blob([plainText], { type: 'text/plain' }),
    'text/html': new Blob([htmlText], { type: 'text/html' })
  })
])
.then(() => alert('内容已复制，粘贴到邮件即可'))
.catch(err => console.error('复制失败:', err));

额外提示 #

有些邮件客户端的粘贴默认会“合并格式”，如果还是出现换行丢失的情况，可以试试右键粘贴时选择**“保留源格式”或者“粘贴为HTML”**选项。

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