时间戳

首页 > 解决方案 > 如何在 HTML2PDF 中指定动态页脚和页眉

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

问题描述

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

在此处输入图像描述

问题样本在这里。

<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 的高度。它是在我正在处理的页面上动态确定的。

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

在此处输入图像描述

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

标签： javascripthtmlcsshtml2pdf

解决方案

HTML2PDF 在此处列出了选项。边距和分页选项解决了这个问题。我使用了下面的选项。

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();

推荐阅读