[如何制作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

尝试一下它是一个很棒的脚本，我为加载栏编码，请确保您可以使用它。如果需要，可以添加注释，可以用php轻松启动它，只是google如何

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