堆棧內存溢出
  簡體   English   中英

如何在轉換為pdf之前設計html頁面？

[英]How to design html page before converting to pdf?

 原文  2019-06-18 08:36:39  2   1    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 個解決方案

解決方案1
 0  2019-06-18 09:22:46

如果我理解你的問題，你想根據你的刀片視圖下載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();
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在使用 wkhtmltopdf 將 html 轉換為 pdf 之前確定頁面的結尾？ 將 Html Css 轉換為 Pdf 並下載，與設計相同 html轉pdf：html內容溢出時如何動態添加頁面到pdf？ （動態多頁 pdf） 將 HTML 轉換為 PDF 時如何在每頁底部添加頁腳 單擊按鈕將 HTML 頁面轉換為可下載的 PDF 如何在使用 jsPDF 將 html 轉換為 pdf 時在 pdf 中的某個點進行分頁？ 如何在 HTML 頁面中嵌入 PDF？ 如何在 HTML 頁面中嵌入 PDF？ 通過 wkhtmltopdf 將包含 openlayers 映射的 html 頁面轉換為 pdf 將 html 轉換為 pdf
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM