Footer在最後一頁，而PDF飛碟飛行

我試圖添加頁腳到我生成的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); 
      }

但似乎：最後僞選擇器無法正常工作。

最好的方法是在最後一頁有完全不同的頁腳，其中會包含這三個頁腳的內容。我只能在最後一頁添加頁腳，但是我無法禁用那些簡單的頁腳。

也許還有其他的方法嗎？我將不勝感激任何幫助。

來源

2014-03-03 user3333010

如果您事先知道最後一頁會顯示什麼，您可以使用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>

來源

2014-03-03 14:10:54 obourgain

不幸的是所有的內容是動態的。我不知道最後一頁會是什麼。 – user3333010

對不起。由於沒有'page：last'選擇器，我看不到任何解決方案。 – obourgain

試試這個：

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

來源

2014-04-14 14:06:16 robertad

Footer在最後一頁，而PDF飛碟飛行

回答

相關問題