I have encountered an issue while trying to send an email that includes an element from my component.
The element is passed from Angular to C# and then sent to the customer.
Here is the element:
https://i.sstatic.net/2ky1b.png
Everything looks good in print, however, when I try to send an email, I encounter the following problem: https://i.sstatic.net/WUrWD.png
The email is being sent using the following code:
The content:
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>`;
Sending to server:
this.customerService.sendMail(this.address,message).subscribe(
data=>{
this.alert="Email sent successfully";
},
fail=> {
this.alert="Sorry, There is a problem with send email";
});
Could anyone provide assistance with this issue?