Question

我正在尝试通过.NET MVC后端在vuejs中构建电子邮件收件箱浏览器。我主要是接收要显示在可滚动表格单元格中的html电子邮件。

这是示例电子邮件正文。

html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style><!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0cm; margin-bottom:.0001pt; font-size:11.0pt; font-family:"Calibri","sans-serif";} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; text-decoration:underline;} a:visited, span.MsoHyperlinkFollowed {mso-style-priority:99; color:purple; text-decoration:underline;} span.EmailStyle17 {mso-style-type:personal-compose; font-family:"Calibri","sans-serif"; color:windowtext;} .MsoChpDefault {mso-style-type:export-only;} @page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt;} div.WordSection1 {page:WordSection1;} -->
</style>
<!--[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1026" />     </xml><![endif]-->
<!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1" /> </o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=WordSection1>
<p class=MsoNormal>
<o:p>Test Email &nbsp;</o:p></p>
</div>
</body>
</html>

这是我的vuejs组件

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

interface Email {
    to: string;
    from: string;
    subject: string;
    body: string;
}

@Component
export default class FetchDataComponent extends Vue {
    inboxEmails: Email[] = [];

    mounted() {
        fetch('api/Email/InboxEmails')
            .then(response => response.json() as Promise<Email[]>)
            .then(data => {
                this.inboxEmails = data;
            });
    }
}

这是模板。

<template>
    <div>
        <h1>Emails</h1>

        <p>The following emails are in your inbox</p>

        <table v-if="inboxEmails.length" class="table">
            <thead>
                <tr>
                    <th>To</th>
                    <th>From</th>
                    <th>Subject</th>
                    <th>Body</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in inboxEmails">
                    <td>{{ item.to }}</td>
                    <td>{{ item.from }}</td>
                    <td>{{ item.subject }}</td>
                    <td><div>{{ item.body }}</div></td>
                </tr>
            </tbody>
        </table>

        <p v-else><em>Loading...</em></p>
    </div>
</template>

<script src="./emails.ts"></script>

我知道这不是可滚动的表格单元格。但是我想先解决显示问题，然后再将其放入可滚动的表格单元格中。

Answer 1

似乎您应该显示整个电子邮件（<html>email body</html>），如果是这样，使用<iframe :srcdoc="emailBody">应该是一种解决方案。

检查MDN IFrame上property = srcdoc 的详细信息以及浏览器兼容性。

let testEmailBody = `<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style><!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0cm; margin-bottom:.0001pt; font-size:11.0pt; font-family:"Calibri","sans-serif";} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; text-decoration:underline;} a:visited, span.MsoHyperlinkFollowed {mso-style-priority:99; color:purple; text-decoration:underline;} span.EmailStyle17 {mso-style-type:personal-compose; font-family:"Calibri","sans-serif"; color:windowtext;} .MsoChpDefault {mso-style-type:export-only;} @page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt;} div.WordSection1 {page:WordSection1;} -->
</style>
<!--[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1026" />     </xml><![endif]-->
<!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1" /> </o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=WordSection1>
<p class=MsoNormal>
<o:p>Test Email &nbsp;</o:p></p>
<p style="background-color:green;color:white">I am a test!</p>
</div>
</body>
</html>`
Vue.config.productionTip = false
app = new Vue({
  el: "#app",
  data: {
    emails: [
      {'from':'stackoverflow', 'to': 'someone@test.com', 'body': testEmailBody},
      {'from':'stackoverflow', 'to': 'someone@test.com', 'body': testEmailBody}
    ]
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <div>
    <table>
      <tr v-for="(email, index) in emails" :key="index">
        <td>{{email.from}}</td>
        <td>{{email.to}}</td>
        <td><iframe :srcdoc="email.body"></iframe></td>
      </tr>
    </table>
  </div>
</div>

如何在可滚动的表格单元格中显示html电子邮件正文？

1 个答案: