pdf Generate PDF with Ajax and FPDF [SOLVED]

[Angel Moral]

I want to generate a pdf with the FPDF library, I have a template with a button that when pressed makes an ajax query and I want it to return a new tab with the pdf generated by the library.

my template (task.tpl)

{extends file='page.tpl'}
{block name='page_content_container'}
<label id="random_number"></label>
<section>
<p><label>Introduce ancho:</label> <input type="text" id="name" name="name" maxlength="8" size="10" /></p>
<p><label>Introduce alto:</label> <input type="text" id="name" name="name" maxlength="8" size="10" /></p>
<form method="post">
  <button id="plantilla" value="val_1" name="but1">button 1</button>
  <input id="access_token" type="hidden" name="access_token" value="<?php echo $_SESSION['access_token']; ?>" />
</form>

</section>
{/block}

my js file (multipurpose.js)

$(document).ready(function(){
    $('#plantilla').click(function(){
        $.ajax({
            url:mp_ajax,
            data:{
            },
            method: 'POST',
            success: function(data) {
                //$('#random_number').html(data)
            },
            error: function(result) {
                alert('error');
            }
            
        });
    });
        
})

my php file (ajax.php)

<?php
require_once('../../config/config.inc.php');
require_once('../../init.php');
require('../../vendor/fpdf/fpdf.php');
include('../../vendor/fpdf/fpdf.php');

ob_start();
require('vendor/fpdf/fpdf.php');
$pdf = new FPDF('P','mm',array(20,10));
$pdf->AddPage();
$pdf->Output();

 

Edited May 3, 2019 by Angel Moral (see edit history)

[Angel Moral]

Finally he solved it in a simpler way. He created a page manually following the tutorial of Victor Rodenas @nadie https://victor-rodenas.com/2017/04/23/crear-pagina-php-en-prestashop-1-7/ 

But modifying the file nadie.tpl and including javascript code (including the library jspdf) to generate the pdf with the measures introduced by the user. The code would be as follows:

{extends file='page.tpl'}
{block name='page_title'}
<span class="sitemap-title">{l s='Plantilla descargable' d='Shop.Theme'}</span>
{/block}
{block name='page_content_container'}
<section>
<p><label>Introduce alto:</label> <input type="number" id="alto" name="name" maxlength="8" size="10" />cm</p>
<p><label>Introduce ancho:</label> <input type="number" id="ancho" name="name" maxlength="8" size="10" />cm</p>
<button onclick = "printPDF()">Descargar Plantilla</button>
<p id = "demo"</p>
</section>


{literal}
<script 
    src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js" 
    integrity="sha256-vIL0pZJsOKSz76KKVCyLxzkOT00vXs+Qz4fYRVMoDhw=" 
    crossorigin="anonymous">
</script>
{/literal}
{literal}
<script>
        console.log("Entro script");
		function printPDF() {
		    document.getElementById("demo");
		    var ancho = document.getElementById("ancho").value;
		    var alto = document.getElementById("alto").value;
		    var inancho = parseInt(ancho);
		    var inalto = parseInt(alto);
		    if(inancho>inalto){
		        const pdf = new jsPDF('l', 'cm', [ancho, alto]);
		        pdf.save();
		    }else{
		        const pdf = new jsPDF('p', 'cm', [ancho, alto]);
		        pdf.save();
		    }
			

		}

</script>
{/literal}
{/block}

The web would appear like this: