I'm sending the following html content (pasted below) using the .net framework 4.0 using the following code:
public void sendHTMLMessage()
{
From = constants.GetValue(EnvironmentVariables.ConstantNames.EMAILFROM);
MailMessage mail = SetMailMessageParameters();
smpt = new SmtpClient(constants.GetValue(EnvironmentVariables.ConstantNames.SMTP));
Utils.EnvironmentLogger.WriteToMessageLog("Sending email message: " + Subject);
smpt.Send(mail);
}
private MailMessage SetMailMessageParameters()
{
MailMessage mail = new MailMessage();
mail.Subject = Subject;
mail.Body = Body;
mail.IsBodyHtml = true;
mail.From = new MailAddress(From);
List<string> ToArray = Utils.GetArrayFromConstantsClass(To);
foreach (string element in ToArray)
{
mail.To.Add(new MailAddress(element));
}
if (!string.IsNullOrEmpty(Attachment))
{
mail.Attachments.Add(new Attachment(Attachment));
}
return mail;
}
I'm basically just sending a simple e-mail and it works most of the time, but when the HTML gets long the email I receive is just a bunch of junk:
JVBERi0xLjQKMSAwIG9iago8PAovVGl0bGUgKP7/AEwAaQBnAGgAdABpAG4AZwAgAEQA
aQBnAGkAdABhAGwAIABDAG8AYwBrAHAAaQB0KQovQ3JlYXRvciAo/v8AdwBrAGgAdABt
AGwAdABvAHAAZABmACAAMAAuADEAMgAuADEpCi9Qcm9kdWNlciAo/v8AUQB0ACAANAAu
ADgALgA2KQovQ3JlYXRpb25EYXRlIChEOjIwMTQwNzA4MTAwMDA4LTA0JzAwJykKPj4K
and goes on and on...I have tried different encoding and can't seem to figure out what the issue is. I also tried targeting .net 4.5 and I get the same issue. The HTML opens just fine in a web browser, and I can even send the html through outlook and it works just fine. It's just when I send through the code that it breaks. The other thing that is interesting, if I just send one or two tables (shown below) it sends just fine, but if I send the same table duplicated about 30 times that's when it sends the garbled mess. It does the same thing if I try to simply attach the HTML to the email. Any help would be greatly appreciated.
EDIT I opened the html email while listening with Fiddler and got the following header:
HTTP/1.1 200 OK
Date: Thu, 10 Jul 2014 12:23:50 GMT
Server: Apache/2.2.21 (CentOS)
Content-Disposition: inline;filename*=UTF-8''Daily_Sales_Summary_gbl7-8-2014.html
Cache-control: private
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST
Access-Control-Allow-Headers: X-Requested-With
X-XSS-Protection: 0
Vary: Accept-Encoding
Content-Encoding: gzip
Keep-Alive: timeout=15, max=945
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html
Set-Cookie: BIGipServerLIBRARIES_PRD_WEB1=2833575683.20480.0000; expires=Fri, 11-Jul-2014 00:23:51 GMT; path=/
Here is the content of the HTML File:
<html>
<head>
<title>HTML Table Email Test</title>
</head>
<style type="text/css">
body
{
font-family: Arial, Helvetica, Univers;
font-size: 10pt;
font-style: normal;
font-weight: normal;
line-height: 12pt;
text-align: left;
}
b
{
font-weight: bold;
}
table
{
border-collapse: collapse;
}
div.tableContainer
{
font-size: 8pt;
width: 100%;
overflow: auto;
}
div.tableContainer th
{
font-size: 8pt;
font-weight: normal;
text-decoration: underline;
text-align: center;
background-color: #BBC3E2;
color: #000000;
border-color: #808080;
border-style: solid;
border-width: 1px;
position: relative;
padding-right: 3;
padding-left: 3;
cursor: default;
}
div.tableContainer td
{
font-size: 9pt;
text-align: right;
white-space: nowrap;
background-color: #F1EEE3;
color: #000000;
border-color: #808080;
border-style: solid;
border-width: 1px;
position: relative;
padding-right: 3px;
padding-left: 3px;
}
div.tableContainer td.locked, div.tableContainer th.locked
{
background-color: #BBC3E2;
text-align: left;
color: #000000;
position: relative;
text-decoration: none;
}
div.tableContainer tr.total
{
font-weight: bold;
}
</style>
<body>
<div class="tableContainer" id="data">
Day<br>Sales<br>Details<br><br>
<table border="0" cellspacing="0" cellpadding="0" style="width: auto">
<tbody>
<tr><th class="locked"> </th><th>Value<br>1</th><th>Value<br>2</th><th>VAlue<br>3</th><th>Value</th><th>Value</th><th>Value</th><th>Value<br>value</th><th>value<br>value</th><th>value<br>$</th><th>value<br>value</th></tr>
<tr><td class="locked">-Line1</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>0</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">--Line2</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>2</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">--Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>1</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">--Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>####</td><td>0.0</td><td>3</td><td>0.0</td><td>0%</td><td>11</td><td>0%</td></tr>
<tr><td class="locked">-Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>6</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">-Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>4</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">-Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>-</td><td>0.0</td><td>0</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>1</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked"> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td class="locked">Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>2</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">-Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>1</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">-Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>7</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>8</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>8</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked"> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td class="locked"><b>Line3</b></td><td><b>0.0</b></td><td><b>0.0</b></td><td><b>0.0</b></td><td><b>0%</b></td><td><b>0</b></td><td><b>0</b></td><td><b>0</b></td><td><b>0</b></td><td><b>0</b></td><td><b>0%</b></td></tr>
</tbody>
</table>
Day<br>Sales<br>Details<br><br>
<table border="0" cellspacing="0" cellpadding="0" style="width: auto">
<tbody>
<tr><th class="locked"> </th><th>Value<br>1</th><th>Value<br>2</th><th>VAlue<br>3</th><th>Value</th><th>Value</th><th>Value</th><th>Value<br>value</th><th>value<br>value</th><th>value<br>$</th><th>value<br>value</th></tr>
<tr><td class="locked">-Line1</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>0</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">--Line2</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>2</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">--Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>1</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">--Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>####</td><td>0.0</td><td>3</td><td>0.0</td><td>0%</td><td>11</td><td>0%</td></tr>
<tr><td class="locked">-Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>6</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">-Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>4</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">-Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>-</td><td>0.0</td><td>0</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>1</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked"> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td class="locked">Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>2</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">-Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>1</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">-Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>7</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>8</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked">Line3</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0%</td><td>0.0</td><td>8</td><td>0.0</td><td>0%</td><td>0</td><td>0%</td></tr>
<tr><td class="locked"> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td class="locked"><b>Line3</b></td><td><b>0.0</b></td><td><b>0.0</b></td><td><b>0.0</b></td><td><b>0%</b></td><td><b>0</b></td><td><b>0</b></td><td><b>0</b></td><td><b>0</b></td><td><b>0</b></td><td><b>0%</b></td></tr>
</tbody>
</table>
<br>data is effective for close of previous business day<br>
</div>
</body>
</html>
Here's the problem:
Content-Encoding: gzip
Something; your ISP, the POP server, perhaps even SmtpClient.Send is GZipping the HTTP payload. This is allowed in HTTP. From the Server: Apache/2.2.21 (CentOS) I suspect it is the HTTP server.
Any compliant HTTP client should un-GZip the payload when received with this header. The standard .NET HttpClient class will do this.
What is “receiving” the email? A program you wrote? It has to un-GZip the payload. Or contact your server admin and see if there is some way to tell it not to GZip large payloads.
Thanks to everyone for your help. I found out what was causing the issue, although I'm not sure why this fixed the problem. When I change the code to use seven bit encoding it sends the e-mail without any issue. I would love to hear any reason to why this fixes the problem. It feels like a band aid fix. It must have something to do with exchange. Also not sure why I was getting the garbled text even when not sending an attachment. here is the code to fix:
Attachment attachment = new Attachment(this.Attachment);
attachment.TransferEncoding = System.Net.Mime.TransferEncoding.SevenBit;
mail.Attachments.Add(attachment);
Related
I have found a lot of open questions about this issue, but none gave me a solution, so I am kind of re-opening other questions here, sorry.
I have an HTML created (from a VB6 application, though that's not very important because I checked it is correctly formatted) and then sent from a .NET Core worker application.
The IsBodyHtml property is being set to true, so it should work correctly.
The HTML I have generated has this structure:
<table>
<thead>
<tr>
<th colspan="2"> Resultado </th>
<th>Índice del vector</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiempo inicio</td>
<td class="centered">{DateTime}</td>
<td class="centered">0</td>
</tr>
<tr>
<td>Tiempo fin</td>
<td class="centered">{DateTime}</td>
<td class="centered">1</td>
</tr>
<tr>
<td>Tiempo total</td>
<td class="centered">{DateTime(Tiempo fin - Tiempo inicio)}</td>
<td class="centered">2</td>
</tr>
<tr>
<td>Tipo de bases de datos</td>
<td class="centered">{"SQL" | "Access"}</td>
<td class="centered">3</td>
</tr>
<tr>
<td>Copia de Documentos</td>
<td class="centered">{ True | False }</td>
<td class="centered">5</td>
</tr>
<tr>
<td>Carpeta no existente</td>
<td class="centered">"TextMessage"</td>
<td class="centered">11</td>
</tr>
</tbody>
</table>
<style>
* {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
table,
td {
border: 1px solid #333;
}
th,
td {
padding: 5px;
inline-size: 7rem;
overflow-wrap: break-word;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
.centered {
text-align: center;
}
</style>
I checked the Gmail references and it should work since the <style> tag is now supported (I think the only thing that is not very well supported is the font-family property), but it still was sent as raw HTML.
Then I tried sending a simple <h1>This is an H1 element</h1>, and it was still not shown correctly, just as raw HTML.
I also tried sending the former HTML with the <body> tag and the <style> tag in the <head> tag.
[EDIT]
Updated with the C# code for the e-mail sender:
private MailMessage SetMessageInfo(EmailService.MailMessage message)
{
MailMessage clientMessage = new Net_MailMessage();
clientMessage.From = new MailAddress(message.From.Address, message.From.DisplayName);
foreach (EmailService.MailAddress email in message.To)
{
clientMessage.To.Add(new MailAddress(email.Address, email.DisplayName));
}
foreach (EmailService.MailAddress email in message.CC)
{
clientMessage.CC.Add(new MailAddress(email.Address, email.DisplayName));
}
foreach (EmailService.MailAddress email in message.Bcc)
{
clientMessage.Bcc.Add(new MailAddress(email.Address, email.DisplayName));
}
clientMessage.Subject = message.Subject;
clientMessage.SubjectEncoding = message.SubjectEncoding;
clientMessage.Body = message.Body;
clientMessage.BodyEncoding = message.BodyEncoding;
clientMessage.IsBodyHtml = true;
if (message.CustomId != null)
{
clientMessage.Headers.Add("custom-id", message.CustomId);
}
return clientMessage;
}
The EmailService class is an intermediary class we created that has a DTO that is almost a copy of the MailMessage class. I can't show it here, sorry.
I want to compose a mail with a table with some basic style. Here is my code:
MailMessage mail = new MailMessage();
mail.From = new MailAddress("abc#domain.com");
mail.To.Add("myname#domain.com");
mail.Body = string.Format(#"<html>
<body>
<style>
table, th, td {
border: 1px solid black;
line-height: 24px;
font-size:14px;
font-family:verdana;
text-align: center;
}
</style>
<p style=""""font-family:verdana""""> Status :</p>
<table style=""""width=50%""""><tr>
<th >No. of Students</th>
<th >No. of Pass</th>
<th >No. of Failures </th>
<tr/><tr style=""""height=120%"""">
<td>{0} </td>
<td style=""""color:green"""">{1} </td>
<td style=""""color:red"""">{2} </td>
</tr></table>
<p style=""""font-family:verdana""""> Please refer to the
Log files for more details.</p>
</body>
</html>",student.Total, student.Pass,student.Fail);
mail.Subject = "Report";
};
mail.IsBodyHtml = true;
This gives me an Exception saying 'Input string is not in correct format'. If I remove the style, paragraph, and keep only , it works but no borders are present in table. How can I style my mail?
I changed the body like this, but the style is not reflected.
mail.Body = string.Format(#"
<p style=""font-family:verdana""> Status :</p>
<table style=""border: 1px solid black"", ""text-align: center""><tr>
<th style=""border: 1px solid black"">No. of new records added</th>
<th style=""border: 1px solid black"">No. of records transferred </th>
<th style=""border: 1px solid black"">No. of records not transferred </th>
<tr/><tr style=""height=120%"">
<td style=""border: 1px solid black"" ""text-align: center"">CompanyName.Value </td>
<td style=""border: 1px solid black"" ""text-align: center"" ""color:green"">1000 </td>
<td style=""border: 1px solid black"" ""text-align: center"" ""color:red"">82 </td>
</tr></table>
<p style=""font-family:verdana""> Please refer to the Log files for more details.</p>
");
Your syntax is wrong while adding style for <table> and <p>. Do it in the following way, for example:
<table style="width: 50%">
Similarly change the syntax wherever you have used style.
I sent an html via outlook.
In the html, I aligned a word to the right, but in the received e-mail, the word is mixed - the first letter has become the last letter.
This only occurs when the first letter is a number.
I sent the following html:
<div dir="rtl" style="margin: 20px auto; width: 650px; text-align: center; font-family: Tahoma;">
<table dir="rtl" style="width: 650px; margin: 0 auto; text-align: right; font-family: Tahoma; font-size: 0; font-weight: normal; color: #000;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background-color: #d0f2f6; padding: 15px 20px; margin: 0; color: #135861; font-size: 13px; font-weight: 400;">
שלום
<br /><br />
המספר הוא:<br />
<b dir="rtl" style="font-family:consolas">1fD9xG8j</b>
<br /><br />
</td>
</tr>
</tbody>
</table>
</div>
But I got the following mail:
Why does outlook change the word '1fD9xG8j' to 'fD9xG8j1' ?
This is the code in c# which sent the mail:
var smtp = new SmtpClient(SmtpServer);
var message = new MailMessage();
message.Subject = subject.Trim();
message.Body = body.Trim();
message.IsBodyHtml = true;
message.BodyEncoding = Encoding.UTF8;
smtp.Send(message);
Remove dir="rtl" from Table tag and try.
I saw, that many times, Outlook text editor adds code to the source code. This happens because Outlook is generating the email source code using mostly VML (Vector Markup Language) which causes changes in the code. There are add-ins to import a clean HTML source code, to an Outlook email, in order to get it displayed correctly.
I tried to get around the problem with the following code:
<div dir="ltr" style="font-family:consolas;font-weight:bold;text-align:right">1fD9xG8j</div>
I changed dir="ltr", and added style text-align:right,
and it works!
I am using docraptor (https://docraptor.com/samples) for creating the PDF but I am not able to add Image as Header and Footer into generated PDF.
I have below Html and I am using AJAX to call the API and passing below HTML as content to crate a pad but its not adding Image in Footer and header . Its adding it as like content.
var data = $('#container-abc').html();
<!DOCTYPE html>
<head>
<style type="text/css">
/* setup the page */
##page {
size: US-Letter;
margin: 0 0 35mm 0;
background: #ffffff;
}
/* setup the footer */
##page {
##bottom {
content: flow(footer);
}
}
footer {
flow: static(footer);
}
body {
border-top: 10px solid #3877B1;
font-family: "myriad-pro-1", "myriad-pro-2", sans-serif;
}
#container {
margin: 0 auto;
}
header, #main {
margin: 15mm;
}
header {
margin-top: 5mm;
border-bottom: 1px solid #7E7E7E;
padding-bottom: 5mm;
}
.seller, .status{
float: left;
}
.buyer {
float: right;
}
.seller {
width: 50%;
}
.buyer {
max-width: 30%;
}
.brand {
font-weight: bold;
font-size: 30px;
color: #333;
padding: 10px 0 2px;
overflow: auto;
}
.brand span, .brand img {
float: left;
}
.brand span {
display: block;
margin: 8px 0 0 5px;
}
.seller address {
clear: both;
display: block;
padding-left: 65px;
ont-size: 10pt;
line-height: 12pt;
color: #262626;
}
.seller address span {
display: block;
}
.status.paid {
margin: 25pt 0 0 15pt;
letter-spacing: -1pt;
font-weight: bold;
color: #78E400;
font-size: 30pt;
border: 5px solid #78E400;
padding: 1pt 5pt;
transform: rotate(-15deg);
-ms-transform: rotate(-15deg); /* IE 9 */
-webkit-transform:rotate(-15deg); /* Safari and Chrome */
}
.buyer {
font-size: 9pt;
line-height: 12pt;
margin-top: 30pt;
color: #262626;
}
.buyer h2 {
font-weight: bold;
font-size: 11pt;
}
.buyer span { display: block; }
/* main */
table {
width: 100%;
}
th {
font-size: 8pt;
color: #919191;
line-height: 14pt;
text-align: left;
padding-left: 10pt;
border-bottom: 1px solid #D6D6D6;
}
th:last-child, td:last-child {
width: 20%;
}
th:last-child {
padding-left: 10mm;
}
td {
padding: 10pt;
border-bottom: 1px solid #D6D6D6;
}
td h4 {
font-weight: bold;
font-size: 12pt;
}
td .description {
font-size: 9pt;
line-height: 14pt;
}
td.price {
vertical-align: middle;
font-size: 12pt;
font-weight: bold;
text-align: right;
}
tr:nth-child(odd) td{
background: #F1F1F1;
}
#notes {
font-size: 9pt;
color: #7E7E7E;
line-height: 14pt;
font-style: italic;
margin-top: 4mm;
padding: 3mm;
float: left;
}
#totals{
padding: 3mm;
float: right;
text-align: right;
font-size: 12pt;
color: #7E7E7E;
line-height: 16pt;
}
/* footer */
footer {
text-align: center;
}
footer p {
background: #F3F3F3;
color: #888;
text-align: center;
font-size: 8pt;
line-height: 12pt;
padding: 7mm 0;
margin-top: 2mm;
}
.clearfix{ clear: both; }
</style>
</head>
<body>
<div id="container-abc">
<header>
<div class="seller">
<h1 class="brand">
<img src="http://docraptor.com/assets/docraptor-logo.svg" width="60" height="43" /> <span>DocRaptor</span>
</h1>
<address>
2885 Sanford Ave SW #13508, Grandville, MI 49418-1342
<span class="email">support#docraptor.com</span>
</address>
</div>
<div class="status paid">PAID</div>
<div class="buyer">
<h2>Billed To</h2>
Super Best Client
<span class="email">superbestclient#example.com</span>
<span class="date">January 20, 2014</span>
</div>
<div class="clearfix"></div>
</header>
<div id="main">
<table>
<thead>
<tr>
<th class="title">Summary</th>
<th class="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h4>Max Plan</h4>
<p class="description">March 21, 2014 - April 21, 2014</p>
</td>
<td class="price"><span class="price">$149.00 USD</span></td>
</tr>
<tr>
<td>
<h4>Document Overage</h4>
<p class="description">0 docs $.39</p>
</td>
<td class="price"><span class="price">$0.00 USD</span></td>
</tr>
</tbody>
</table>
<p id="notes">
This charge will appear on your credit card statement as "DOCRAPTOR.COM".
</p>
<div id="totals">
<p>Total: <span class="price">$149.00 USD</span></p>
<p>Due: <span class="price">$0.00 USD</span></p>
</div>
<table>
<thead>
<tr>
<th class="title">Summary</th>
<th class="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h4>Max Plan</h4>
<p class="description">March 21, 2014 - April 21, 2014</p>
</td>
<td class="price"><span class="price">$149.00 USD</span></td>
</tr>
<tr>
<td>
<h4>Document Overage</h4>
<p class="description">0 docs $.39</p>
</td>
<td class="price"><span class="price">$0.00 USD</span></td>
</tr>
</tbody>
</table>
<p id="notes">
This charge will appear on your credit card statement as "DOCRAPTOR.COM".
</p>
<div id="totals">
<p>Total: <span class="price">$149.00 USD</span></p>
<p>Due: <span class="price">$0.00 USD</span></p>
</div>
<table>
<thead>
<tr>
<th class="title">Summary</th>
<th class="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h4>Max Plan</h4>
<p class="description">March 21, 2014 - April 21, 2014</p>
</td>
<td class="price"><span class="price">$149.00 USD</span></td>
</tr>
<tr>
<td>
<h4>Document Overage</h4>
<p class="description">0 docs $.39</p>
</td>
<td class="price"><span class="price">$0.00 USD</span></td>
</tr>
</tbody>
</table>
<p id="notes">
This charge will appear on your credit card statement as "DOCRAPTOR.COM".
</p>
<div id="totals">
<p>Total: <span class="price">$149.00 USD</span></p>
<p>Due: <span class="price">$0.00 USD</span></p>
</div>
</div>
<footer>
<img alt="Expected Behavior Logo" height="34" src="https://docraptor.com/assets/expected-behavior-logo.svg" width="150" />
<p>DocRaptor is made and supported by Expected Behavior, LLC<br>1-866-991-3746 | 2885 Sanford Ave SW #13508, Grandville, MI 49418-1342 | support#docraptor.com</p>
</footer>
</div>
</body>
</html>
At least part of the problem is the use of ## as opposed to the singular # when you are handling page and page bottom styles. I changed those to singular and got back a more sane looking PDF from DocRaptor.
Here is a minimal example that has images in the header and footer, on every page.
<html>
<head>
<style type="text/css">
#page {
#top { content: flow(header) };
#bottom { content: flow(footer) };
}
header { flow: static(header); }
footer { flow: static(footer); }
hr { page-break-after: always; }
</style>
</head>
<body>
<header>
<img src="http://i.imgur.com/MtMwkBX.png" />
</header>
<footer>
<img src="http://i.imgur.com/ZZw85mx.png" />
</footer>
<p>This is the first page.</p>
<hr />
<p>This is the second page.</p>
<hr />
<p>This is the third page.</p>
</body>
</html>
I'm generating a PDF file based on some HTML, using the pechkin dll.
This is all working nicely except the I need to it add a page break at certain places and I don't know how.
I thought that using a css page-break-before, but that doesn't seem to work.
An example of the HTML I'm using is:
<table style="border-top: 0px solid black; border-bottom: 2px solid black; height: 30px; width: 800px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 200px;"><strong>Recommendation</strong></td>
<td style="width: 600px;">[6060:Builder Recommendation]</td>
</tr>
</tbody>
</table>
<table style="page-break-before: always;border-top: 0px solid black; border-bottom: 2px solid black; background-color: #99ccff; height: 30px; width: 800px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><strong>Summary of Actions</strong></td>
</tr>
</tbody>
</table>
The code I'm using to generate the PDF is as below:
Dim buf As Byte() = Pechkin.Factory.Create(New GlobalConfig().SetMargins(New Margins(20, 20, 20, 20))
.SetDocumentTitle("").SetCopyCount(1).SetImageQuality(100)
.SetLosslessCompression(True)
.SetMaxImageDpi(300)
.SetOutlineGeneration(True)
.SetOutputDpi(1200)
.SetPaperOrientation(True)
.SetPaperSize(PaperKind.A4)
.SetImageQuality(100)
.SetPaperOrientation(False))
.Convert(New ObjectConfig()
.SetPrintBackground(True)
.SetAllowLocalContent(True), strHTML)
Return buf
Any ideas?
Add a div before your table.
<div style='page-break-after:always'></div>