stackoom
  简体   繁体   中英

How to design html page before converting to pdf?

 原文  2019-06-18 08:36:39  5   1    javascript/ laravel/ dompdf

Question

I was using "thujohn/pdf": "dev-master" with Laravel 4.2. I migrated my site to Laravel 5.7 so I had to abandon that package and installed "barryvdh/laravel-dompdf": "^0.8.4" .I had this blade view that was converted to pdf. The code of the view is the same but when I download the pdf file the design of the page is not the same and everything is messed up. I want to change the CSS of the view that is converted to pdf like a normal web page is there a way to do this? 

$pdf =  PDF::loadView('pdf.statistique',$data);
return $pdf->download('statistique.pdf');


 <!DOCTYPE html> <html lang="fr-FR"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Association Amis des oiseaux"> <style type="text/css"> body{ position: relative; background: #fff; height: 100%; border: 1px solid #0063a8; } .header{ height: 70px; margin-bottom: 7px; border-bottom: 1px solid #0063a8; } .header .logo{ width: 285px; display: inline-block; } .header .logo img{ height: 65px; } .header .rapport{ position: absolute; top: -8px; left: 480px; width: 300px; } .header .rapport h2{ color: #0163A8; font-size: 24px; } .header .rapport h2 span{ font-size: 16px; } .panel-body{ color: #777; } .panel-body .panel-content{ padding: 10px; } .panel-body .panel-content h3{ margin: 0; padding: 0; } .panel-body .panel-content h3.content-title { font-size: 14px; padding: 7px 10px; margin-bottom: 13px; border-bottom: 1px solid #777; background: #dee6ec; } .panel-body .panel-content h3.content-title span{ font-size: 12px; } .type-infraction .categ_stat_img{ width: 24.5%; display: inline-block; position: relative; text-align: center; } .type-infraction .categ_stat_img img{ width: 100px; margin-top: 0; } .type-infraction .categ_stat_img h4{ font-size: 14px; text-align: center; margin: 8px 0; } p.panel-content-result{ text-align: center; margin: 20px; } table { width: 100%; } table thead{ border-bottom: 2px solid #ddd; } table tbody{ text-align: center; } table tbody tr th{ font-size: 15px; padding: 0; } table tbody tr td{ border-top: 1px solid #ddd; padding: 3px 0; font-size: 14px; } .governorate{ position: relative !important; width: 100%; height: 150px; border-bottom: 1px solid #777; border-left: 1px solid #777; margin-bottom: 20px; } .governorate ul{ position: relative !important; margin: 0; height: 100%; } .governorate ul li{ margin: 0 5px; list-style: none; display: inline-block; width: 20px; background: #1faaea; position: absolute; bottom: 716px; text-align: center; } .governorate ul li span{ color: #fff; font-size: 10px; } .governorate ul li p{ color: #777; position: absolute; bottom: 615px; transform: rotate(-60deg); margin: 0; width: 100px; left: -50px; font-size: 12px; text-align: right; } .governorate ul li:nth-child(1){ left: 10px; } .governorate ul li:nth-child(2){ left: 38px; } .governorate ul li:nth-child(3){ left: 66px; } .governorate ul li:nth-child(4){ left: 94px; } .governorate ul li:nth-child(5){ left: 122px; } .governorate ul li:nth-child(6){ left: 150px; } .governorate ul li:nth-child(7){ left: 178px; } .governorate ul li:nth-child(8){ left: 206px; } .governorate ul li:nth-child(9){ left: 234px; } .governorate ul li:nth-child(10){ left: 262px; } .governorate ul li:nth-child(11){ left: 290px; } .governorate ul li:nth-child(12){ left: 318px; } .governorate ul li:nth-child(13){ left: 346px; } .governorate ul li:nth-child(14){ left: 374px; } .governorate ul li:nth-child(15){ left: 402px; } .governorate ul li:nth-child(16){ left: 430px; } .governorate ul li:nth-child(17){ left: 458px; } .governorate ul li:nth-child(18){ left: 486px; } .governorate ul li:nth-child(19){ left: 514px; } .governorate ul li:nth-child(20){ left: 542px; } .governorate ul li:nth-child(21){ left: 570px; } .governorate ul li:nth-child(22){ left: 598px; } .governorate ul li:nth-child(23){ left: 626px; } .governorate ul li:nth-child(24){ left: 654px; } .groupe-espece{ position: relative !important; width: 100%; height: 150px; border-bottom: 1px solid #777; border-left: 1px solid #777; margin-bottom: 10px; } .groupe-espece ul{ position: relative !important; margin: 0; height: 100%; } .groupe-espece ul li{ margin: 0 5px; list-style: none; display: inline-block; width: 60px; position: absolute; bottom: 463px; text-align: center; } .groupe-espece ul li span{ color: #fff; font-size: 14px; } .groupe-espece ul li:nth-child(1){ left: 30px; background: #434448; } .groupe-espece ul li:nth-child(2){ left: 130px; background: #81b4e1; } .groupe-espece ul li:nth-child(3){ left: 230px; background: #9cce79; } .groupe-espece ul li:nth-child(4){ left: 330px; background: #f8a45b; } .groupe-espece-liste{ position: absolute; left: 450px; bottom: 468px; } .groupe-espece-liste ul li{ margin: 8px 0; list-style: none; } .groupe-espece-liste ul li span{ width: 10px; height: 10px; line-height: 10px; position: relative; display: inline-block; margin-right: 10px; margin-top: 5px; } .groupe-espece-liste ul li:nth-child(1) span{ background: #434448; } .groupe-espece-liste ul li:nth-child(2) span{ background: #81b4e1; } .groupe-espece-liste ul li:nth-child(3) span{ background: #9cce79; } .groupe-espece-liste ul li:nth-child(4) span{ background: #f8a45b; } .footer{ color: #777; position: absolute; bottom: 0; padding: 10px; margin: 0 5px 3px 5px; background: #DEE6EC; width: 100%; height: 60px; } .footer .footer-left{ width: 50%; display: inline-block; } .footer p{ margin: 0; font-size: 12px; font-weight: 300; } .footer .footer-right{ width: 50%; display: inline-block; } .footer .footer-right p{ text-align: right; padding-right: 2px; margin-top: 15px; } /*.bg-dark { border-bottom: 1px solid #0063a8; color: #fff; overflow: hidden; position: relative; width: 100%; background-image: url('../images/header/list-reserves.jpg'); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center; } .bg-dark:after{ content: ''; background-color: rgba(0, 0, 0, 0.5); height: 100%; position: absolute; width: 100%; top: 0; } .bg-dark .wpb_wrapper{ z-index: 9; position: relative; } .spacing { margin: 30px 0; } .white-title h2 { font-size: 25px; color: #fff; margin-bottom: 20px; font-weight: 400; } .black-title h2 { font-size: 25px; color: #222222; margin-bottom: 30px; font-weight: 300; }*/ </style> <title>Rapport statistique</title> </head> <body> <div class="panel-body"> <div class="panel-content"> <div class="header"> <div class="logo"> <img src="assets/images/logo/three-logos.png"> </div> <div class="rapport"> <h2> Rapport statistique<br> @if($date_from != '') <span>(Du {{ date("d/m/Y", strtotime($date_from)) }}</span> @else <span>(Du {{ date("d/m/Y", strtotime(App\\Http\\Controllers\\ClaimController::getFirstClaim()->created_at)) }}</span> @endif @if($date_to != '') <span>au {{ date("d/m/Y", strtotime($date_to)) }})</span> @else <span>au {{ date("d/m/Y") }})</span> @endif </h2> </div> </div> {{-- <section class="section bg-dark"> <div class=""> <div class="wpb_wrapper"> <div class="white-title text-center"> <h2>Le statut des réclamations en temps réel</h2> </div> <div class="row align-vertical"> <div class="col-md-4 col-sm-4 col-xs-4 spacing text-center"> <div class="service-container wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms"> <div class="stat parallaxe bg-1"> <span>{{ App\\Http\\Controllers\\ClaimController::getCountEtatClaim('Résolue') }}</span> </div> <div class="service-body"> <div class="service-title"> <h2>Réclamations résolues</h2> </div> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 spacing text-center"> <div class="service-container wow fadeInDown" data-wow-delay="0ms" data-wow-duration="1500ms"> <div class="stat parallaxe bg-2"> <span>{{ App\\Http\\Controllers\\ClaimController::getCountEtatClaim('Non résolue') }}</span> </div> <div class="service-body"> <div class="service-title"> <h2>Réclamations non résolues</h2> </div> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4 spacing text-center"> <div class="service-container wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1500ms"> <div class="stat parallaxe bg-3"> <span>{{ App\\Http\\Controllers\\ClaimController::getCountEtatClaim('En cours de traitement') }}</span> </div> <div class="service-body"> <div class="service-title"> <h2>Réclamations en cours</h2> </div> </div> </div> </div> </div> </div> </div> </section> --}} <p>{{App\\Http\\Controllers\\CompanyController::getcompany()->introduction}}</p> <h3 class="content-title"> Nombre d'infractions par gouvernorat @if($group_oiseau != 'all' || $type_infraction != 'all') <span>(</span> @endif @if($group_oiseau != 'all') <span>Groupe: {{ $group_oiseau }}</span> @endif @if($group_oiseau != 'all' && $type_infraction != 'all') <span> / </span> @endif @if($type_infraction == 'cas01') <span>Catégorie: Braconnage</span> @elseif($type_infraction == 'cas02') <span>Catégorie: Commerce illégal</span> @elseif($type_infraction == 'cas03') <span>Catégorie: Détention illégale</span> @elseif($type_infraction == 'cas04') <span>Catégorie: Autres cas de mortalité</span> @endif @if($group_oiseau != 'all' || $type_infraction != 'all') <span>)</span> @endif </h3> @if($max_gov > 0) <div class="governorate"> <ul> @foreach($govs as $gov) <li style="height: {{ ((App\\Http\\Controllers\\StatistiqueController::getClaimFromCountry($gov->id,$date_from,$date_to,$group_oiseau,$type_infraction,$espece)*100)/$max_gov)*1.5 }}px;"> <span>{{ App\\Http\\Controllers\\StatistiqueController::getClaimFromCountry($gov->id,$date_from,$date_to,$group_oiseau,$type_infraction,$espece) }}</span> <p>{{ $gov->title_fr }}</p> </li> @endforeach() </ul> </div> <div style="height: 48px;"></div> @else <p class="panel-content-result">Pas de résultat pour cette section</p> @endif <h3 class="content-title"> Nombre d'infractions par groupe d'espèces @if($governorat_id != 'all' || $type_infraction != 'all') <span>(</span> @endif @if($governorat_id != 'all') <span>Gouvernorat: {{ App\\Http\\Controllers\\StatistiqueController::getGovId($governorat_id)->title_fr }}</span> @endif @if($governorat_id != 'all' && $type_infraction != 'all') <span> / </span> @endif @if($type_infraction == 'cas01') <span>Catégorie: Braconnage</span> @elseif($type_infraction == 'cas02') <span>Catégorie: Commerce illégal</span> @elseif($type_infraction == 'cas03') <span>Catégorie: Détention illégale</span> @elseif($type_infraction == 'cas04') <span>Catégorie: Autres cas de mortalité</span> @endif @if($governorat_id != 'all' || $type_infraction != 'all') <span>)</span> @endif </h3> @if($max_group > 0) <div class="groupe-espece"> <ul> <li style="height: {{ (($rapace*100)/$max_group)*1.5 }}px;"><span>{{ round($rapace*100/$all_cas,1) }} %</span></li> <li style="height: {{ (($passereaux*100)/$max_group)*1.5 }}px;"><span>{{ round($passereaux*100/$all_cas,1) }} %</span></li> <li style="height: {{ (($oiseaux_eau*100)/$max_group)*1.5 }}px;"><span>{{ round($oiseaux_eau*100/$all_cas,1) }} %</span></li> <li style="height: {{ (($group_other*100)/$max_group)*1.5 }}px;"><span>{{ round($group_other*100/$all_cas,1) }} %</span></li> </ul> </div> <div class="groupe-espece-liste"> <ul> <li><span></span>Rapaces</li> <li><span></span>Passereaux</li> <li><span></span>Oiseau d'eau</li> <li><span></span>Autres</li> </ul> </div> @else <p class="panel-content-result">Pas de résultat pour cette section</p> @endif <h3 class="content-title"> Nombre d'infractions par catégorie @if($governorat_id != 'all' || $group_oiseau != 'all') <span>(</span> @endif @if($governorat_id != 'all') <span>Gouvernorat: {{ App\\Http\\Controllers\\StatistiqueController::getGovId($governorat_id)->title_fr }}</span> @endif @if($governorat_id != 'all' && $group_oiseau != 'all') <span> / </span> @endif @if($group_oiseau != 'all') <span>Groupe: {{ $group_oiseau }}</span> @endif @if($governorat_id != 'all' || $group_oiseau != 'all') <span>)</span> @endif </h3> <div class="type-infraction"> <div class="categ_stat_img"> <img src="assets/images/icone/stat01.png"> <h4>Braconnage: {{ $cas01 }}</h4> </div> <div class="categ_stat_img"> <img src="assets/images/icone/stat02.png"> <h4>Commerce illégal: {{ $cas02 }}</h4> </div> <div class="categ_stat_img"> <img src="assets/images/icone/stat03.png"> <h4>Détention illégale: {{ $cas03 }}</h4> </div> <div class="categ_stat_img"> <img src="assets/images/icone/stat04.png"> <h4>Autres cas de mortalité: {{ $cas04 }}</h4> </div> </div> <h3 class="content-title"> Les espèces d'oiseaux les plus visées & Nombre d'infractions @if($governorat_id != 'all' || $group_oiseau != 'all' || $type_infraction != 'all') <span>(</span> @endif @if($governorat_id != 'all') <span>Gouvernorat: {{ App\\Http\\Controllers\\StatistiqueController::getGovId($governorat_id)->title_fr }}</span> @endif @if(($governorat_id != 'all' && $group_oiseau != 'all') || ($governorat_id != 'all' && $type_infraction != 'all')) <span> / </span> @endif @if($group_oiseau != 'all') <span>Groupe: {{ $group_oiseau }}</span> @endif @if($group_oiseau != 'all' && $type_infraction != 'all') <span> / </span> @endif @if($type_infraction == 'cas01') <span>Catégorie: Braconnage</span> @elseif($type_infraction == 'cas02') <span>Catégorie: Commerce illégal</span> @elseif($type_infraction == 'cas03') <span>Catégorie: Détention illégale</span> @elseif($type_infraction == 'cas04') <span>Catégorie: Autres cas de mortalité</span> @endif @if($governorat_id != 'all' || $group_oiseau != 'all' || $type_infraction != 'all') <span>)</span> @endif </h3> @if($birds != '[]') <table class=""> <thead> <tr> <th>Nom de l'espèce</th> <th class="text-center">Nombre d'infraction</th> </tr> </thead> <tbody> @foreach($birds as $bird) <tr> <td>{{ $bird->bird->title_fr }}</td> <td class="text-center">{{ $bird->count }}</td> </tr> @endforeach() </tbody> </table> @else <p class="panel-content-result">Pas de résultat pour cette section</p> @endif </div> </div> <div class="footer"> <div class="footer-left"> <p>Association "Les Amis des Oiseaux" (AAO/BirdLife Tunisie)</p> <p>Immeuble ERIS Bureau N°4 au 2ème étage 14,</p> <p>Rue Ibn El Heni 2080 Ariana-Tunisie</p> <p>(+216) 53 937 127 / aao.org@gmail.com</p> </div> <div class="footer-right"> <p>Observatoire citoyen des infractions à l'encontre<br> des oiseaux sauvages en Tunisie</p> </div> </div> </body> </html>

1 answers

solution1
 0  2019-06-18 09:22:46

If I understood your question right, you want to download PDF file depending on your blade view? If that's true, you can make your blade as something like this: 

<!doctype html>
<html lang="en">
<head>
    <style>
        /*your css style*/
    </style>
</head>
<body>
    @foreach($users as $user)
        <table class="table">
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{$user->name}}</td>
                <td>{{$user->last_name}}</td>
                <td>{{$user->email}}</td>
              </tr>
            </tbody>
        </table>
    @endforeach
</body>
</html>

Then in your controller, to download your PDF file, you can do something like this: 

if ($users) {
     $pdf = PDF::loadView('your_view', $users);
     $fileName = 'your_file_name.pdf'
     return $pdf->download($fileName);
} else {
     return redirect()->back();
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to determine an end of a page before converting html to pdf using wkhtmltopdf? Converting Html Css to Pdf and Download it, Same as the Design Converting html to pdf: how to dynamically add pages to pdf when html content is overflowing? (dynamic multiple page pdf) How to add footer to bottom of each page when converting HTML to PDF Converting the HTML page to a downloadable PDF with a button click How to give page break at certain point in pdf while converting html to pdf using jsPDF? How to embed a PDF in HTML page? How to embed a PDF in an HTML page? Converting html page containing openlayers map to pdf via wkhtmltopdf converting html to pdf
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM