如何为 dompdf Laravel 制作动画进度

Question

我正在使用 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所需的时间

Answer 1

您应该使用 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文件，如果浏览器支持渲染它，它将显示该文件，如果它不支持，将强制下载。如果你需要一直强制下载，剩下的交给你，你不需要添加太多代码来强制下载。

Answer 2

试试这个 它是一个很棒的脚本我为加载栏编写了确保你可以使用它我添加了 cmets 如果你需要你可以很容易地用 php 启动它只是谷歌如何

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