Добавете изображение на горен и долен колонтитул в PDF с помощта на docraptor c#

Използвам docraptor (https://docraptor.com/samples) за създаване на PDF, но не мога да добавете изображение като горен и долен колонтитул в генерирания PDF файл.

Имам Html под Html и използвам AJAX за извикване на API и предавам под HTML като съдържание за създаване на подложка, но не добавя изображение в долния колонтитул и горния колонтитул. Добавя го като подобно съдържание.

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">[email protected]</span>
                </address>
            </div>

            <div class="status paid">PAID</div>

            <div class="buyer">
                <h2>Billed To</h2>
                Super Best Client
                <span class="email">[email protected]</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 | [email protected]</p>
        </footer>

    </div>

</body>
</html>

pdf c# header footer
person Shailesh    schedule 17.06.2015    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Поне част от проблема е използването на @@ за разлика от @ в единствено число, когато работите със стилове на страница и дъно на страница. Промених ги на единствено число и си върнах по-здраво изглеждащ PDF от DocRaptor.

Ето минимален пример, който има изображения в горния и долния колонтитул на всяка страница.

<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>
person Joel Meador    schedule 17.06.2015
comment
Благодаря на @Joel, но в MVC за бягство @ добавих @@ o/w дава грешка - person Shailesh; 18.06.2015
comment
Освен това горният/долният колонтитул трябва да се повтаря във всяка страница на PDF. - person Shailesh; 18.06.2015
comment
@Shailesh: Добавих примерен код, за да демонстрирам минималния код, от който се нуждаете за това, което искате. - person Joel Meador; 18.06.2015