Javascript 如何为dompdf Laravel制作动画进度

我正在使用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>

我的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所需的时间。您应该使用ajax来执行此操作，因为您不知道服务器生成pdf文件需要多少时间

HTML:

控制器方法：

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文件，如果浏览器支持呈现它，它将显示该文件，如果它不支持，将强制下载。如果您总是需要强制下载，我将把其余的留给您，您不需要添加太多代码来强制下载。

试试这个 这是一个很棒的脚本，我为一个加载条编写了代码，确保你可以使用它。如果你需要，我添加了注释。你可以轻松地用php启动它，只要谷歌怎么做

//隐藏它以启动
隐藏（）；
//显示并设置超时
函数启动（）{
隐藏（）；
qr（）；
//因此，如果你不想要这个，他们就不能将其删除
document.getElementById（'start'）.style.display=“无”；
}
//这样我们就可以开始了
函数完成（）{
console.log（'done（；'））
隐藏（）；
}
//所以我们可以隐藏和显示它
函数hide（）{
var x=document.getElementById（“加载器”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}
//这样就不会在最后出现
函数qr（）{
setTimeout（“done（）”，7000）；
}

。进度{
位置：相对位置；
高度：4px；
显示：块；
宽度：100%；
背景色：#acece6；
边界半径：2px；
背景剪辑：填充框；
保证金：0.5雷姆0.1雷姆0；
溢出：隐藏；}
.进展.确定{
位置：绝对位置；
背景色：继承；
排名：0；
底部：0；
背景色：#26a69a；
过渡：宽度.3s线性；}
.进展.不确定{
背景色：#26a69a；}
.进度。不确定：之前{
内容：''；
位置：绝对位置；
背景色：继承；
排名：0；
左：0；
底部：0；
将改变：左，右；
-webkit动画：不确定的2.1s立方贝塞尔（0.65,0.815,0.735,0.395）无限；
动画：不确定的2.1s三次贝塞尔（0.65,0.815,0.735,0.395）无限；}
.进度。不确定：之后{
内容：''；
位置：绝对位置；
背景色：继承；
排名：0；
左：0；
底部：0；
将改变：左，右；
-webkit动画：不确定短2.1s立方贝塞尔（0.165,0.84,0.44,1）无限；
动画：不确定短2.1s立方贝塞尔（0.165,0.84,0.44,1）无限；
-webkit动画延迟：1.15s；
动画延迟：1.15s；}
@-webkit关键帧不确定{
0% {
左-35%；
右：100%；}
60% {
左：100%；
右：-90%；}
100% {
左：100%；
右：-90%；}
@关键帧不确定{
0% {
左-35%；
右：100%；}
60% {
左：100%；
右：-90%；}
100% {
左：100%；
右：-90%；}
@-webkit关键帧不确定短{
0% {
左-200%；
右：100%；}
60% {
左：107%；
右：-8%；}
100% {
左：107%；
右：-8%；}
@关键帧不确定短{
0% {
左-200%；
右：100%；}
60% {
左：107%；
右：-8%；}
100% {
左：107%；
右：-8%；}}

请稍候。。。
开始

您好，谢谢您的回答，我尝试了您的解决方案，但出现了500个错误

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

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

    }