如何在 angular 应用程序中显示电子邮件，就像它在电子邮件客户端中显示一样

Question

我目前正在尝试开发一个网络应用程序来向用户显示电子邮件。对我来说重要的是，电子邮件的显示方式就像在电子邮件客户端（例如 gmail）中一样。我使用 gmail api 将电子邮件导入我的数据库，然后我从电子邮件中获取消息部分到我的 angular 应用程序中。问题是我无法显示具有适当样式的 html 电子邮件。 html 标签似乎得到了正确使用，但原始样式似乎丢失了

我正在使用 angular 7 和 spring 启动。为了收集电子邮件，我使用 gmail api 并将它们导入到 postgresql 数据库中。我尝试使用 iframe，因此我的应用程序样式不会妨碍电子邮件样式，但它会以相同的方式显示。

我如何准备电子邮件

private String getMessageContent(Message message) {
        StringBuilder stringBuilder = new StringBuilder();
        try {
            if(message.getPayload().getParts() != null) {
                handleEmailMainContent(message.getPayload().getParts(), stringBuilder);
                byte[] bodyBytes = Base64.decodeBase64(stringBuilder.toString());
                return new String(bodyBytes, "UTF-8");
            } else {
                return "";
            }
        } catch (UnsupportedEncodingException e) {
           System.out.println("UnsupportedEncoding: " + e.toString());
            return message.getSnippet();
        }
    }

    private void handleEmailMainContent(List<MessagePart> messageParts, StringBuilder stringBuilder) {
        for (MessagePart messagePart : messageParts) {
            switch (messagePart.getMimeType()) {
                case "text/plain":
                    handleMimeTypeTextPlain(messagePart, stringBuilder);
                    break;
                case "text/html":
                    handleMimeTypeTextHtml(messagePart, stringBuilder);
                    break;
                default:
                    break;
            }
        }
    }

注意：selectedEmail.mainContent是我上面构建的String

例子

mainContent 里面的内容是我试图收集和展示的钓鱼邮件。该示例是我尝试显示的 html 电子邮件。我省略了 link 和大部分垃圾邮件内容。

------------转发的消息-------- 冯：电子邮件地址日期：2019 年 5 月 10 日星期五 um 22:06 Uhr 主题：姓名，给妈妈她想要的礼物收件人：电子邮件地址

图片在 Facebook 上成为 Heally 家族的一员 link ！ - 让我们谈谈庆祝妈妈 ... 妈妈运行全世界。他们从字面上给了我们生命，承担了最艰难的任务之一角色，并在不结束工作日或任何休息时间的情况下完成所有工作。尽管妈妈们全年都值得庆祝，母亲节是一个特殊的时刻确保他们知道他们受到爱戴和赞赏。学到更多 link

寻找仅限 CBD 的产品？促销代码：SAVECBD20 link 中央商务区 20% OFF link 给妈妈她真正想要的礼物。在 Marketplace 购物

-省略垃圾邮件-

自己的例子

我试图向自己发送一封包含以下内容的简约 html 电子邮件：

*dummy*
<div dir="ltr"><i>dummy</i></div>

而且效果很好。也许问题是外部 class 没有得到 displayed/loaded and/or 没有被 gmail api

导出

我是如何尝试显示它的

<mat-card>
  <mat-card-title>
    Current Email
  </mat-card-title>
  <mat-card-content [innerHTML]="selectedEmail.mainContent">
  </mat-card-content>
</mat-card>

我想像在 gmail 中一样显示电子邮件，而我只能通过 html 标签显示纯文本和基本样式。我不明白在我的哪个步骤中样式丢失了，或者我是否没有正确显示电子邮件。

Answer 1

Angular security 阻止 HTML 和其他脚本的动态呈现。您需要使用 DOM Sanitizer 绕过它们。

在此处阅读更多内容：Angular Security

对您的代码进行以下更改：

    // in your component.ts file

    //import this 
    import { DomSanitizer } from '@angular/platform-browser';

    export class TestComponent{

    public htmlData :any ; 
    // in constructor create object 

    constructor( 
    ...
    private sanitizer: DomSanitizer

    ...
    ){

    }

    someMethod(){

      /* this method must be called after getting the value of selectedEmail.mainContent 
   from service  */


     this.htmlData = this.sanitizer.bypassSecurityTrustHtml(selectedEmail.mainContent); // this line bypasses angular security
    }
}

并在 compoenent.html

<div [innerHtml]="htmlData"> </div>

这是工作中的 StackBlitz：Working Demo

如何在 angular 应用程序中显示电子邮件，就像它在电子邮件客户端中显示一样

How to display emails in an angular app like it gets displayed in an email client

html

css

email

gmail

angular

例子

自己的例子

我是如何尝试显示它的