个人中心
gpt4 book ai didi

c# - 使用 docraptor c# 在 PDF 中添加页眉和页脚图像

转载 作者：太空宇宙 更新时间：2023-11-03 13:05:35 26 4
gpt4 key购买 nike

我正在使用 docraptor ( https://docraptor.com/samples ) 创建 PDF，但我无法将图像作为页眉和页脚添加到生成的 PDF 中。

我有下面的 Html，我正在使用 AJAX 调用 API 并将 HTML 作为内容传递到 crate 中，但它没有在 Footer 和 header 中添加图像。它添加它作为喜欢的内容。

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>

最佳答案

至少部分问题是在处理页面和页面底部样式时使用 @@ 而不是单数 @。我将它们更改为单数，并从 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>

关于c# - 使用 docraptor c# 在 PDF 中添加页眉和页脚图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30894532/

26 4 0
文章推荐： c# - 动态注释/属性值
文章推荐： javascript - 在Android WebView中注入(inject)外部JS文件并调用
文章推荐： python类[]函数
文章推荐： java - JAVA中SSL握手时如何获取ClientHello信息
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com