Question

在Wicked_pdf中我有几个部分。每个部分都会启动一个新页面，并由标题启动，如下所示：

<h2 class="section" style="color: #0050b2;font: arial, sans-serif;font-size: 17;">Application details</h2>

在我的标题中，我想在属于此部分的第一个和所有后续页面上显示部分名称。我知道这将是Javascript / jQuery，但我在这方面的技能严重不足。

非常感谢任何帮助。

Answer 1

请看下面的代码段，取自WickedPDF Readme：

<html>
  <head>
    <script>
      function number_pages() {
        var vars={};
        var x=document.location.search.substring(1).split('&');
        for(var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
        var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
        for(var i in x) {
          var y = document.getElementsByClassName(x[i]);
          for(var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
        }
      }
    </script>
  </head>
  <body onload="number_pages()">
    Page <span class="page"></span> of <span class="topage"></span>
  </body>
</html>

特别是这一行：

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

这些是在每个PDF页面上提供的特殊参数，可通过document.location.search访问。对于您的情况，幸运的是subsection包含PDF页面中元素的文本内容。

现在，要实现动态标头，在控制器中需要指定:header，并将其指向包含以下内容的erb文件：

<html>
  <head>
    <script>
      function subst() {
        var vars={};
        var x=document.location.search.substring(1).split('&');
        for(var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}

        document.getElementById('dynamic-header').innerHTML = vars['section'];
      }
    </script>
  </head>
  <body onload="subst()">
    <h2 id="dynamic-header">Replace me!</h2>
  </body>
</html>

标题将替换为PDF页面中的元素。这也解决了您的动态需求，因为vars['section']将包含相同的内容，直到找到具有不同内容的另一内容。请注意，我没有测试上面的代码，但我希望你明白这个想法。

wicked_pdf标头中的动态部分名称

1 个答案: