如何在 HTML2PDF 中指定动态页脚和页眉

Question

我正在尝试使用 HTML2PDF 将 html 页面转换为 PDF。 HTML 页面有一个表单，该表单包含具有动态高度的文本区域。 textarea的高度根据里面的文字调整。

问题示例在 here.

<div class="page-content">
<a href="#" id='download'>Download</a><br>
<textarea name="" id="" cols="" rows="" style='height:320px;'></textarea><br>
<textarea name="" id="" cols="" style='height:420px;' rows=""></textarea><br>
<textarea name="" id="" cols="" style='height:250px;' rows=""></textarea><br>
<textarea name="" id="" cols="" style='height:278px;' rows=""></textarea><br>
<textarea name="" id="" cols="" style='height:176px;' rows=""></textarea><br>
<textarea name="" id="" cols="" style='height:114px;' rows=""></textarea><br>
</div>

正如您在示例中看到的，我得到的结果类似于下图。在示例中，我固定了 texareas 的高度。它是在我正在处理的页面上动态确定的。

你可以在下面找到我想要得到的结果的示例图片；

任何帮助或建议都会有所帮助。我试过 this 但表单有多个页面，我不知道如何动态设置页脚和页眉。

Answer 1

HTML2PDF 具有 here 中列出的选项。边距和分页选项解决了这个问题。我使用了以下选项。

var element = document.getElementsByClassName('page-content')[0];
var opt = {
      margin:       0.5, //margin for pages
      filename:     '<?php echo $real_data['applicant_name']; ?>.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 1 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' },
      pagebreak:    { mode: ['avoid-all', 'css', 'legacy'] } //It determines how HTML elements should be split.
    };

    
html2pdf().set(opt).from(element).save();

如何在 HTML2PDF 中指定动态页脚和页眉

How Do I Specify Dynamic Page Footer & Header in HTML2PDF

html

javascript

css

html2pdf