如何在Vue+Vuetify前后端维护MS Graph邮件的换行格式

问题根源 #

你后端构建MS Graph的Message对象时，指定了正文类型为Html，但传入的内容是带\n的纯文本——HTML渲染规则里，\n只会被当作普通空白符，不会解析成换行，所以最终收到的邮件是单行显示。

可行处理方案 #

方案一：后端替换（推荐，更可控） #

在后端对邮件正文做转换：把连续的\n\n替换成段落标签切换</p><p>，单个\n替换成HTML换行标签<br>，再给整个内容包裹<p>标签，保证分段和换行都生效。

修改后端代码如下：

// 预处理正文换行逻辑
var processedBody = $"<p>{email.Body.Replace("\n\n", "</p><p>").Replace("\n", "<br>")}</p>";

var message = new Message
{
    Subject = email.Subject,
    Body = new ItemBody
    {
        ContentType = Microsoft.Graph.BodyType.Html,
        Content = processedBody,
    },
    // 其余字段保持不变
    ToRecipients = ToRec,
    CcRecipients = CcRec,
    BccRecipients = BccRec,
    Attachments = attachments,
};

方案二：前端提前处理 #

如果想在前端完成转换，在把textModel通过FormData发送给后端前，替换换行符：

// 处理换行：连续换行转段落，单个换行转<br>
let processedBody = textModel.replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>');
processedBody = `<p>${processedBody}</p>`;

// 放入FormData发送
const formData = new FormData();
formData.append('Body', processedBody);
// 其他字段处理...

备选方案：改用纯文本格式 #

如果不需要HTML格式的排版（比如加粗、链接），可以直接把后端的正文类型改成纯文本，这样MS Graph会直接识别\n为换行：

Body = new ItemBody
{
    ContentType = Microsoft.Graph.BodyType.Text,
    Content = email.Body,
},

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