时间戳

首页 > 解决方案 > 如何在电子邮件中发送带有背景颜色的元素由变量组成

javascript - 如何在电子邮件中发送带有背景颜色的元素由变量组成

问题描述

我正在尝试发送一封电子邮件，其中包含我的组件中的一个元素。

元素从 Angular 发送到 c#，然后在 c# 中发送给客户。

元素是：

在此处输入图像描述

在打印中很好，但是在发送电子邮件时，我得到以下信息： 在此处输入图像描述

发送由以下代码进行：

内容：

html

<div id="print-section" >
<div>
    <h1 >your makeup:</h1>
    <label>id: </label><span>{{product.id}}</span><br/>
    <label>codeInCompany: </label><span>{{product.codeInCompany}}</span><br/>
    <span id="color"></span><br>
    <span style="display:none" id='r'>{{product.r}}</span>
    <span style="display:none" id='g'>{{product.g}}</span>
    <span  style="display:none" id='b'>{{product.b}}</span>
    <label>price: </label><span>{{product.price}}</span><br/>
    <label>description: </label><span>{{product.description}}</span><br/>
    <label >company name: </label><span>{{product.company.name}}</span><br/>
    <h2 >thank you and have a good day!</h2>
    <br/>
</div>

ts

let printContents;
//The element to be printed:
printContents = document.getElementById('print-section').innerHTML;

let message:string=`
    <html>
      <head>
        <title>Print tab</title>
        <style> </style>
        <script>
         function color(){
           if(document.getElementById("r")!=null && document.getElementById("g")!=null && document.getElementById("b")!=null)
           {
             var r=document.getElementById("r").innerHTML;
             var g=document.getElementById("g").innerHTML;
             var b =document.getElementById("b").innerHTML;
             let style1="background-color: rgb"+"("+r+" "+ g+" "+b+")";
             var d=document.querySelector("[id*=color]");
             d.setAttribute("style",style1);
           }
         }
         window.addEventListener('load', (event) => {
           color();
         });
      </script>
       
     </head>
     <body onload="color()">${printContents}</body>
  </html>`;

发送到服务器：

 this.customerService.sendMail(this.address,message).subscribe(
    data=>{
       this.alert="Email sent successfully";
    },
    fail=> {
       this.alert="Sorry, There is a problem with send email";
    });

你能帮助我吗？

标签： javascripthtmlcssangular

解决方案

我更改了样式在元素中的放置方式：而不是： d.setAttributein ts，我使用 with [style]in html。

整个代码：

html

<div id="print-section" >
<div>
    <h1>your makeup</h1>
    <label>id: </label><span>{{product.id}}</span><br/>
    <label>codeInCompany: </label><span>{{product.codeInCompany}}</span><br/>
    <span name="color" id="color" [style]="myStyle">color</span><br>
    <span style="display:none" id='r'>{{product.r}}</span>
    <span style="display:none" id='g'>{{product.g}}</span>
    <span  style="display:none" id='b'>{{product.b}}</span>
    <label>price: </label><span>{{product.price}}</span><br/>
    <label>description: </label><span>{{product.description}}</span><br/>
    <label>company name: </label><span>{{product.company.name}}</span><br/>
    <h2>thank you and have a good day</h2>
</div>

ts

//通过变量为元素着色

 myStyle="";

 ngOnInit() {
    this.colorlabel();
  }
  colorlabel(){
        var r=this.product.r;
        var g=this.product.g;
        var b=this.product.b;
        let style1="background-color: rgb"+"("+r+" "+ g+" "+b+");padding-top:20px";
        style1+=';width: 100px;height: 100px;border-radius: 50%;font-size:20px;font-family: Cambria, Cochin, Georgia, Times,Times New Roman, serif;font-weight: 600;display: inline-block;text-align:center;';
        this.myStyle=style1;
  }

//发送到服务器

let printContents;
printContents = document.getElementById('print-section').innerHTML;
let message:string=`
<html>
  <head>
    <title>Email tab</title>
  </head>
  <body>${printContents}</body>
</html>`;
this.customerService.sendMail(this.address,message).subscribe(
  data=>{
    this.alert="Email sent successfully";
  },
  fail=> {
    this.alert="Sorry, There is a problem with send email";
  }
);

推荐阅读