Question

我正在使用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，但在每个页面上它显示有一个上边距或某种标题。

Answer 1

设置这些值似乎解决了我的问题。

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

我在这些中有重复的值，这是真的。

converter.Options.DisplayHeader = false;
converter.Options.DisplayFooter = false;

Selectpdf - 无法删除页面上的上边距

1 个答案: