Javascript 触发器PDF下载PHP-Laravel 7

我有一个简单的报告页面，我正在使用

laravel7

构建它

我想触发自动下载带有该视图的PDF

我应该研究的最轻的重量是什么？ 我在谷歌上快速搜索了一下，看到了很多选择

我决定尝试并完成所有步骤，下面是我的最终代码

最终代码 注意这一行：

$pdf=pdf:：loadView（'layouts.be.baby.report'，get_defined_vars（））

公共函数下载报告pdf（$id）{
$code=Request:：get（'code'）；
$baby=baby:：where（'adminCode'，$code）->where（'id'，strtolower（$id））
->或者where（'readOnlyCode'，$code）->where（'id'，strtolower（$id））
->第一个（）；
如果（$婴儿）{
$inputs=Request:：all（）；
$interval='week'；
如果（数组键存在（'interval'，$inputs））{
$interval=$inputs['interval']；
}
交换机（$间隔）{
案件日期：
$q=BabyLog:：where（'created_at'，'>'，now（）->today（））；
打破
“一周”案例：
$q=BabyLog:：where（'created_at'，'>'，now（）->subWeek（））；
打破
个案‘月份’：
$q=BabyLog:：where（'created_at'，'>'，now（）->subMonth（））；
打破
案件‘年份’：
$q=BabyLog:：where（'created_at'，'>'，now（）->subYear（））；
打破
违约：
$q=BabyLog:：orderBy（'created_at'，'desc'）；
打破
}
$logs=$q->where（'babyId'，$baby->id）->orderBy（'created_at'，'desc'）->get（）->groupBy（函数（$log）{
返回$log->created_at->format（'m/d/y'）；
});
//dd（原木）；
$graphData=[]；
foreach（$date=>$logsOnThatDay作为日志记录）{
$pee=0；
$poop=0；
$feed=0；
$medicine=0；
$sleep=0；
foreach（$logsOnThatDay作为$logOnThatDay）{
//如果（strotime（$logonthattay->created_at）type=='pee'）{
$pee++；
}
如果（$logontatday->type=='poop'）{
$poop++；
}
如果（$logOnThatDay->type=='feed'）{
$feed++；
}
如果（$logontatday->type=='medicine'）{
$medicine++；
}
如果（$logOnThatDay->type=='sleep'）{
$sleep++；
}
$graphData[$date]['pee']=$pee；
$graphData[$date]['poop']=$poop；
$graphData[$date]['feed']=$feed；
$graphData[$date]['medicine']=$medicine；
$graphData[$date]['sleep']=$sleep；
}
}
数组_pop（$graphData）；
//PDF
$pdf=pdf:：loadView（'layouts.be.baby.report'，get_defined_vars（））；
返回$pdf->download（'file.pdf'）；
}
}

当我访问路线时，它正在工作：

路由：：get（'/baby/{id}/report/download'，'BabyController@downloadReportPDF"),

但风格似乎很混乱


图像丢失，等等


我该如何改进呢


更新
我已经更新了我的图片链接到远程url…他们现在加载


不知怎的，风格还是一团糟

我甚至尝试了填充的内联样式，但仍然呈现错误…：(

report.blade.php

报告
身体{
背景色：白色；
颜色：黑色；
}
h5{
字体大小：正常；
颜色：#868b；
}
.文本便便{
边框：#ffb54c 1px实心！重要；
颜色：#ffb54c；
}
.text pee{
边框：#46b8da 1px实心！重要；
颜色：#46b8da；
}
.text医学{
边框：#ffdf0a 1px实心！重要；
颜色：#ffdf0a；
}
.text sleep{
边框：#ca88ff 1px实心！重要；
颜色：#ca88ff；
}
.text feed{
边框：黑色1px实心！重要；
颜色：黑色；
}
{{$baby->babyName}

间隔：{{$Interval}}ly。
今天：{date（'dfj，Y，g:ia'）}
家长：{{$baby->name}}（{{$baby->email}）
URL:{{env（'APP_URL'）}/baby/{{$baby->id}}/report？code={{{$baby->readOnlyCode}


日期
以前
@foreach（$graphData作为$date=>$graph）
{{$date}
{{DateHelper:：ago（$date）}}ago。
{{$graph['poop']？？''}
{{$graph['pee']？？''}
{{$graph['feed']？？''}
{{$graph['medicine']？？''}
{{$graph['sleep']？？'}
@endforeach
public function downloadReportPDF($id) {


    $code = Request::get('code'); 
    $baby = Baby::where('adminCode',$code)->where('id',strtolower($id))
    ->orWhere('readOnlyCode',$code)->where('id',strtolower($id))
    ->first();
    
    if($baby){


        $inputs    = Request::all();
        $interval  = 'week';

        if(array_key_exists('interval', $inputs)){
            $interval  = $inputs['interval'];
        }

        switch ($interval) {
            case 'day':
            $q = BabyLog::where('created_at', '>', now()->today());
            break;
            case 'week':
            $q = BabyLog::where('created_at', '>', now()->subWeek());
            break;
            case 'month':
            $q = BabyLog::where('created_at', '>', now()->subMonth());
            break;
            case 'year':
            $q = BabyLog::where('created_at', '>', now()->subYear());
            break;
            default:
            $q = BabyLog::orderBy('created_at', 'desc');
            break;
        }


        $logs = $q->where('babyId',$baby->id)->orderBy('created_at', 'desc')->get()->groupBy(function ($log) {
            return $log->created_at->format('m/d/y');
        });


        // dd($logs);

        $graphData = [];

        foreach($logs as $date => $logsOnThatDay){


            $pee      = 0;
            $poop     = 0;
            $feed     = 0;
            $medicine = 0;
            $sleep    = 0;


            foreach($logsOnThatDay as $logOnThatDay){

                // if(strtotime($logOnThatDay->created_at) < strtotime(date('Y-m-d H:i:s'))){

                if($logOnThatDay->type == 'pee'){
                    $pee++;
                }

                if($logOnThatDay->type == 'poop'){
                    $poop++;
                }

                if($logOnThatDay->type == 'feed'){
                    $feed++;
                }

                if($logOnThatDay->type == 'medicine'){
                    $medicine++;
                }

                if($logOnThatDay->type == 'sleep'){
                    $sleep++;
                }


                $graphData[$date]['pee']      = $pee;
                $graphData[$date]['poop']     = $poop;
                $graphData[$date]['feed']     = $feed;
                $graphData[$date]['medicine'] = $medicine;
                $graphData[$date]['sleep']    = $sleep;

            }
        }


        array_pop($graphData);

        //PDF 
        $pdf = PDF::loadView('layouts.be.baby.report', get_defined_vars());

        return $pdf->download('file.pdf');
    }


}

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Bunlong Heng">
    <meta name="csrf-token" value="{{ csrf_token() }}">

    <title>Report</title>

    <link id="favicon" rel="shortcut icon" href="{{$baby->babyProfilePath}}?q={{microtime()}}" type="image/x-icon" />
    <link rel="shortcut icon" href="{{$baby->babyProfilePath}}?q={{microtime()}}" type="image/favicon.ico" />
    <link rel="apple-touch-icon" href="{{$baby->babyProfilePath}}?q={{microtime()}}" sizes="152x152">


    <link  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <style type="text/css">

        body {
            background-color: white; 
            color: black;

        }

        h5 {
            font-weight: normal;
            color: #86868b;
        }

    
        .text-poop {
            border: #ffb54c 1px solid !important;  
            color: #ffb54c; 
        }

        .text-pee { 
            border: #46b8da 1px solid !important;  
            color: #46b8da;
        }

        .text-medicine { 
            border: #ffdf0a 1px solid !important;  
            color: #ffdf0a;
        }

        .text-sleep { 
            border: #ca88ff 1px solid !important;  
            color:  #ca88ff;
        }

        .text-feed { 
            border: black 1px solid !important;  
            color:  black;

        }



    </style>


</head>


<body>

    <div class="container ">
        <div class="row ">

            <div class="col-sm-2 "></div>
            <div class="col-sm-8">


                <h1>{{ $baby->babyName }}</h1>

                <hr>

                <h5> Interval : {{ $interval }}ly. </h5>
                <h5> Today : {{ date('D F j, Y, g:i a') }}</h5>
                <h5> Parents : {{ $baby->name }} ({{ $baby->email }})</h5>
                <h5> URL : {{ env('APP_URL') }}/baby/{{ $baby->id }}/report?code={{ $baby->readOnlyCode }}</h5>

                <hr>

                <canvas id="canvas"></canvas>

                <hr>

                <table class="table skill-table">
                    <thead class="thin-border-bottom">
                        <th>date</th>
                        <th>Ago</th>
                        <th><img src="https://i.imgur.com/Xhg4Iwi.png" /> </th>
                        <th><img src="https://i.imgur.com/peU9Bas.png" /> </th>
                        <th><img src="https://i.imgur.com/Y3rrj9T.png" /> </th>
                        <th><img src="https://i.imgur.com/zQrE1o5.png" /> </th>
                        <th><img src="https://i.imgur.com/yCk62aM.png" /> </th>
                    </thead>

                    <tbody>


                        @foreach ($graphData as $date => $graph)

                        <tr>

                            <td >
                                {{$date}}
                            </td>
                            <td>{{ DateHelper::ago($date) }} ago.</td>

                            <td >
                                <a style="padding: 5px; " class="text-poop">{{$graph['poop'] ?? '' }}</a>
                            </td>

                            <td >
                                <a style="padding: 5px; " class="text-pee">{{$graph['pee'] ?? '' }}</a>
                            </td>

                            <td >
                                <a style="padding: 5px; " class="text-feed">{{$graph['feed'] ?? '' }}</a>
                            </td>

                            <td >
                                <a style="padding: 5px; " class="text-medicine">{{$graph['medicine'] ?? '' }}</a>
                            </td>

                            <td >
                                <a style="padding: 5px; " class="text-sleep">{{$graph['sleep'] ?? '' }}</a>
                            </td>

                        </tr>

                        @endforeach

                    </div>
                </div>
            </div>


            <script type="text/javascript">


                function hexToRgb(hex, opacity=1) {

                    var h=hex.replace('#', '');
                    h =  h.match(new RegExp('(.{'+h.length/3+'})', 'g'));

                    for(var i=0; i<h.length; i++)
                        h[i] = parseInt(h[i].length==1? h[i]+h[i]:h[i], 16);

                    if (typeof opacity != 'undefined')  h.push(opacity);

                    return 'rgba('+h.join(',')+')';

                }



                var url_string    = window.location.href;
                var url           = new URL(url_string);




                var data  = {};
                if(url.searchParams.get("interval") != null){
                    data.interval = url.searchParams.get("interval");
                }

                // console.log(data.interval);  

                $.ajax({
                    method: 'POST',
                    url: '/baby/{{$id}}/graphsData',
                    crossDomain: true,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
                        "Accept": "application/json",
                        "Content-Type": "application/x-www-form-urlencoded",
                        "Cache-Control": "no-cache"
                    },
                    data: data,
                    success: function(response){
                        // console.log(response);


                        keys = [];
                        
                        peeData      = [];
                        poopData     = [];
                        feedData     = [];
                        medicineData = [];
                        sleepData    = [];

                        $.each(response, function(key,val) {

                            keys.push(key);

                            peeData.push(val.pee);
                            poopData.push(val.poop);
                            feedData.push(val.feed);
                            medicineData.push(val.medicine);
                            sleepData.push(val.sleep);


                        });



                        // console.log(peeData, poopData, feedData, medicineData, sleepData);


                        var originalLineDraw = Chart.controllers.line.prototype.draw;
                        Chart.helpers.extend(Chart.controllers.line.prototype, {
                            draw: function() {
                                originalLineDraw.apply(this, arguments);

                                var chart = this.chart;
                                var ctx = chart.chart.ctx;

                                var index = chart.config.data.lineAtIndex;
                                if (index) {
                                    var xaxis = chart.scales['x-axis-0'];
                                    var yaxis = chart.scales['y-axis-0'];

                                    ctx.save();
                                    ctx.beginPath();
                                    ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
                                    ctx.strokeStyle = '#ff0000';
                                    ctx.textAlign = '#ff0000';
                                    ctx.fillText('NOW',0,0);
                                    ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
                                    ctx.stroke();
                                    ctx.restore();
                                }
                            }
                        });

                        var options = {  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
                        var fullDayText = new Date().toLocaleTimeString('en-us', options);


                        var chartColors = [hexToRgb('#fff',1), hexToRgb("ccc",1)];

                        let canvas = document.getElementById('canvas').getContext('2d');
                        canvas.height = 2000;


                        var renderChart = function() {

                            new Chart(canvas, {
                                type:'bar', 
                                data:{
                                    labels: keys,
                                    datasets:[
                                    {
                                        label: 'poop',
                                        data: poopData,
                                        backgroundColor: hexToRgb('#ffb54c',.5),
                                        borderWidth:1,
                                        borderColor: hexToRgb('#ffb54c',1),
                                        hoverBorderWidth:3,
                                    },
                                    {
                                        label: 'pee',
                                        data: peeData,
                                        backgroundColor: hexToRgb('#46b8da',.5),
                                        borderWidth:1,
                                        borderColor: hexToRgb('#46b8da',1),
                                        hoverBorderWidth:3,
                                    },
                                    {
                                        label: 'feed',
                                        data: feedData,
                                        backgroundColor: hexToRgb('#fff',.5),
                                        borderWidth:1,
                                        borderColor: hexToRgb('#ccc',1),
                                        hoverBorderWidth:3,
                                    },
                                    {
                                        label: 'medecine',
                                        data: medicineData,
                                        backgroundColor: hexToRgb('#ffdf0a',.5),
                                        borderWidth:1,
                                        borderColor: hexToRgb('#ffdf0a',1),
                                        hoverBorderWidth:3,
                                    },
                                    {
                                        label: 'sleep',
                                        data: sleepData,
                                        backgroundColor: hexToRgb('#ca88ff',.5),
                                        borderWidth:1,
                                        borderColor: hexToRgb('#ca88ff',1),
                                        hoverBorderWidth:3,
                                    }
                                    ],
                                    lineAtIndex: new Date().getHours()
                                },
                                options:{
                                    legend:{
                                        display:true,
                                        position:'right',
                                        labels:{
                                            fontColor:'#000'
                                        }
                                    }
                                }


                            });

                        };

                        renderChart();
                        setTimeout(renderChart(), 1000);



                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(JSON.stringify(jqXHR));
                        console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
                    }
                });


            </script>




        </body>
        </html>