0

故事：我们正在使用 gotenberg 将 HTML 转换为 PDF。这是一个发票用例，因此很明显，项目列表可能会延伸一页。在这样的多页场景中，我希望每个页面都有一个页脚。

怎么了？在生成多页pdf时，内容（即项目列表）与固定页脚重叠。此外，页脚仅出现在第一页上，其余页面为空。

我尝试了什么？我尝试注入一些 JS 来动态计算项目的高度并操作 DOM 以插入换行符和页脚。

代码：

  <script>

    window.addEventListener('DOMContentLoaded', function () {
      
      const testElement = document.getElementById('tests');

      testElement.addEventListener('load', function () {
        console.log('sahil')
      })

      let nodesFragment = document.createDocumentFragment();
      //copy of the children in context
      const testItems = [...testElement.children];
      console.log(testItems);

      const divEnd = document.createElement('div');
      divEnd.className = 'footer-find'
      const breakHeight = 10;
      let heightCounter = 0;

      nodesFragment.appendChild(testElement.firstChild);

      for (let i=0; i < testItems.length; i++) {

        heightCounter += testItems[i].clientHeight;
        nodesFragment.appendChild(testItems[i]);
        
        if (heightCounter >= breakHeight) { 
// if height of elements is greater than the specified breakHeight put an element
          nodesFragment.appendChild(divEnd);
          heightCounter = 0;
        }

      }
      nodesFragment.appendChild(testElement.lastChild);

      testElement.replaceWith(nodesFragment, testElement);

      document.getElementsByClassName('invoice-datetime')[0].innerHTML = "heey";
    })

    window.removeEventListener("DOMContentLoaded", window)
</script>

这种方法显然失败了，因为模板本身没有列表内容。

有解决方法吗？

4

0 回答 0