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

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

转载作者：太空宇宙更新时间：2023-11-03 13:05:35

我正在使用 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/

文章推荐： c# - 动态注释/属性值

文章推荐： javascript - 在Android WebView中注入(inject)外部JS文件并调用

文章推荐： python类[]函数

文章推荐： java - JAVA中SSL握手时如何获取ClientHello信息

javascript - 在 AngularJS 中使用 DocRaptor 生成 PDF
我正在尝试将 DocRaptor 合并到我的 AngularJS 项目中以生成 PDF 并将某些页面导出为 PDF。我是 Angular 的新手，似乎找不到任何支持文档。有人可以指出我正确的资源。我找
javascript - 将 DocRaptor Web 服务与 AngularJS 一起使用？
我正在尝试使用 DocRaptor 从 AngularJS 应用生成 Excel (.xls) 文件.在尝试 DocRaptor 入门文档中所述的简单 POST 请求时，我不断收到以下错误。他们的文档
c# - 使用 docraptor c# 在 PDF 中添加页眉和页脚图像
我正在使用 docraptor ( https://docraptor.com/samples ) 创建 PDF，但我无法将图像作为页眉和页脚添加到生成的 PDF 中。我有下面的 Html，我正在使
html - 使用 docraptor : How to flow header logo on every page and fix footer on the first page of pdf. 打印 css 媒体
我正在尝试制作一个在线表格，其中包含页眉(带有公司 Logo )和页脚(具有三个不同的地址)。 body 里有很多东西。我需要在表单的每一页都显示页眉 Logo ，但我只需要在第一页而不是每一页上修复

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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