Selectpdf - невозможно удалить верхнее поле на странице

Я использую 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: [email protected]</p>
        </div>
    </div>
</div>
</body>
</html>

Когда я создаю это, у меня нет проблем с тем, чтобы сделать его pdf, но на каждой странице он появляется с верхним полем или каким-то заголовком.


html c# css email selectpdf
person andrelange91    schedule 21.11.2017    source источник
comment
ты пробовал body { margin:0; padding:0; } ?   -  person Roysh    schedule 21.11.2017
comment
@Roysh, да, он уже добавлен в самом верху шаблона.   -  person andrelange91    schedule 21.11.2017
comment
Вы говорите о пробеле между Name и @@Title@@ ?   -  person Roysh    schedule 21.11.2017
comment
Над h1 у меня есть то, что кажется почти восемьюдесятью пикселями пространства.   -  person andrelange91    schedule 21.11.2017
comment
Я поместил ваш код в скрипку, и единственное место, которое я вижу, касается h2. Нет верхнего поля выше h1   -  person Roysh    schedule 21.11.2017
comment
@Roysh, это как раз моя проблема ... при просмотре моего шаблона интервал не появляется, но затем я конвертирую его в pdf, и тогда появляется интервал.   -  person andrelange91    schedule 21.11.2017
comment
Что ж, я могу сказать, что проблема не в самом HTML. Есть что-то в преобразовании его в pdf, что вызывает это   -  person Roysh    schedule 21.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

Установка этих значений, похоже, решила мою проблему.

converter.Options.WebPageHeight = 1050;
converter.Options.WebPageWidth = 750;

и у меня были дублированные значения в них, которые говорили правду.

converter.Options.DisplayHeader = false;
converter.Options.DisplayFooter = false;
person andrelange91    schedule 21.11.2017