在PDF封面上隐藏页眉/页脚

时间:2014-04-01 15:39:47

标签: html ruby-on-rails pdf wkhtmltopdf wicked-pdf

我正在使用Ruby 1.9.3& Rails 3.2。我正在使用wicked_pdf从html生成pdf。 现在,文档有一个页眉和一个页脚,但是,我想在所有页面上显示页眉和页脚除了第一页/封面

这是来自我的控制器的剪切代码:

  render pdf: 'lorem',                                          
    page_size: 'A4',                                                            
    layout: false,                                                              
    orientation: @document.landscape ? 'Landscape' : 'Portrait',                
    encoding: 'UTF8',                                                           
    no_background: false,                                                       
    header: {html: {template: 'documents/_header'}, spacing: 35 },              
    footer: {html: {template: 'documents/_footer'}, spacing: 0 },               
    margin: {top: 30, bottom: 20, left: 0, right: 0},                           
    show_as_html: params[:html].present?

这是我用来隐藏标题的JS代码:

function() {                                                                   
 var x=document.location.search.substring(1).split('&');                      
 for (var i in x) {                                                           
   if(x[i] == "page=1"){                                                      
     document.getElementById("header").style.display = "none";                
     document.getElementsByTagName('body')[0].style.marginTop = "-100px";                          
   }                                                                                               
  }                                                                           
}();

如上所示,在控制器操作中,我将上边距设置为30(像素,我猜是?)。所以我希望顶部边距,页眉和页脚不会显示在第一页上,而是显示在其余的文档页面上。

我遇到困难的时候,当我试图访问文档创建的“中间状态”时,JavaScript&评估HTML,因此,我发现调试javascript 非常难

那么,有没有办法实现所需的功能?

谢谢!

1 个答案:

答案 0 :(得分:1)

我使用类似的Header JS技巧来改变前三页的页眉/页脚。同样可以用来隐藏两个元素,因此它们不会出现。你不能通过 sob 摆脱边缘。要获得该功能,我建议将其添加为wkhtmltopdf Github问题跟踪器中的建议。

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script>
        function subst() {
        var vars = {};
        var valuePairs = document.location.search.substring(1).split('&');
        for (var i in valuePairs) {
            var valuePair = valuePairs[i].split('=', 2);
            vars[valuePair[0]] = decodeURIComponent(valuePair[1]);
        }

        var replaceClasses = [
            'frompage',
            'topage',
            'page',
            'webpage',
            'section',
            'subsection',
            'subsubsection',
        ];

        for (var i in replaceClasses) {
            var hits = document.getElementsByClassName(replaceClasses[i]);

            // Show "Hider" on pages 3 and over
            if (replaceClasses[i] == 'page' && vars[replaceClasses[i]] > 2) {
                document.getElementById('hider').style.display = "";
            } else if (replaceClasses[i] == 'page' && vars[replaceClasses[i]] == 1) {
                document.getElementById('hider2').style.display = "";
            }

            var tmp;
            for (var j = 0; j < hits.length; j++) {
                tmp = vars[replaceClasses[i]];
                if(typeof tmp !== 'undefined' && tmp) {
                    hits[j].textContent = tmp;
                }
            }
        }
        }
    </script>
    </head>
    <body onload="subst()" style="margin: 0; padding:0;">
        <table style="width: 100%; border-top:1pt solid black;">
          <tr id="hider" style="display:none;">
            <td></td>
            <td class="" style="">FOO</td>
            <td style="text-align:right">ASDASD</td>
          </tr>
        </table>
        <div id="hider2" style="display:none;">BAR</div>
    </body>
</html>