选择 pdf - 无法删除页面上的上边距



我正在使用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; 

相关内容

  • 没有找到相关文章

最新更新