how to make animation progress for dompdf Laravel

Question

I am using barryvdh / laravel-dompdf to generate pdf on my website, but while I am generating it I want to show an animation.

this is my progress

My controller:

public function exportpdf($syllabusid){

        $syllabus = Microdiseno::find($syllabusid);
        set_time_limit(300);
        $paper_size = array(0,0,800,1300);

        $pdf = PDF::loadView('syllabus.syllabuscompleto.prubapdf', compact('syllabus'))->setPaper($paper_size);

        return $pdf->download("Syllabus_" . $syllabus->materias->nombre . ".pdf");    
    }

my view:

<div id="contenedor_carga">
        <div id="carga"></div>
    </div>

    <button class="btn btn-info mt-2" type="button" id="botonimprimir"  onclick="location.href='{{route('exportarpdf', $syllabus->id)}}';" value=""><span data-feather="printer"></span> Imprimir Syllabus</a></button>

my js:

var timeout;
        function loaded() {
            var contenedor = document.getElementById('contenedor_carga');
            contenedor.style.visibility = 'hidden';
            contenedor.style.opacity = '0';
        }

        $('#botonimprimir').click(startLoad);

        function startLoad() {
            console.log("entre!");
            var contenedor = document.getElementById('contenedor_carga');
            contenedor.style.visibility = 'visible';
            contenedor.style.opacity = '1';


        clearTimeout(timeout);
        timeout = setTimeout(loaded, 2000);
        }

my css

 #contenedor_carga{
    background-color: rgba(255, 255, 255, 0.9);
    height: 100%;
    width: 100%;
    position: fixed;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 10000;
  }

my problem is that the animation is only for 2 seconds, but it should be the time it takes to generate the pdf

Answer 1

You should be doing this with ajax, because you don't really know how much time it will take the server to generate the PDF file.

HTML:

<button class="btn btn-info mt-2" type="button" data-id="{{ $syllabus->id }}" id="botonimprimir"><span data-feather="printer"></span> Imprimir Syllabus</button>

I would change the route named exportarpdf to a post route, instead of get .

JS (using jQuery):

//Make sure that the following line is inside the blade.php file:

var ruta_pdf = "{{ route('exportarpdf') }}";

//The rest of the javascript code can be inside a `js` file:

$(document).ready(function(){
   iniciarEventos();

});

function iniciarEventos(){
   $('#botonimprimir').on('click', function(e){
      enviarPeticion(this);
   });
}
function enviarPeticion(elemento){
   var id = $(elemento).data('id');
   $.ajax({
        type: 'post',
        url: ruta_pdf,
        dataType: 'json',
        data:  {id: id},
        beforeSend: function(){
            var contenedor = document.getElementById('contenedor_carga');
            contenedor.style.visibility = 'visible';
            contenedor.style.opacity = '1';

        }
    }).done(function(response){
        var contenedor = document.getElementById('contenedor_carga');
        contenedor.style.visibility = 'hidden';
        contenedor.style.opacity = '0';

       window.location.replace(response.ruta);


    }).fail(function(xhr, textStatus, errorThrown){
        var contenedor = document.getElementById('contenedor_carga');
        contenedor.style.visibility = 'hidden';
        contenedor.style.opacity = '0';

    });
}

Controller method:

public function exportpdf($syllabusid){

        $syllabus = Microdiseno::find($syllabusid);
        set_time_limit(300);
        $paper_size = array(0,0,800,1300);

        $pdf = PDF::loadView('syllabus.syllabuscompleto.prubapdf', compact('syllabus'))->setPaper($paper_size);

        //you would need to save the pdf here inside a folder, I will use public folder just for this example:
        $pdf->render(); 
        $output = $pdf->output();
        file_put_contents(public_path('pdf/your-file.pdf'), $output);

        //Now you need to return the path from your just created PDF:

        $ruta = asset('pdf/your-file.pdf');

        $response = array();
        $response['ruta'] = $ruta; 
        return response()->json($response);

    }

The next piece of code will redirect to the created path with javascript: window.location.replace(response.ruta) , since this is a PDF file, if the browser has support for rendering it, it will show the file, if it does not have support, the download will be forced. If you NEED to FORCE the download always, I will leave to you the rest, you don't need to add too much code in order to force the download.

Answer 2

try this its a great script i coded for a loading bar sure you can use it i added comments if you need you can easly launch it with php just google how

 //hide it to start hide(); //show and set the timeout function start (){ hide(); qr(); //so they cant spam it remove if u arent wanting this document.getElementById('start').style.display = "none"; } //so we can start it function done(){ console.log('done (;') hide(); } //so we can hide and show it function hide() { var x = document.getElementById("loader"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } //so that this dosn't show on end function qr (){ setTimeout("done()", 7000); }

 .progress { position: relative; height: 4px; display: block; width: 100%; background-color: #acece6; border-radius: 2px; background-clip: padding-box; margin: 0.5rem 0 1rem 0; overflow: hidden; } .progress .determinate { position: absolute; background-color: inherit; top: 0; bottom: 0; background-color: #26a69a; transition: width .3s linear; } .progress .indeterminate { background-color: #26a69a; } .progress .indeterminate:before { content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .progress .indeterminate:after { content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; -webkit-animation-delay: 1.15s; animation-delay: 1.15s; } @-webkit-keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @-webkit-keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } @keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } }

 <main id = 'loader'> <h3>Please Wait...</h3> <div class="progress"> <div class="indeterminate"></div> </div> </main> <button id='start'onclick="javascript:start();">start</button>