Can I add HTML structure to the header on each page?

[bobicgit]

Hello, as all of the examples shows how to add footer (via pdfCallback in options), none of them is showing how to add header. I know i should pass different coords to 'text' method, but is there an option to add html structure to the header, not only text?

[wuliupo]

Here is am example: https://github.com/eKoopmans/html2pdf.js/issues/229

html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) {
var totalPages = pdf.internal.getNumberOfPages();

for (i = 1; i <= totalPages; i++) {
pdf.setPage(i);
pdf.addImage(image, "PNG", 0, 0, 200, 200);
pdf.text(50, 50, 'new text here');
}
}).save();

[celsowm]

Hi ! Is it possible to add header and footer without the risk of "overlapping" the original content? Something like php's mpdf? Thanks in advance !

[Lkirankota]

Hi ! Is it possible to add header and footer without the risk of "overlapping" the original content? Something like php's mpdf? Thanks in advance !

is there any updated on this ?

[ReenSalleh]

Hi ! Is it possible to add header and footer without the risk of "overlapping" the original content? Something like php's mpdf? Thanks in advance !

Hi... this is how i add header and footer. Hope helping.

<script src="<?php echo base_url('/assets/vendor/html2pdf-0.9.2/html2pdf.bundle.min.js');?>"></script>

<script>
    var element = document.getElementById('canvas_div_pdf');

    html2pdf()
        .from(element)
        .set({
            margin:       [25, 15, 15, 15],
            filename:     '<?=$fname;?> as <?=trim(date("dmY"));?>.pdf',
            image:        { type: 'jpeg',quality: 0.98 },
            html2canvas:  { scale: 2, logging: true, dpi: 192, letterRendering: true },
            jsPDF:        { unit: 'mm', format: 'a4', orientation: 'p' },
            pagebreak: { before: '.page-break', avoid: 'table' }
        })
        .toPdf()
        .get('pdf').then(function (pdf) {
          var totalPages = pdf.internal.getNumberOfPages();

          for (let i = 1; i <= totalPages; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setTextColor(150);
            pdf.text(15, 15, '[SULIT]');
            pdf.text('Tarikh Cetakan: <?=trim(date("d/m/Y h:i A"));?> | Mukasurat: ' + i + '/' + totalPages+'', pdf.internal.pageSize.getWidth() - 85, pdf.internal.pageSize.getHeight() - 8);
          } 
    }).save();
</script>

Example Generated pdf file (main content is using php script). Example.pdf

p/s: Sorry my example is in Malay Language :sweat_smile:

[Puspa-Subedi]

Can we have image in case of text

[Ankita-Nandkumar-Patil]

can we add styled html/react component as header/footer instead of plain text ?

[Epyuel]

can we add styled html/react component as header/footer instead of plain text ?

any update?

[mynkamipara]

Hi ! Is it possible to add header and footer without the risk of "overlapping" the original content? Something like php's mpdf? Thanks in advance !

Hi... this is how i add header and footer. Hope helping.

<script src="<?php echo base_url('/assets/vendor/html2pdf-0.9.2/html2pdf.bundle.min.js');?>"></script>

<script>
    var element = document.getElementById('canvas_div_pdf');

    html2pdf()
        .from(element)
        .set({
            margin:       [25, 15, 15, 15],
            filename:     '<?=$fname;?> as <?=trim(date("dmY"));?>.pdf',
            image:        { type: 'jpeg',quality: 0.98 },
            html2canvas:  { scale: 2, logging: true, dpi: 192, letterRendering: true },
            jsPDF:        { unit: 'mm', format: 'a4', orientation: 'p' },
            pagebreak: { before: '.page-break', avoid: 'table' }
        })
        .toPdf()
        .get('pdf').then(function (pdf) {
          var totalPages = pdf.internal.getNumberOfPages();

          for (let i = 1; i <= totalPages; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setTextColor(150);
            pdf.text(15, 15, '[SULIT]');
            pdf.text('Tarikh Cetakan: <?=trim(date("d/m/Y h:i A"));?> | Mukasurat: ' + i + '/' + totalPages+'', pdf.internal.pageSize.getWidth() - 85, pdf.internal.pageSize.getHeight() - 8);
          } 
    }).save();
</script>

Example Generated pdf file (main content is using php script). Example.pdf

p/s: Sorry my example is in Malay Language 😅

Still have you html code ? I want to see div strcture

[ReenSalleh]

Hi ! Is it possible to add header and footer without the risk of "overlapping" the original content? Something like php's mpdf? Thanks in advance !

Hi... this is how i add header and footer. Hope helping.

<script src="<?php echo base_url('/assets/vendor/html2pdf-0.9.2/html2pdf.bundle.min.js');?>"></script>

<script>
    var element = document.getElementById('canvas_div_pdf');

    html2pdf()
        .from(element)
        .set({
            margin:       [25, 15, 15, 15],
            filename:     '<?=$fname;?> as <?=trim(date("dmY"));?>.pdf',
            image:        { type: 'jpeg',quality: 0.98 },
            html2canvas:  { scale: 2, logging: true, dpi: 192, letterRendering: true },
            jsPDF:        { unit: 'mm', format: 'a4', orientation: 'p' },
            pagebreak: { before: '.page-break', avoid: 'table' }
        })
        .toPdf()
        .get('pdf').then(function (pdf) {
          var totalPages = pdf.internal.getNumberOfPages();

          for (let i = 1; i <= totalPages; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setTextColor(150);
            pdf.text(15, 15, '[SULIT]');
            pdf.text('Tarikh Cetakan: <?=trim(date("d/m/Y h:i A"));?> | Mukasurat: ' + i + '/' + totalPages+'', pdf.internal.pageSize.getWidth() - 85, pdf.internal.pageSize.getHeight() - 8);
          } 
    }).save();
</script>

Example Generated pdf file (main content is using php script). Example.pdf p/s: Sorry my example is in Malay Language 😅

Still have you html code ? I want to see div strcture

Hi @mynkamipara

<title>report.pdf</title>

<link rel="stylesheet" href="<?php echo base_url('/assets/css/bootstrapmix.css');?>">

<div id="canvas_div_pdf" class="content" style="display: none">

    <div align="center" class="my-0"><img class="my-0" src="<?php echo base_url('/assets/images/logo-ukm.png'); ?>"></div><br />
    <div class="text-center h5 text-dark"><strong>LAPORAN JKADP - ANALISIS FAKULTI</strong></div>
    <div class="text-center text-dark font-weight-bold" style="line-height: 1.0em">
        LAPORAN SPPP BAGI PRASISWAZAH<br />        
        <p class="text-primary mt-1">
            SEMESTER 2 SESI 20202021
        </p>

        <p class="small"><ins>PELAJAR AMBILAN ARUS PERDANA</ins></p>
    </div>

    rest of your content here....

</div>

<script src="<?php echo base_url('/assets/vendor/html2pdf-0.9.2/html2pdf.bundle.min.js');?>"></script>

<script>

    var element = window.document.getElementById("canvas_div_pdf").innerHTML;

    html2pdf()
        .from(element)
        .set({
            margin:       [15, 15, 15, 15],
            filename:     'report.pdf as <?=trim(date("dmY"));?>.pdf',
            image:        { type: 'jpeg',quality: 0.98 },
            html2canvas:  { scale: 2, logging: true, dpi: 192, letterRendering: true },
            jsPDF:        { unit: 'mm', format: 'a4', orientation: 'p' },
            pagebreak: { before: '.page-break', avoid: 'tr' }
        })
        .toPdf()
        .get('pdf').then(function (pdf) {
          var totalPages = pdf.internal.getNumberOfPages();

          for (let i = 1; i <= totalPages; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setTextColor(150);
            pdf.text(15, 10, '[SULIT]');
            pdf.text('Tarikh Cetakan: <?=trim(date("d/m/Y h:i A"));?> | Mukasurat: ' + i + '/' + totalPages+'', pdf.internal.pageSize.getWidth() - 85, pdf.internal.pageSize.getHeight() - 8);
          } 
    }).save();

</script>

Output example >>>>>> report.pdf