我正在使用SelectPdf
,并且在配置我的转换器以将字符串转换为pdf时,我的pdf最终会在页面顶部生成一些边距。
我的转换器:
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;
}
在我的模板中,页面顶部没有明显的边距,所以到目前为止,我无法弄清楚它来自哪里。
我的模板:
<!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">
<a href="#"><img src="facebook-icon.png" /><br />Find us on facebook</a>
</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>
当我生成它时,我把它制作成pdf没有问题,但是在每一页上,它都带有上边距或某种标题。
设置这些值似乎已经解决了我的问题。
converter.Options.WebPageHeight = 1050;
converter.Options.WebPageWidth = 750;
我在这些中重复了值,这说是真的。
converter.Options.DisplayHeader = false;
converter.Options.DisplayFooter = false;