CODEWITHSUNDEEP
javascripthtmlcsshtml2pdf
oguzhancerit
oguzhancerit

Reputation: 1572

How Do I Specify Dynamic Page Footer & Header in HTML2PDF

I'm trying to convert a html page to PDF with HTML2PDF. HTML page has a form and this form contains textareas with dynamic heights. The height of the textarea is adjusted according to the text in it.

enter image description here

Problem sample is in 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>

As you can see in the example, I get results similar to the image below. In the sample, I fixed height of texareas. It is determined dynamically on the page I am dealing with.

You can find a sample image below for the result I want to get;

enter image description here

Any help or advice can be helpful. I tried this but the form has multiple pages and I don't have any idea how can I set page footer and header dynamically.

Upvotes: 1

Views: 3007

Answers (1)

oguzhancerit
oguzhancerit

Reputation: 1572

HTML2PDF has options listed in here. Margin and pagebreak option solved the problem. I used options below.

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

Upvotes: 1

Related Questions