как сделать анимацию прогресса для dompdf Laravel - PullRequest
Новая
       6

как сделать анимацию прогресса для dompdf Laravel

0 голосов
/ 28 января 2020

Я использую barryvdh / laravel -dompdf для создания PDF на моем сайте, но пока я его генерирую, я хочу показать анимацию.

это мой прогресс

Мой контроллер: 

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");    
    }

мой взгляд: 

<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>

мой 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);
        }

мой 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;
  }

моя проблема в том, что анимация длится всего 2 секунды, но это должно быть время, необходимое для генерации pdf

Ответы [ 2 ]

0 голосов
/ 28 января 2020

попробуйте это отличный скрипт, который я написал для панели загрузки, вы можете использовать его, я добавил комментарии, если вам нужно, вы можете легко запустить его с помощью php просто 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>
0 голосов
/ 28 января 2020

Вы должны сделать это с ajax, потому что вы действительно не знаете, сколько времени потребуется серверу для создания PDF-файла.

HTML: 

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

Я бы изменил маршрут с именем exportarpdf на маршрут post вместо get.

JS (используя 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';

    });
}

Метод контроллера: 

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

    }

Следующий фрагмент кода будет перенаправлен на созданный путь с помощью javascript: window.location.replace(response.ruta), так как это файл PDF, если браузер поддерживает его рендеринг, он будет покажите файл, если он не имеет поддержки, загрузка будет принудительной. Если вам НУЖНО форсировать загрузку всегда, я оставлю вам остальное, вам не нужно добавлять слишком много кода, чтобы форсировать загрузку.

...