【问题标题】:Footer on last page while pdf generation by flying saucer飞碟生成pdf时最后一页的页脚
【发布时间】:2014-04-04 13:39:39
【问题描述】:

我正在使用飞碟 java 库。

我正在尝试为生成的 pdf 添加页脚。

目标是每个页面的页脚相同,最后一页的内容不同。

html>
<head>
    <style type="text/css">

    @page {
            size: 8.5in 11in;
            margin-bottom: 1in;

            @bottom-left {
                content: element(footer_one);
            }

            @bottom-right{
                content: element(footer_two);
            }
            @bottom-center{
                content: element(footer_rights);
        }
    }

    #footer_two {position: running(footer_two); }
    #footer_one {position: running(footer_one); }
    #footer_three {position: running(footer_three);}

    #footer_two, #footer_one, #footer_three { margin: 0 padding:0;}
    #footer_three { border-top: 2px solid #3390FF;}
    </style>
</head>
<body>
    <div id="footer_one">
        some text short text about three words, on each page
    </div>
    <div id="footer_two">
        some text short text, like page numbers etc, on each page
    </div>

   <div>
      Whole body content 
    </div>

    <div id="footer_three">
        some text looooooooonnnnnnnnnggggggggg text, some about ten rows. Only on last page
    </div>
</body>

这几天我一直在苦苦挣扎,在网上找到的任何建议都不够好。

我正在尝试

@page:last {} 

或与:

@bottom-left {
                content: element(footer_one, last-except);
            }

            @bottom-right{
                content: element(footer_two, last-except);
            }

但似乎 :last 伪选择器不起作用。

最好的方法是在最后一页使用完全不同的一个页脚,其中包括这三个页脚的内容。 我只能在最后一页添加页脚,但我不能禁用那些简单的页脚形成前一页。

也许还有其他方法? 我将不胜感激。

【问题讨论】:

    标签: html css pdf-generation flying-saucer


    【解决方案1】:

    试试这个:

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>last footer</title>
    
        <style type="text/css">
            div.pdf-footer {
                padding-top: 4pt;
                position: running(footer);
            }
    
            @page {
                @bottom-center {
                    content: element(footer, last);
                }
            }
        </style>
    </head>
    <body>
        <div class="pdf-footer">all pages except last</div>
    
        <div>content</div>
    
        <div class="pdf-footer">only last page</div>
    </body>
    </html>
    

    【讨论】:

      【解决方案2】:

      如果你提前知道最后一页会显示什么,可以使用CSS3 named pages

      例子:

      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
       <style type="text/css">
          .newpage{page-break-before:always}
      
          @page {@bottom-center {content: element(footer)}}
          #footer {position: running(footer);}
      
          @page last {@bottom-center {content: element(lastfooter)}}
          #lastfooter{position: running(lastfooter);}
          #lastpage  {page:last}
      }
       </style>
      </head>
          <body>  
              <div id="footer">Footer for all pages except last one</div>
              <div id="lastfooter">Footer for last page</div>
      
              <div>Content for all pages except last one</div>
              <div class="newpage" id="lastpage">Last page content</div>
          </body>
      </html>
      

      【讨论】:

      • 不幸的是,所有内容都是动态的。我不知道最后一页会是什么。
      • 对不起。由于没有 page :last 选择器,我没有看到任何解决您的问题的方法。
      猜你喜欢
      • 2013-11-18
      • 2012-01-05
      • 2013-07-31
      • 2019-09-25
      • 2016-06-26
      • 2017-11-25
      • 2014-01-03
      • 2013-12-18
      • 1970-01-01
      相关资源
      最近更新 更多