首页 文章

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

提问于
浏览 次
2

我_137644_m使用wicked_pdf从html生成pdf . 现在，文档有一个页眉和一个页脚，但是，我想在所有页面 except on the first/cover page 上显示页眉和页脚 .

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

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?

这是我试图用来隐藏 Headers 的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（像素，我猜是？） . 所以我希望顶部边距，页眉和页脚不会显示在第一页上，而是显示在其余的文档页面上 .

我遇到的困难是当我试图访问文档创建的"middle state"时，当评估JavaScript和HTML时，我发现调试javascript是 very hard .

那么，有没有办法实现所需的功能？

谢谢！

html ruby-on-rails pdf wkhtmltopdf wicked-pdf

1 回答

  • 1

    我使用类似的Header JS技巧来改变前三页的页眉/页脚 . 同样可以用来隐藏两个元素，因此它们不会出现 . 尽管呜咽，你无法摆脱边缘 . 要获得该功能，我建议将其添加为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>
    回复于

相关问题