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>
Related
I want to implement email templates in ckeditor so user can edit their template.Html elements in template should be bind with database fields. Could you please give me a sample example how to create and edit the email templates in ckeditor
I suggest you use The jQuery Adapter, you can read official article first. And then you can pass parameters and use ajax to send a request to get the parameters of the database.
I create a sample email template html file, named aa.html. and I use jquery to local email template. You can see my gif first.
My code structure
Source Code
aa.html
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Transactional Email</title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="">
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>Hi there,</p>
<p>Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
<tbody>
<tr>
<td align="left">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> Call To Action </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p>This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
<p>Good luck! Hope it works.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<span class="apple-link">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
<br> Don't like these emails? Unsubscribe.
</td>
</tr>
<tr>
<td class="content-block powered-by">
Powered by HTMLemail.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.14.1/adapters/jquery.js"></script>
<title>Document</title>
<script>
$( document ).ready( function() {
$('textarea#editor1' ).ckeditor();
$.get('aa.htm').done(response=>{CKEDITOR.instances['editor1'].setData(response);}).fail(/** process error here **/);
} );
$('form').ajaxSubmit( {
beforeSubmit: function() {
// The textarea is already updated now and has the same value as the editor, so you can validate it.
}
});
</script>
</head>
<body>
<form>
<textarea cols="80" id="editor1" name="editor1" rows="10" >Lorem ipsum</textarea>
<input type="submit" value="Save">
</form>
</body>
</html>
I am working with ASP.NET Core 3.1 MVC and Bootstrap 4.4.1 and the default project template with DataTables.js (1.10.20 and css twitter bootstrap).
The first thing I must say is that I'm not good at all with css, so I think this could be the reason of this problem.
The following problem occurs when the screen has a lower resolution: (Tested resolution: 400x500)
I would like to know why this happened with the Fixed Footer and if there is a fix for this.
Thanks in advance for any assistance.
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand">WebApplication1</a>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<div class="table-responsive p-1">
<table class="table table-striped table-bordered" id="Table">
<thead>
<tr>
<th scope="col">
Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
Hello
</td>
</tr>
<tr>
<td class="align-middle">
World
</td>
</tr>
</tbody>
</table>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('#Table').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
}
});
});</script>
</div>
</main>
</div>
<footer class="border-top footer text-muted text-center">
<div class="container">
Footer
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js"></script>
</body>
</html>
I used CSS flex to reduce the change to your markup.
The change I did were:
I added class content to your main content.
I changed the style for body to have these styles
body {
display: flex;
flex-direction: column;
height: 100vh;
}
Then I added these, and also updated the style for your .footer
header {
flex: 0 0 50px;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
width: 100%;
line-height: 60px; /* Vertically center the text there */
}
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
flex: 0 0 50px;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
width: 100%;
line-height: 60px; /* Vertically center the text there */
}
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand">WebApplication1</a>
</div>
</nav>
</header>
<div class="content container">
<main role="main" class="pb-3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<div class="table-responsive p-1">
<table class="table table-striped table-bordered" id="Table">
<thead>
<tr>
<th scope="col">
Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
Hello
</td>
</tr>
<tr>
<td class="align-middle">
World
</td>
</tr>
</tbody>
</table>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('#Table').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
}
});
});</script>
</div>
</main>
</div>
<footer class="footer border-top footer text-muted text-center">
<div class="container">
Footer
</div>
</footer>
</body>
You can see it working here:
https://jsfiddle.net/8ba9cdxe/
you can change the position of the footer to static then it will be fixed.
Try remove posistion:absolute in footer class
.footer {
/*position: absolute;*/
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
I am using SelectPdf, and when configuring my converter to convert the string to a pdf, my pdf keeps ending up generating some margin on the top of the page.
My converter:
private Stream ConvertToPdf(string data)
{
HtmlToPdf converter = new HtmlToPdf();
converter.Options.PdfPageSize = PdfPageSize.A4;
converter.Options.AutoFitWidth = HtmlToPdfPageFitMode.NoAdjustment;
converter.Options.DisplayFooter = true;
converter.Options.DisplayHeader = true;
converter.Options.MarginTop = 0;
converter.Options.MarginBottom = 0;
converter.Options.DisplayHeader = false;
converter.Options.DisplayFooter = false;
converter.Options.CssMediaType = HtmlToPdfCssMediaType.Screen;
converter.Options.EmbedFonts = true;
PdfDocument doc = converter.ConvertHtmlString(data);
// create memory stream to save PDF
MemoryStream pdfStream = new MemoryStream();
// save pdf document into a MemoryStream
doc.Save(pdfStream);
pdfStream.Seek(0, SeekOrigin.Begin);
return pdfStream;
}
In my template, I have no apparent margin in the top of the page, so I am, so far, unable to figure out where it is coming from.
My template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
.red-color {
color: red;
margin-left: 10px;
}
p.red-color {
margin-top: 0;
font-weight:800;
}
p.red-color:first-of-type {
margin-bottom: 0;
}
h1.red-color {
margin-bottom: 10px;
margin-top:0;
}
h2.red-color {
margin-bottom: 20px;
}
#wrapper {
position: relative;
width:750px;
height:1050px;
}
.image-wrapper {
width: 96%;
height: 350px;
margin-left: 2%;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#info-banner {
position: absolute;
bottom: 0;
background-color: red;
width: 96%;
margin-left: 2%;
height: 125px;
}
#info-banner #banner-left {
float:left;
width:40%;
}
#info-banner #banner-right {
float:left;
width:60%;
}
#info-banner #banner-left a {
display: block;
text-align: center;
margin-top: 20px;
color: white;
text-decoration: none;
}
#info-banner #banner-left a img{
width:50px;
}
#info-banner #banner-right p:first-of-type {
margin-top:20px;
}
#info-banner #banner-right p {
margin: 0;
color: white;
padding-bottom: 5px;
font-size: 14px;
}
.amount {
text-align:left;
padding-left:5px;
}
.name {
}
.price {
}
table th {
text-align: left;
}
td {
padding: 10px 0;
}
table {
width: 96%;
margin-left:2%;
border-collapse: collapse;
}
.top-border {
border-top: 2px solid black;
}
.heavy-font {
font-weight: 800;
}
.less-spacing td{
padding:5px 0;
}
</style>
</head>
<body>
<div id="wrapper" style="page-break-after: always">
<h1 class="red-color">Name</h1>
<div class="image-wrapper" style="background-image: url('##EventImage##');"></div>
<h2 class="red-color">##Title##</h2>
<p class="red-color">your ticket:</p>
<p class="red-color">Print it.</p>
<table>
<tr>
<th>Amount</th>
<th>name</th>
<th>Price</th>
</tr>
<tr class="top-border">
<td class="amount">##Amount##</td>
<td class="name">
##Title##<br />
Adresse: ##Address## <br />
Dato: ##Date##<br />
Tidspunkt: ##Time##
</td>
<td class="price">##Price## USD</td>
</tr>
<tr class="top-border ">
<td class="amount"></td>
<td class="name">In Total</td>
<td class="price">##ProductTotalPrice## USD</td>
</tr>
<tr class="less-spacing">
<td class="amount"></td>
<td class="name">Total ex. tax:</td>
<td class="price">##ProductTotalExTax## USD</td>
</tr>
<tr class="less-spacing">
<td class="amount"></td>
<td class="name">shipping: </td>
<td class="price">##ShippingPrice## USD</td>
</tr>
<tr class="less-spacing">
<td class="amount"></td>
<td class="name">Subtotal ex. tax</td>
<td class="price">##PriceNoTax## USD</td>
</tr>
<tr class="less-spacing">
<td class="amount"></td>
<td class="name">tax</td>
<td class="price">##Tax## USD</td>
</tr>
<tr class="top-border">
<td class="amount"></td>
<td class="heavy-font name">Total:</td>
<td class="heavy-font price">##FinalPrice## USD</td>
</tr>
</table>
<div id="info-banner">
<div id="banner-left">
<img src="facebook-icon.png" /><br />Find us on facebook
</div>
<div id="banner-right">
<p>Name</p>
<p>Address</p>
<p>Second Address</p>
<p>Phone: 0000000000 Email: info#test.com</p>
</div>
</div>
</div>
</body>
</html>
When I generate this, I have no issues making it a pdf, but on each page it appears with a top margin, or some sort of a header.
Setting these values appears to have solved my issue.
converter.Options.WebPageHeight = 1050;
converter.Options.WebPageWidth = 750;
and i had duplicated values in these, which said true.
converter.Options.DisplayHeader = false;
converter.Options.DisplayFooter = false;
Page is something like this
Now on resize it is changing to something like this:
But I need last two rows to use the complete space e.g. Result should start from the below of Email, kind of Centre approach.
Table Html is
<table class="responsive">
<thead>
<tr>
<th class="grid-header"><div class="grid-header-title">Employe Id</div></th><th class="grid-header"><div class="grid-filter" data-filterdata="[]" data-name="Name" data-type="System.String" data-widgetdata="null"><span class="grid-filter-btn" title="Filter this column"></span></div><div class="grid-header-title">Name</div></th><th class="grid-header"><div class="grid-header-title">Email</div></th><th class="grid-header" style="width:80px;"><div class="grid-header-title"><span></span></div></th><th class="grid-header" style="width:80px;"><div class="grid-header-title"><span></span></div></th> </tr>
</thead>
<tbody>
<tr class="grid-row ">
<td class="grid-cell" data-name="Id">1</td><td class="grid-cell" data-name="Name">XyZ</td><td class="grid-cell" data-name="Email">XyZ#gmail.com</td><td class="grid-cell" data-name=""><a href='#'>Result </a><a href='#'>Output </a><a href='#'>Error</a></td><td class="grid-cell" data-name=""><img alt='img1' src='' ></img><img alt='img2' src='' ></img><img alt='img3' src='' ></img></td> </tr>
<tr class="grid-row ">
<td class="grid-cell" data-name="Id">2</td><td class="grid-cell" data-name="Name">XyZ2</td><td class="grid-cell" data-name="Email">XyZ#gmail.com</td><td class="grid-cell" data-name=""><a href='#'>Result </a><a href='#'>Output </a><a href='#'>Error</a></td><td class="grid-cell" data-name=""><img alt='img1' src='' ></img><img alt='img2' src='' ></img><img alt='img3' src='' ></img></td> </tr>
<tr class="grid-row ">
<td class="grid-cell" data-name="Id">3</td><td class="grid-cell" data-name="Name">Romonov</td><td class="grid-cell" data-name="Email">XyZ#gmail.com</td><td class="grid-cell" data-name=""><a href='#'>Result </a><a href='#'>Output </a><a href='#'>Error</a></td><td class="grid-cell" data-name=""><img alt='img1' src='' ></img><img alt='img2' src='' ></img><img alt='img3' src='' ></img></td> </tr>
</tbody>
</table>
jQuery is :
;(function ( $ ) {
$.fn.ngResponsiveTables = function(options) {
var defaults = {
smallPaddingCharNo: 5,
mediumPaddingCharNo: 10,
largePaddingCharNo: 15
},
$selElement = this,
ngResponsiveTables = {
opt: '',
dataContent: '',
globalWidth: 0,
init: function(){
this.opt = $.extend( defaults, options );
ngResponsiveTables.targetTable();
},
targetTable: function(){
var that = this;
$selElement.find('tr').each(function(){
$(this).find('td').each(function(i, v){
that.checkForTableHead( $(this), i );
$(this).addClass('tdno' + i);
});
});
},
checkForTableHead: function(element, index){
if( $selElement.find('th').length ){
this.dataContent = $selElement.find('th')[index].textContent;
}else{
this.dataContent = $selElement.find('tr:first td')[index].textContent;
}
// This padding is for large texts inside header of table
// Use small, medium and large paddingMax values from defaults to set-up offsets for each class
if( this.opt.smallPaddingCharNo > $.trim(this.dataContent).length ){
element.addClass('small-padding');
}else if( this.opt.mediumPaddingCharNo > $.trim(this.dataContent).length ){
element.addClass('medium-padding');
}else{
element.addClass('large-padding');
}
element.attr('data-content', this.dataContent);
}
};
$(function(){
ngResponsiveTables.init();
});
return this;
};
}( jQuery ));
css is :
#media (max-width: 480px) {
/* CSS Responsive table */
table.responsive,
table.responsive thead,
table.responsive tbody,
table.responsive th,
table.responsive td,
table.responsive tr {
display: block;
}
table.responsive thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
table.responsive tr {
border: 1px solid #ccc;
margin-bottom: 10px;
}
table.responsive td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
table.responsive td:before {
position: absolute;
top: 6px;
left: 6px;
width: 40%;
padding-right: 10px;
text-align: left;
word-wrap: break-word;
color: skyblue;
font-weight:bold;
}
table.responsive tr:first-child {
position: absolute;
top: -9999px;
left: -9999px;
}
table.responsive td:before {
content: attr(data-content);
height: 50px;
}
table.responsive td.small-padding {
padding-top: 5px;
padding-bottom: 5px;
}
table.responsive td.medium-padding {
padding-top: 15px;
padding-bottom: 15px;
}
table.responsive td.large-padding {
padding-top: 25px;
padding-bottom: 25px;
}
}
I have used ngResponsiveCss.
Can you please guide what should I edit in this.
I have next problem:
string Domain = string.Empty;
string Selector = string.Empty;
IPrivateKeySigner privateKey = null;
Domain = "MyDomain.co.il";
Selector = "MyDomaincoil";
privateKey = PrivateKeySigner.Create(PK_Coil); //PK_Coil - var with another Dkim
var msg = new DKIM.MailMessage();
msg.To.Add("check-auth#verifier.port25.com"); // for check
msg.From = new MailAddress("daabaev#gmail.com", "Email head", System.Text.Encoding.UTF8);
msg.Subject = "Jumbomail - קיבלת מייל חדש"; // hebrew title
msg.Body = "<!DOCTYPE HTML PUBLIC \"-//IETF//DTD HTML//EN\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n<head>\r\n <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\r\n <title></title>\r\n</head>\r\n<body style=\"margin: 0px 0px 0px 0px; margin-right: auto; margin-left: auto; font-family: arial, Calibri, 'lucida grande';\r\n font-style: italic; font-size: 16px;\">\r\n <div style=\"font-size:14px;margin-left:auto;margin-right:auto;width:680px;text-align:center\">\r\n\t\t#LANG#<br />\r\n\t</div>\r\n\t<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width: 680px;\" align=\"center\">\r\n <tr>\r\n <td style=\"width: 680px;\">\r\n <!--// Start Header -->\r\n <div>\r\n </div>\r\n <div style=\"width: 680px; text-align: center;\">\r\n <img src=\"http://localhost:6169/GeneralHandlers/LoadUserMailImage.ashx?type=header&image=header_270053_8_2014_16_45_21.jpg&pathId=2\" alt=\"\"\r\n title=\"\" style=\"border: 0px; width: 680px;\" />\r\n </div>\r\n <div>\r\n </div>\r\n <!--// End Header -->\r\n <!--// Start Body -->\r\n\t\t\t\t<div style=\"WIDTH: 680px; FONT-FAMILY: Arial\"> <table style=\"WIDTH: 680px; FONT-FAMILY: arial; FONT-SIZE: 14px\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\"> <tbody> <tr> <td style=\"WIDTH: 15px\"></td> <td style=\"WIDTH: 650px\"> <div style=\"DIRECTION: rtl\" dir=\"rtl\"> <table style=\"WIDTH: 680px; FONT-FAMILY: arial; FONT-SIZE: 14px\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\"> <tr> <td align=\"center\" style=\"width: 400px\"> <div style=\"TEXT-ALIGN: center; direction: rtl\"> <span style=\"FONT-SIZE: 18px; FONT-WEIGHT: bold\">שלום</span>, <br> <span style=\"FONT-WEIGHT: bold\">or#netbiz.co.il</span> <span style=\"direction:rtl\"> שלח/ה אלייך מייל באמצעות Jumbomail. </span><br> <div style=\"TEXT-ALIGN: right; DIRECTION: rtl\"> <br> <div style=\"TEXT-ALIGN: right; DIRECTION: rtl\"> <br> <span style=\"FONT-WEIGHT: bold\"></span> <br> <br> </div> </div> <br> </div> </td> <td style=\"width: 20px; BORDER-RIGHT: #cccccc 1px solid; FONT-SIZE: 1px; width: 1px; height: 200px;\"> </td> <td align=\"center\" style=\"width: 280px\"> <img title=\"לחצו כאן להורדת הקבצים\" border=\"0\" alt=\"לחצו כאן להורדת הקבצים\" src=\"http://localhost:6169/App_Themes/MailTemplate/he-IL/downloadbtn.jpg\" /> <br> להורדת הקבצים לחצו כאן<br> <br> <span style=\"COLOR: #797979\"> <span dir=\"rtl\" style=\"FONT-WEIGHT: bold\">לתשומת ליבך:</span> מייל זה יהיה נגיש להורדה עד לתאריך 25/12/2014. </span><br> </td> </tr> </table> <div> </div> <br> <div> <div align=\"right\"><img alt=\"\" title=\"\" style=\"border: 0px;\" src=\"http://localhost:6169/GeneralHandlers/LoadUserMailImage.ashx?type=logo&image=logo_270053_8_2014_16_45_38.jpg&pathId=1\" /></div> <br> </div> <div> <br> </div> </div> </td> <td style=\"WIDTH: 15px\"></td> </tr> </tbody> </table> </div>\r\n <!--// End Body -->\r\n <!--// Start Footer -->\r\n <div style=\"border-top: 1px solid #e1e4e7;\">\r\n <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\" width=\"680px\" style=\"direction: ltr;\">\r\n <tr>\r\n <td style=\"text-align: left; padding: 0px; margin: 0px; border: 0px; height: 42px;\r\n width: 11px;\">\r\n <img src=\"http://localhost:6169/App_Themes/MailTemplate/mail-user-footer-left.jpg\"\r\n style=\"width: 11px; height: 42px; border: 0px; float: left;\" alt=\"\" />\r\n </td>\r\n <td style=\"background: #b5bbc2; font-size: 1px; height: 42px; width: 670px; padding: 0px;\r\n margin: 0px;\">\r\n\t\t\t\t\t\t\t\t \r\n </td>\r\n <td style=\"text-align: right; height: 42px; padding: 0px;\r\n margin: 0px; border: 0px; width: 11px;\">\r\n <img src=\"http://localhost:6169/App_Themes/MailTemplate/mail-user-footer-right.jpg\"\r\n style=\"width: 11px; height: 42px; border: 0px; float: right;\" alt=\"\" />\r\n </td>\r\n </tr>\r\n </table>\r\n </div>\r\n <!--// End Footer -->\r\n </td>\r\n </tr>\r\n </table>\r\n</body>\r\n</html>";
msg.Sender = new MailAddress("company email.co.il");
msg.IsBodyHtml = true;
DkimSigner dkim = new DkimSigner(privateKey, Domain, Selector, new string[] { "From", "To", "Subject" });
msg.DkimSign(dkim);
System.Net.Mail.SmtpClient c = new System.Net.Mail.SmtpClient();
c.Port = 25;
c.Host = "my host";
c.Send(msg);
So if i try send message with English title - I am not have problem - i got mail; WITH Signed by:
But if i switch to Hebrew title (I change ONLY title) - I got mail WITHOUT Signed by:
Guys what i need to do?? Thank you.
(Sorry for my english)