在转换为pdf之前如何设计html页面？

时间：2019-06-18 08:36:39

标签： javascript laravel dompdf

我在Laravel 4.2中使用"thujohn/pdf": "dev-master"。我将网站迁移到Laravel 5.7，所以不得不放弃该软件包并安装了"barryvdh/laravel-dompdf": "^0.8.4"。我将这个刀片视图转换为pdf。视图的代码是相同的，但是当我下载pdf文件时，页面的设计并不相同，并且一切都搞砸了。我想更改像普通网页一样转换为pdf的视图的CSS，有办法吗？

$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 个答案:

答案 0 :(得分：0)

如果我正确理解您的问题，是否要根据刀片视图下载PDF文件？如果是这样，您可以将刀片做成这样：

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

然后在您的控制器中，要下载PDF文件，您可以执行以下操作：

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