Extreme difficulty generating PDF with PHP or Javascript

Question

Extreme difficulty generating PDF with PHP or Javascript

Asked 5 years, 9 months ago

Viewed 140 times

-1

Extreme difficulty generating PDF with PHP or Javascript

I’m here at the attempt of generate PDF file for HTML.

I made 3 attempts.

The HTML and the CSS are the same to the 3 attempts.

Try 1 -> PHP => Using mPDF with CSS in a PHP variable

<?php

  $css = "
        img {
            max-width: 100%;
        }
        ul {
            list-style: none;
        }
        div.relatorio {
            width: 95%;
            margin: 0 auto;
        }
        div.relatorio ul.border {
            border: .1px rgb(0,0,0) solid;
            background-color: black;
        }
        div.relatorio .centralizado {
            text-align: center !important;
        }
        div.relatorio .backCinza {
            background-color: rgb(217,217,217);
        }
        div.relatorio ul.ulInlineBlock li {
            display: inline-block;
        }
        div.relatorio ul.lancamento li, div.relatorio ul.resumo li {
            height: 100%;
            line-height: 18px;
            font-size: .85em;
            border-left: .1px rgb(0,0,0) solid;
            text-align: center;
            vertical-align: middle;
        }
        div.relatorio ul.lancamento li {
            width: 113.5px !important;
        }
        div.relatorio ul.resumo li {
            width: 150px !important;
        }
        div.relatorio ul.lancamento li:first-child, div.relatorio ul.resumo li:first-child {
            border-left: none;
        }
        .erro, .hCentralizadoAvisos {
            color: rgb(255,0,0);
        }
        .hCentralizado, .hCentralizadoAvisos, .erro {
            width: auto;
            line-height: 50px;
            text-align: center;
            margin: 0 auto;
        }
        .labelPequeno {
            width: 150px;
            height: 30px;
            padding: 3px;
            display: inline-block;
        }
        span.vertical {
            -webkit-writing-mode: vertical-lr;
            -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        span.comum {
        }
        div.cabecalhoVertical {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin: 0 auto;
            width: 800px;
            height: 220px;
            border: .1px rgb(0,0,0) solid;
        }
        div.cabecalhoVertical div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            border-right: .1px rgb(0,0,0) solid;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
        div.cabecalhoVertical div span {
            text-align: center;
            font-weight: bolder;
        }
  ";

  $html = " 
    <div class='relatorio'> 
        <img src='http://www.wesleyanagceu.com.br/_imgs/gceu.png' /> <h1>Relatório Mensal</h1>  
        <br><br>        
        <div class='cabecalhoVertical'>
            <div style='width:100px;'><span class='comum'   >Nome do Gcéu</span></div>
            <div style='width:100px;'><span class='vertical'>Supervisor</span></div>
            <div style='width:100px;'><span class='comum'   >Líder</span></div>
            <div style='width:050px;'><span class='vertical'>Houve Supervisão</span></div>
            <div style='width:050px;'><span class='vertical'>Houve dia de Jejum</span></div>
            <div style='width:050px;'><span class='vertical'>Houve dia de Evangelismo</span></div>
            <div style='width:050px;'><span class='vertical'>Membros Compromissados</span></div>
            <div style='width:050px;'><span class='vertical'>Visitantes</span></div>
            <div style='width:050px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div>
            <div style='width:050px;'><span class='vertical'>Total de presentes</span></div>
            <div style='width:050px;'><span class='vertical'>Ofertas</span></div>                   
            <div style='width:050px;'><span class='vertical'>Disicpulados</span></div>                  
            <div style='width:050px;'><span class='vertical'>Número de decisões</span></div>                    
        </div>  
        <div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
            <div style='width:100px;'><span class='comum'>Célula 1</span></div>
            <div style='width:100px;'><span class='comum'>Cleonice</span></div>
            <div style='width:100px;'><span class='comum'>Jonas</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>50</span></div>
            <div style='width:050px;'><span class='comum'>10</span></div>
            <div style='width:050px;'><span class='comum'>13</span></div>
            <div style='width:050px;'><span class='comum'>73</span></div>
            <div style='width:050px;'><span class='comum'>22,65</span></div>                    
            <div style='width:050px;'><span class='comum'>2</span></div>                    
            <div style='width:050px;'><span class='comum'>11</span></div>
        </div>           
        <div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
            <div style='width:100px;'><span class='comum'>Celula 2</span></div>
            <div style='width:100px;'><span class='comum'>Carlos</span></div>
            <div style='width:100px;'><span class='comum'>Jonas</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>10</span></div>
            <div style='width:050px;'><span class='comum'>5</span></div>
            <div style='width:050px;'><span class='comum'>3</span></div>
            <div style='width:050px;'><span class='comum'>18</span></div>
            <div style='width:050px;'><span class='comum'>78,39</span></div>                    
            <div style='width:050px;'><span class='comum'>3</span></div>                    
            <div style='width:050px;'><span class='comum'>1</span></div>
        </div>           
        <div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
            <div style='width:100px;'><span class='comum'>Celula TOP</span></div>
            <div style='width:100px;'><span class='comum'>Carlos</span></div>
            <div style='width:100px;'><span class='comum'>Carlos</span></div>
            <div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
        </div>           
        <div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
            <div style='width:100px;'><span class='comum'>Jesuita</span></div>
            <div style='width:100px;'><span class='comum'>Josefina Etelvina</span></div>
            <div style='width:100px;'><span class='comum'>Josefina Etelvina</span></div>
            <div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
        </div>           
        <div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
            <div style='width:100px;'><span class='comum'>Tassito</span></div>
            <div style='width:100px;'><span class='comum'>Carlos</span></div>
            <div style='width:100px;'><span class='comum'>Carlos</span></div>
            <div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
        </div>
    </div>";

    require_once "../_scripts/_php/_configuracoes/erros.php";
    require_once "../vendor/autoload.php";

    $pdf = new \Mpdf\Mpdf(['debug' => true]);
    $pdf->AddPage();
    $pdf->charset_in = "UTF-8";
    $pdf->SetFont('Arial','B',16);
    $pdf->WriteHTML( $css, 1 );
    $pdf->WriteHTML( $html );
    $pdf->Output("relatorio.pdf","D");

?>

Try 2 -> PHP => Using mPDF with CSS inclusion

<?php

  $css = file_get_contents('../_scripts/_css/relatorio.css'); // external css

  $html = " 
    <div class='relatorio'> 
        <img src='http://www.wesleyanagceu.com.br/_imgs/gceu.png' /> <h1>Relatório Mensal</h1>  
        <br><br>        
        <div class='cabecalhoVertical'>
            <div style='width:100px;'><span class='comum'   >Nome do Gcéu</span></div>
            <div style='width:100px;'><span class='vertical'>Supervisor</span></div>
            <div style='width:100px;'><span class='comum'   >Líder</span></div>
            <div style='width:050px;'><span class='vertical'>Houve Supervisão</span></div>
            <div style='width:050px;'><span class='vertical'>Houve dia de Jejum</span></div>
            <div style='width:050px;'><span class='vertical'>Houve dia de Evangelismo</span></div>
            <div style='width:050px;'><span class='vertical'>Membros Compromissados</span></div>
            <div style='width:050px;'><span class='vertical'>Visitantes</span></div>
            <div style='width:050px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div>
            <div style='width:050px;'><span class='vertical'>Total de presentes</span></div>
            <div style='width:050px;'><span class='vertical'>Ofertas</span></div>                   
            <div style='width:050px;'><span class='vertical'>Disicpulados</span></div>                  
            <div style='width:050px;'><span class='vertical'>Número de decisões</span></div>                    
        </div>  
        <div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
            <div style='width:100px;'><span class='comum'>Célula 1</span></div>
            <div style='width:100px;'><span class='comum'>Cleonice</span></div>
            <div style='width:100px;'><span class='comum'>Jonas</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>50</span></div>
            <div style='width:050px;'><span class='comum'>10</span></div>
            <div style='width:050px;'><span class='comum'>13</span></div>
            <div style='width:050px;'><span class='comum'>73</span></div>
            <div style='width:050px;'><span class='comum'>22,65</span></div>                    
            <div style='width:050px;'><span class='comum'>2</span></div>                    
            <div style='width:050px;'><span class='comum'>11</span></div>
        </div>           
        <div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
            <div style='width:100px;'><span class='comum'>Celula 2</span></div>
            <div style='width:100px;'><span class='comum'>Carlos</span></div>
            <div style='width:100px;'><span class='comum'>Jonas</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>Não</span></div>
            <div style='width:050px;'><span class='comum'>10</span></div>
            <div style='width:050px;'><span class='comum'>5</span></div>
            <div style='width:050px;'><span class='comum'>3</span></div>
            <div style='width:050px;'><span class='comum'>18</span></div>
            <div style='width:050px;'><span class='comum'>78,39</span></div>                    
            <div style='width:050px;'><span class='comum'>3</span></div>                    
            <div style='width:050px;'><span class='comum'>1</span></div>
        </div>           
        <div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
            <div style='width:100px;'><span class='comum'>Celula TOP</span></div>
            <div style='width:100px;'><span class='comum'>Carlos</span></div>
            <div style='width:100px;'><span class='comum'>Carlos</span></div>
            <div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
        </div>           
        <div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
            <div style='width:100px;'><span class='comum'>Jesuita</span></div>
            <div style='width:100px;'><span class='comum'>Josefina Etelvina</span></div>
            <div style='width:100px;'><span class='comum'>Josefina Etelvina</span></div>
            <div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
        </div>           
        <div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
            <div style='width:100px;'><span class='comum'>Tassito</span></div>
            <div style='width:100px;'><span class='comum'>Carlos</span></div>
            <div style='width:100px;'><span class='comum'>Carlos</span></div>
            <div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
        </div>
    </div>";

    require_once "../_scripts/_php/_configuracoes/erros.php";
    require_once "../vendor/autoload.php";

    $pdf = new \Mpdf\Mpdf(['debug' => true]);
    $pdf->AddPage();
    $pdf->charset_in = "UTF-8";
    $pdf->SetFont('Arial','B',16);
    $pdf->WriteHTML( $css, 1 );
    $pdf->WriteHTML( $html );
    $pdf->Output("relatorio.pdf","D");

?>

Attempt 3 -> Javascipt => Using JSPDF and canvas2image

(function($){
    $.fn.createPdf = function(parametros) {
        
        var config = {              
            'fileName':'html-to-pdf'
        };
        
        if (parametros){
            $.extend(config, parametros);
        }                            

        var quotes = document.getElementById($(this).attr('id'));

        html2canvas(quotes, {
            onrendered: function(canvas) {
                var pdf = new jsPDF('p', 'pt', 'letter');

                for (var i = 0; i <= quotes.clientHeight/980; i++) {
                    var srcImg  = canvas;
                    var sX      = 0;
                    var sY      = 980*i;
                    var sWidth  = 900;
                    var sHeight = 980;
                    var dX      = 0;
                    var dY      = 0;
                    var dWidth  = 900;
                    var dHeight = 980;

                    window.onePageCanvas = document.createElement("canvas");
                    onePageCanvas.setAttribute('width', 900);
                    onePageCanvas.setAttribute('height', 980);
                    var ctx = onePageCanvas.getContext('2d');
                    ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

                    var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
                    var width         = onePageCanvas.width;
                    var height        = onePageCanvas.clientHeight;

                    if (i > 0) {
                        pdf.addPage(612, 791);
                    }

                    pdf.setPage(i+1);
                    pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));
                }

                pdf.save(config.fileName);
            }
        });
    };
})(jQuery);
 

function createPDF() {
    $('#relatorioPDF').createPdf({
        'fileName' : 'testePDF'
    });
}

@charset "utf-8";
/* CSS Document */

img {
    max-width: 100%;
}
ul {
    list-style: none;
}
div.relatorio {
    width: 95%;
    margin: 0 auto;
}
div.relatorio ul.border {
    border: 1px rgb(0,0,0) solid;
	background-color: black;
}
div.relatorio .centralizado {
    text-align: center !important;
}
div.relatorio .backCinza {
    background-color: rgb(217,217,217);
}
div.relatorio ul.ulInlineBlock li {
    display: inline-block;
}
div.relatorio ul.lancamento li, div.relatorio ul.resumo li {
    height: 100%;
    line-height: 18px;
    font-size: .85em;
    border-left: 1px rgb(0,0,0) solid;
    text-align: center;
    vertical-align: middle;
}
div.relatorio ul.lancamento li {
    width: 113.5px !important;
}
div.relatorio ul.resumo li {
    width: 150px !important;
}
div.relatorio ul.lancamento li:first-child, div.relatorio ul.resumo li:first-child {
    border-left: none;
}
.erro, .hCentralizadoAvisos {
    color: rgb(255,0,0);
}
.hCentralizado, .hCentralizadoAvisos, .erro {
    width: auto;
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
}
.labelPequeno {
    width: 150px;
    height: 30px;
    padding: 3px;
    display: inline-block;
}
span.vertical {
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
span.comum {
}
div.cabecalhoVertical {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    width: 800px;
    height: 220px;
    border: 1px rgb(0,0,0) solid;
}
div.cabecalhoVertical div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-right: 1px rgb(0,0,0) solid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
div.cabecalhoVertical div span {
    text-align: center;
    font-weight: bolder;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>

<div class='relatorio' id='relatorioPDF'>	
	<img src='http://www.wesleyanagceu.com.br/_imgs/gceu.png' /> <h1>Relatório Mensal</h1>	
	<br><br>		
	<div class='cabecalhoVertical'>
		<div style='width:100px;'><span class='comum'   >Nome do Gcéu</span></div>
		<div style='width:100px;'><span class='vertical'>Supervisor</span></div>
		<div style='width:100px;'><span class='comum'   >Líder</span></div>
		<div style='width:050px;'><span class='vertical'>Houve Supervisão</span></div>
		<div style='width:050px;'><span class='vertical'>Houve dia de Jejum</span></div>
		<div style='width:050px;'><span class='vertical'>Houve dia de Evangelismo</span></div>
		<div style='width:050px;'><span class='vertical'>Membros Compromissados</span></div>
		<div style='width:050px;'><span class='vertical'>Visitantes</span></div>
		<div style='width:050px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div>
		<div style='width:050px;'><span class='vertical'>Total de presentes</span></div>
		<div style='width:050px;'><span class='vertical'>Ofertas</span></div>					
		<div style='width:050px;'><span class='vertical'>Disicpulados</span></div>					
		<div style='width:050px;'><span class='vertical'>Número de decisões</span></div>					
	</div>	
	<div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
		<div style='width:100px;'><span class='comum'>Célula 1</span></div>
		<div style='width:100px;'><span class='comum'>Cleonice</span></div>
		<div style='width:100px;'><span class='comum'>Jonas</span></div>
		<div style='width:050px;'><span class='comum'>Não</span></div>
		<div style='width:050px;'><span class='comum'>Não</span></div>
		<div style='width:050px;'><span class='comum'>Não</span></div>
		<div style='width:050px;'><span class='comum'>50</span></div>
		<div style='width:050px;'><span class='comum'>10</span></div>
		<div style='width:050px;'><span class='comum'>13</span></div>
		<div style='width:050px;'><span class='comum'>73</span></div>
		<div style='width:050px;'><span class='comum'>22,65</span></div>					
		<div style='width:050px;'><span class='comum'>2</span></div>					
		<div style='width:050px;'><span class='comum'>11</span></div>
	</div>			 
	<div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
		<div style='width:100px;'><span class='comum'>Celula 2</span></div>
		<div style='width:100px;'><span class='comum'>Carlos</span></div>
		<div style='width:100px;'><span class='comum'>Jonas</span></div>
		<div style='width:050px;'><span class='comum'>Não</span></div>
		<div style='width:050px;'><span class='comum'>Não</span></div>
		<div style='width:050px;'><span class='comum'>Não</span></div>
		<div style='width:050px;'><span class='comum'>10</span></div>
		<div style='width:050px;'><span class='comum'>5</span></div>
		<div style='width:050px;'><span class='comum'>3</span></div>
		<div style='width:050px;'><span class='comum'>18</span></div>
		<div style='width:050px;'><span class='comum'>78,39</span></div>					
		<div style='width:050px;'><span class='comum'>3</span></div>					
		<div style='width:050px;'><span class='comum'>1</span></div>
	</div>			 
	<div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
		<div style='width:100px;'><span class='comum'>Celula TOP</span></div>
		<div style='width:100px;'><span class='comum'>Carlos</span></div>
		<div style='width:100px;'><span class='comum'>Carlos</span></div>
		<div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
	</div>			 
	<div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
		<div style='width:100px;'><span class='comum'>Jesuita</span></div>
		<div style='width:100px;'><span class='comum'>Josefina Etelvina</span></div>
		<div style='width:100px;'><span class='comum'>Josefina Etelvina</span></div>
		<div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
	</div>			 
	<div class='border cabecalhoVertical' style='backgroud-color:none; height: 50px !important;'>
		<div style='width:100px;'><span class='comum'>Tassito</span></div>
		<div style='width:100px;'><span class='comum'>Carlos</span></div>
		<div style='width:100px;'><span class='comum'>Carlos</span></div>
		<div style='width:500px;'><span class='comum'>Não houve Reuniões para esse Gcéu</span></div>
	</div>
</div>

<button type="button" class="btn btn-success" onclick="createPDF();">pdf</button>

Results:

**As it should be : **

Attempts 1 and 2 show the pdf as below : Css does not work Attempt 3 : Part of Css does not work What can be done to solve this?

1 answer

Browser other questions tagged php mpdf jspdf

You are not signed in. Login or sign up in order to post.

by Larissa Tavares Soares • 1 point · Answer 1 · 2019-03-16T16:35:55+00:00

0

I once used the library Phpspreadsheet (old Phpexcel). I would mount the table in excel (which I found much easier) and in the end only convert to PDF:

$writer = new \PhpOffice\PhpSpreadsheet\Writer\Pdf\Mpdf($spreadsheet);
$writer->save("relatorio.pdf");

Take a look at the documentation and see if it fits what you need. But it’s quite complete, you can put image, html, join columns, rows.

installed vi Composer to test but I’m not finding in the documentation add CSS to the HTML that will be PHP-themed. you wouldn’t happen to have an example?

– Carlos Rocha

2019/03/16 at 18:35
It is but it seems that it is only for Excell that he sports

– Carlos Rocha

2019/03/16 at 18:51
https://phpspreadsheet.readthedocs.io/en/latest/topics/reading-and-writing-to-file/#pdf

– Larissa Tavares Soares

2019/03/19 at 01:49
Yes. But it seems that everyone needs the $Spreadsheet variable. This means that I will have to create a . xls before converting to . pdf using for example mPDF? Wouldn’t that make 2 tabs? I didn’t get it very well.

– Carlos Rocha

2019/03/19 at 10:19