I am using barryvdh/laravel-dompdf to generate pdf.
I'm trying generate one pdf file with multiple pages from data collection the problem is that I get only first element and one page. Using foreach loop to generate pages. Also I was trying to use foreach in my blade, but then I get only the last page.
Controller:
public function multiplePagesPdf(Request $request)
{
$kuponai = Kuponas::all();
//dd($kuponas);
$html = '';
foreach($kuponai as $kuponas)
{
$view = view('pdf.multiple')->with(compact('kuponas'));
$html .= $view->render();
}
$pdf = PDF::loadHTML($html);
$sheet = $pdf->setPaper('a4', 'landscape');
return $sheet->stream('sugeneruoti.pdf');
}
Maybe problem in my blade file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dovanų kuponas</title>
</head>
<body>
<div class="coupon">
<div class="page">
<div class="subpage">
<div class="container" style="
width: 21cm;
height: 16cm;
position: absolute;
top: 6.8cm;
font-family: DejaVu Sans;
background: white;
">
<h2>{{!! $kuponas->kupono_nr !!}}</h2>
<h3 style="margin-left: 3.2cm">
Dovanų kupono numeris:
<span style="color: black"></span>
</h3>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
</style>
There are certain things that are wrong in the code snippet you have provided, I will explain those first then provide correct way of doing it(for which I get results).
Firstly
you have used with & compact together, I don't know if it gets correct results but you should use any one of them or use array syntax of view method.
Secondly
what you are doing it you are rendering the view to html & then concating it, so , your html would look like,
<html>
.... content
</html>
<html>
.... content
</html>
& so on.
Thirdly
You css is messed up & not working as you want because of inline css you have added.
Solution
I would have used View Components to create similar views with different data.
So we would create a component in resources/views/components/single.blade.php (here I have named it single).
I have added your repeative code in the component single from your view. Now your coupon div class is in the component single.
<div class="coupon">
<div class="page">
<div class="subpage">
<div>
<h2>{{ $kuponas->kupono_nr }}</h2>
<h3>
Dovanų kupono numeris:
<span></span>
</h3>
</div>
</div>
</div>
</div>
Then in your view,
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>Dovanų kuponas</title>
<style>
.page-break {
page-break-after: always;
}
</style>
</head>
<body>
#php $count = 0;#endphp
#foreach ($kuponai as $kuponas)
#php $count++ #endphp
<div class="container {{ (count($kuponai)-1 >= $count) ? 'page-break' : '' }}">
#component('pdf.components.single', ['kuponas' => $kuponas])
#endcomponent
</div>
#endforeach
</body>
</html>
use page-break class to create breaks, I have used count condition to remove one extra page break. I am passing the data of kuponas to the component.
Finally change your controller,
public function multiplePagesPdf(Request $request)
{
$kuponai = Kuponas::all();
//dd($kuponas);
$view = view('pdf.multiple', ['kuponai' => $kuponai]);
$html = $view->render();
$pdf = PDF::loadHTML($html)->setPaper('a4', 'landscape');
return $pdf->stream('sugeneruoti.pdf');
}
Related
laaravel version:8.0
livewire version: 2.x
Hi there
I am new to laravel livewire and facing a strange issue!. in order to execute the action i used wire:click as can be seen in the following code in my admin-login.blade.php
#section('content')
<div class="admin-login display-flex flex-align-items-center flex-justify-content-center">
<button wire:click="toDo">{{$login}}</button>
<div class="admin-form display-flex flex-direction-column flex-justify-content-center" >
#livewire('header',['name'=> 'Admin Login','width'=> '100%','height' => '20%'])
<form class=" display-flex flex-direction-column flex-justify-content-center" >
<section style="margin: 2%;">
<label for="Email">Email :<span style="color: red">*</span></label>
<input type="email" required>
</section>
<section style="margin: 2%;">
<label for="Password">Password :<span style="color: red">*</span></label>
<input type="password" required>
</section>
<button style="width: 40%; height: 5vh; align-self: center;justify-self: flex-end;">Login</button>
</form>
</div>
</div>
#endsection
my app.blade.php file in layouts directory is
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{asset('css/admin/app.css')}}">
#livewireStyles
<title>Admin Dashboard</title>
</head>
<body>
#livewire('nav-bar')
#livewire('side-bar')
#yield('content')
</body>
#livewireScripts
<script>
var isStudentDropDown = false
Livewire.on('showSidebar',()=>{
document.getElementById('sidebar').style.display = "block"
})
Livewire.on('closeSidebar',()=> {
document.getElementById('sidebar').style.display = "none"
})
Livewire.on('showDropdown',data => {
if(document.getElementById(data).style.display === "block"){
document.getElementById(data).style.display = "none"
}else{
document.getElementById(data).style.display = "block"
}
})
</script>
</html>
now my component php file
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class AdminLogin extends Component
{
public $login = "login";
public function render()
{
return view('livewire.admin-login');
}
public function hell(){
$this->login = "signup";
}
public function toDo(){
dd('do some thing');
}
}
i have checked my devtools and got no request being send to the server
Pardon me for any mistake!
Extends layouts from component
ref link https://laravel-livewire.com/docs/2.x/rendering-components#custom-layout
public function render()
{
return view('livewire.admin-login')
->extends('layouts.app')
->section('content');
}
and remove #section from admin-login.blade.php
I am trying to implement FullCalendar in Laravel. In this regard my controller is like below
<?php
namespace App\Http\Controllers;
use Illuminate\Routing\Controller as BaseController;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Calendar;
use App\Event;
class HomeController extends BaseController
{
public function calendar() {
$events = [];
$data = Event::all();
if($data->count()) {
foreach ($data as $key => $value) {
$events[] = Calendar::event(
$value->title,
true,
new \DateTime($value->start_date),
new \DateTime($value->end_date.' +1 day'),
null,
// Add color and link on event
[
'color' => '#f05050',
'url' => 'pass here url and any route',
]
);
}
}
$calendar = Calendar::addEvents($events);
return view('welcome', compact('calendar'));
}
}
My View file is like below
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{ asset('/css/main.css')}}" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.2.0/main.min.js" crossorigin="anonymous"></script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">MY Calender</div>
<div class="panel-body">
{!! $calendar->calendar() !!}
{!! $calendar->script() !!}
</div>
</div>
</div>
</body>
</html>
My output is like below (I am getting blank white screen)
I found that I have to initialize FullCalendar. How can I initialize FullCalender ?
I am trying to follow below tutorials. But I didn't find any initialization there.
https://www.laravelcode.com/post/laravel-full-calendar-tutorial-example-using-maddhatter-laravel-fullcalendar
https://github.com/acaronlex/laravel-calendar
https://github.com/maddhatter/laravel-fullcalendar
https://hdtuto.com/article/laravel-full-calendar-tutorial-example-from-scratch
I am confused. What should I do ?
It looks like you are calling {!! $calendar->script() !!} outside of a script tag.
Try <script> {!! $calendar->script() !!} </script> instead
The example shows that within a script tag, which suggests it likely loads javascript assets involved in rendering the calendar.
I have following code:
$pdf = \App::make('dompdf');
$pdf->loadView('offers.pdf',compact('email','messages'));
return $pdf->stream();
pdf.blade.php:
<!doctype html>
<html class="no-js" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
font-family: "Arial";
}
</style>
</head>
<body>
Rozpočet, Voliteľné časti
</body>
</html>
PDF document looks like:
Rozpo?et,Volite?né ?asti
But I need show special characters like in pdf.blade.php file, do you have some solutions for me?
This worked for me:
<html>
<head>
<meta http-equiv="Content-Type" content="charset=utf-8" />
<style type="text/css">
* {
font-family: "DejaVu Sans Mono", monospace;
}
</style>
</head>
<body>your content ćčžšđ...</body>
</html>
For Laravel 8, I solved my problem with the help of the https://github.com/mpdf/mpdf PHP package.
First of all, I've created a view template in my resources folder,
"pdfview.blade.php"
<!DOCTYPE HTML>
<html lang="fa">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<table dir="rtl">
<tr>
<th>ردیف</th>
<th>عنوان</th>
<th>توضیحات</th>
</tr>
#foreach ($items as $key => $item)
<tr style="padding: 5px">
<td style="padding: 10px">{{ ++$key }}</td>
<td style="background: #efefef; padding: 10px">{{ $item->title }}</td>
<td style="padding: 10px">{{ $item->body }}</td>
</tr>
#endforeach
</table>
</body>
and created a method in my controller:
public function pdfview()
{
$items = Post::get();
// change the root directory of fonts.
$fontDirs = public_path() . "/fonts/MY_FONT_NAME/";
// specify the font
$fontData = [
"MY_FONT_NAME" => [
'R' => 'MY_FONT_NAME.ttf'
],
];
$mpdf = new Mpdf([
'fontDir' => $fontDirs,
'fontdata' => $fontData,
'default_font' => 'MY_FONT_NAME'
]);
// render view as HTML
$html = view('pdfview', compact('items'))->render();
$mpdf->WriteHTML($html);
return $mpdf->Output();
}
LAYOUT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/bootstrap")
#Scripts.Render("~/bundles/modernizr")
<link rel="Stylesheet" href="../../Content/bootstrap.min.css" />
<link rel="Stylesheet" href="../../Content/bootstrap-theme.min.css" />
</head>
#*<body style="background-image: url(../../Content/Images/old-paper.jpg)">*#
<body style="background-color: #EEE">
#*---- WEB PAGE ---- *#
<div class="wrap-middle">
#*---- TITLE OF THE WEBSITE ----*#
<div class="container-fluid" style="width: 100%; background-image: url('/Content/Images/Header.bmp')">
<div>
<h1>
ONLINE VOTING SYSTEM</h1>
</div>
</div>
#*---- BODY SECTION ----*#
<div class="jumbotron">
<div class="container">
#RenderBody()
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" style="box-shadow: 0 0 20px black;">
<div class="container-fluid" style="color: Yellow">
Copyright <sup><span class="glyphicon glyphicon-copyright-mark"></span></sup>2014.
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
VIEW:
#model IEnumerable<Online_Voting_System_site.DAL.tbl_candidate>
#{
ViewBag.Title = "CandidateApproval";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Ajax.ActionLink("Approve",
"ApproveCandidate",
new { _CandidateID = item.CandidateID },
new AjaxOptions { UpdateTargetId = item.CandidateID.ToString() },
new { #id = item.CandidateID.ToString(), #class = "btn btn-sm btn-success" })
ACTION METHOD:
public string ApproveVoter(string ID)
{
/* Logic is hidden.I use that ID parameter in here */
return "Approved";
}
I'm trying to change button text by calling action method using
ajax.actionlink. That action method is returning a string as button ID
but it displayed in new page.
Edit: The string should the text of the button. But the text is getting displayed in a new page.
I have been working on this for a bit and am not savvy enough to know how to correctly implement it (such that it remains a responsive design).
I am running the free "responsive" wordpress theme by ThemeID on a test site and need to have the main body content text of the single article page wrap underneath the right sidebar and adjust "dynamically" as the sidebar changes height over time. I plan on having the "Archives" widget in this right sidebar, so over time it will grow in height...so the body text should not extend to underneath the sidebar until it reaches the bottom of the sidebar. Take a look at a mockup I made real quick to demonstrate what I mean.
Before: http://www.heliossolutions.net/responsive.jpg
After 2: http://www.heliossolutions.net/responsive3.jpg
As you can see, the text currently leaves a huge white space beneath the sidebar but I would like for it to be able to flow underneath and adapt to the sidebar height. It also needs to maintain the responsive nature of the theme and work correctly on mobile devices (i.e. the sidebar widgets should properly display underneath all the content when viewed on a mobile phone, as it does out-of-the-box).
Does this make sense?
The page code currently looks like this:
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" dir="ltr" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" dir="ltr" lang="en-US"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
<meta name="template" content="Responsive 1.6.9" />
</head>
<body class="single single-post postid-36 single-format-standard">
<div id="container" class="hfeed">
<div id="header">
<div id="logo">
</div><!-- end of #logo -->
<ul class="menu"><li >Home</li></ul>
</div><!-- end of #header -->
<div id="wrapper" class="clearfix">
<div id="content" class="grid col-620">
<div id="post-36" class="post-36 post type-post status-publish format-standard hentry category-web-development">
<div class="post-meta">
<span class="meta-prep meta-prep-author">Posted on </span> July 2, 2012</span>
</div><!-- end of .post-meta -->
<div class="post-entry">
<p>Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.</p>
</div><!-- end of .post-entry -->
<div class="post-data">
</div><!-- end of .post-data -->
<div class="post-edit"></div>
</div><!-- end of #post-36 -->
<div id="respond">
<h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/parallax-slider/#respond" style="display:none;">Cancel reply</a></small></h3>
<p class="must-log-in">You must be logged in to post a comment.</p>
</div><!-- #respond -->
</div><!-- end of #content -->
<div id="widgets" class="grid col-300 fit">
<div class="widget-wrapper">
<div class="widget-title">In Archive</div>
<ul>
</ul>
</div><!-- end of .widget-wrapper -->
</div><!-- end of #widgets --> </div><!-- end of #wrapper -->
</div><!-- end of #container -->
<div id="footer" class="clearfix">
<div id="footer-wrapper">
<div class="grid col-940">
<div class="grid col-540">
</div><!-- end of col-540 -->
<div class="grid col-380 fit">
<ul class="social-icons"></ul><!-- end of .social-icons --> </div><!-- end of col-380 fit -->
</div><!-- end of col-940 -->
<div class="grid col-300 copyright">
© 2012
</div><!-- end of .copyright -->
<div class="grid col-300 scroll-top">↑</div>
<div class="grid col-300 fit powered">
</div><!-- end .powered -->
</div><!-- end #footer-wrapper -->
</div><!-- end #footer -->
</body>
</html>
And the corresponding CSS (tried to give you more than enough, since I can't pinpoint the exact issue):
#content {
margin-bottom:20px;
}
.grid {
float:left;
margin-bottom:2.127659574468%;
padding-top:0;
}
.col-60,
.col-140,
.col-220,
.col-300,
.col-380,
.col-460,
.col-540,
.col-620,
.col-700,
.col-780,
.col-860 {
display:inline;
margin-right:2.127659574468%;
}
.col-620 {
width:65.957446808511%;
}
.post-meta {
clear:both;
color:#9f9f9f;
font-size:13px;
margin-bottom:10px;
}
.post-entry {
clear:both;
}
.post-data {
clear:both;
font-size:11px;
font-weight:700;
margin-top:20px;
}
.post-edit {
clear:both;
display:block;
font-size:12px;
margin:1.5em 0;
}
#widgets {
margin-top:40px;
}
.col-300 {
width:31.914893617021%;
}
.fit {
margin-left:0!important;
margin-right:0!important;
}
.widget-wrapper {
-webkit-border-radius:6px;
-moz-border-radius:6px;
background-color:#f9f9f9;
border:1px solid #d6d6d6;
border-radius:6px;
font-size:13px;
margin:0 0 20px;
padding:20px;
}
.clearfix:after,
#container:after,
.widget-wrapper:after {
clear:both;
content:"\0020";
display:block;
height:0;
max-height:0;
overflow:hidden;
visibility:hidden;
}
.clearfix,
#container,
.widget-wrapper {
display:inline-block;
}
.clearfix,
#container,
.widget-wrapper {
display:block;
}
Any ideas as how to do this? I know it is possible and probably a simple change, I'm just not adept enough at responsive CSS to see it!
Thanks,
D
[4/9/12 - Updated HTML code to show entire page, with extra Head info (javascript and style sheets) removed]
It's hard to tell because your HTML is not complete (most of the divs are not closed for example). However, both .widget-wrapper and .col-300 have bottom margins which if remove might do the trick.