堆棧內存溢出
  簡體   English   中英

使用 docraptor c# 在 PDF 中添加頁眉和頁腳圖像

[英]Add Header and Footer Image in PDF using docraptor c#

 原文  2015-06-17 14:27:30  5   1    c#/ pdf/ header/ footer

問題描述

我正在使用 docraptor ( https://docraptor.com/samples ) 創建 PDF，但我無法將圖像作為頁眉和頁腳添加到生成的 PDF 中。

我在 Html 下面，我使用 AJAX 來調用 API 並在 HTML 下面傳遞作為內容來創建一個 pad，但它沒有在 Footer 和 header 中添加 Image 。 將其添加為內容。

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">support@docraptor.com</span>
                </address>
            </div>

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

            <div class="buyer">
                <h2>Billed To</h2>
                Super Best Client
                <span class="email">superbestclient@example.com</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 | support@docraptor.com</p>
        </footer>

    </div>

</body>
</html>

1 個解決方案

解決方案1
 1 已采納  2015-06-17 17:29:52

至少部分問題是在處理頁面和頁面底部樣式時使用@@而不是單數@ 。 我將它們更改為單數，並從 DocRaptor 中取回了看起來更清晰的 PDF。

這是一個最小的示例，在每個頁面的頁眉和頁腳中都有圖像。

<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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在C＃中使用iTextsharp版本5.2.0在pdf的所有頁面中添加頁眉和頁腳 使用 iTextsharp 為 PDF 添加頁眉和頁腳 以內聯C＃將頁眉和頁腳添加到電子郵件中 如何設置 PDF header 的高度，c# Z2567A5EC9705EB7AC2C984UsingE0NReco 應用程序中的頁腳 使用 iTextSharp 將水印添加到 PDF 不適用於圖像 PDF C# 使用C＃刪除頁眉和頁腳 iTextSharp – 添加頁眉/頁腳到 PDF 使用 iText7 和 ASP.NET C# 在 PDF 文件的頁腳添加頁碼 如何使用 C# 和 iTextSharp 在 pdf 中添加圖像？ 如何在C＃中添加頁眉和頁腳txt文件？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM