添加頁眉和頁腳圖像使用docraptor C＃

我使用用於創建PDF docraptor（https://docraptor.com/samples），但我不能添加圖片的頁眉和頁腳到生成的PDF PDF。添加頁眉和頁腳圖像使用docraptor C＃

下面我有Html和我使用AJAX調用API並通過以下HTML作爲內容箱墊，但其在頁腳和頭不添加圖片。它將其添加爲相似的內容。

VAR數據= $（ '＃容器-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>

來源

2015-06-17 Shailesh

至少是問題的一部分是利用@@，而不是單數@，當你正在處理頁面和頁面底部的風格。我改變那些奇異而回來從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>

來源

2015-06-17 17:29:52

謝謝@Joel，但在MVC逃跑@我加@@ O/W其給出錯誤 – Shailesh

並且還頁眉/頁腳應在PDF的每一頁都被重複。 – Shailesh

@Shailesh：我添加了一些示例代碼來證明你所需要的最少的代碼你想要的東西。 –

添加頁眉和頁腳圖像使用docraptor C＃

回答

相關問題