I am using Laravel inbuilt pdf to make PDF from the view but the view i made used bootstrap css but after converting the view in to pdf all bootstrap css is getting lost.
Below is my code
$data = [
'foo' => 'bar'
];
$pdf = PDF::loadView('leadmanagement.jobcard_operation_view', $data);
$pdf->SetProtection(['copy', 'print'], '', 'pass');
return $pdf->stream('JOB CARD.pdf');
Below is some screen shot of how my view looks and how my pdf looks
Image one is showing what type of view i actually need in my pdf
And How pdf Is Downloaded see below
Image 2nd Showing the view after pdf is being downloaded
Any help would be helpful
You need to import the bootstrap css into the pdf as well.
Also make sure you are setting
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
In the document head. Another possibility is if you use elixir, try
<link rel="stylesheet" href="{{ ltrim(elixir('assets/css/app.css'), '/') }}" />
Related
I'm using a Laravel app with an external public directory, e.g. root/Laravel, and root/html/public.
I need this app to load from a require on an php file that already has another framework(root/html/this-section.php), hence that other fw has its own head, and body tag. This app will load between the header and footer of that index.
In my blade layout.app file, i have
#section('stylesheets')
<link rel="stylesheet" href="/this-section/css/vendors.css">
<link rel="stylesheet" href="/this-section/css/app.css">
#show
<div id="main">
#include('layouts.sidebar')
#include('layouts.header')
<section>
#yield('content')
</section>
</div>
The issue I'm having is if no my app layout, when I delete the head and body tags during testing, which is what i need, the blade system, or what i dont know, is still creating an empty head tag set, <head></head>, then when i enable the stylesheets section, it ends up in that <head> tag.
Expected: The head tag should not be there. I don't want a head tag. What in laravel can i adjust to remove this auto creation of head (and body)?
It sounds like your using tags that belong in the <head> section is causing this. While your source may be pristine:
browsers will add in the missing-but-required tags as appropriate, resulting in you seeing them in the browser's web inspector:
I've got specific Form component, which is declared as
Form::component('fcRadio', 'components.form.fcradio', ['name', 'options', 'selected' => null]);
and used as
{{ Form::fcRadio('name', $options }}
What I want is somehow attach custom CSS file, so if the page fires this component at least once, the desired CSS file is included to the <head> of my document.
For example, in Joomla it was like
$this->document->addStylesheet('my_awesome_style.css');
Is there any way to achieve the same in Laravel?
UPD:
I've extended the answers below a bit to let it add multiple styles from multiple templates. Finally, it looks like this:
#section('styles')
#parent
{{HTML::style('css/fcradio.css')}}
#stop
It works fine, but if I use the component twice per page, style is also adds twice. How can I allow multiple but unique entries?
So this is typically how I deal with it:
In your folder: resources/views I create a folder called layout. This folder handles the templates for all my pages.
Then I create a file called default.blade.php. In it I put the bulk of the HTML code. Here's an example of how default.blade.php could look (slimmed down, obviously)
<!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>
#yield('title')
</title>
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<!-- Additional per-page css -->
#yield('css')
</head>
<body>
#yield('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<!-- Include per-page JS -->
#yield('js')
</body>
</html>
Right, so essentially what we have so far is the #yield() and asset() helpers.
#yield() is special blade syntax that Laravel uses to say, "Okay. Any time a blade view that is inheriting THIS master template calls the section named in this #yield() I will display that content right here.
asset() is a nifty little helper that basically appends your URL structure onto the string you pass it. So if your url is http://MyGreatSite.com and you use asset('js/script.js') it will spit out a fully qualified URL that will work anywhere on the site (http://MyGreatSite.com/js/script.js). asset() is great because you can use it in blade templates that will get sent out as an email and all of the files will work in an email inbox because they are absolute links.
Right. So now we have this master template and we need to use it. So what I do is create another view in the resources/views directory. Lets say we're doing a contact page. I would make contact.blade.php. Now I want to inherit that master template we created. So we do that like so:
#extends('layout.default)
#section('css')
<link rel="stylesheet" href="{{ asset('css/contact.css') }}">
#stop
#section('title')
Contact Us
#stop
#section('content')
<h1>Contact us</h1>
<p>
Contact us via email: contact#mygreatsite.com
</p>
#stop
#section('js')
<script src="{{ asset('js/contact-form.js') }}"></script>
#stop
Okay, so, first things first. At the very top we tell this blade file that we want to use the template we just made. We use the blade helper #extends() and pass it the path to our view relative to the views directory separated by periods.
Next, we want to create the sections that correspond to the template. We do that by opening the section with #section() and passing the name of the section we want to push this block of content to. We write our content and then we close the section by using #stop. Pretty simple. For images, css, or js, we simply use the asset() helper again.
I know it's a little long-winded, but hopefully that helps and explains the process a little better.
tl;dr: Use #yield(), #section(), and asset().
So I think I understand what you are saying.
In your blade layout file create a section inside the head:
<head>
#yield('componentcss')
</head>
And in the component do:
#section('componentcss')
{{HTML::style('css/fcradio.css')}}
#stop
You could also just include the css but I wouldn't advise this:
#section('componentcss')
<style>
.exampleclass {text-align:center;}
</style>
#stop
Hopefully I have understood you correctly.
I've finally found a bit tricky but working solution:
#hasSection('fcRadioStyle')
#else
#section('fcRadioStyle')
{{Html::style('css/components/fcradio.css')}}
#stop
#section('styles')
#yield('fcRadioStyle')
#append
#endif
This makes by Form::fcRadio append this style only once
I am using the following library to generate PDFs from my views.
Now I am trying to do a custom footer so I created a footer view with the following
<!DOCTYPE html>
<footer class="footer">
<div class="container">
<hr>
<address>
//Some Address
</address>
</div>
</footer>
As per the docs I set the DOCTYPE. Now my main view is where I load the css files etc. In my Controller I do the following
$footer = \View::make('projects.clients.footer')->render();
$pdf = \PDF::loadView('projects.clients.template', compact('project'))->setOption('footer-html', $footer);
return $pdf->download('test.pdf');
So as far as I can tell I am doing everything correctly. Now my PDF displays the footer, but it has none of my own styling applied to it. If I try to load some CSS files within the footer template, the footer does not display.
How can I make sure the footer has the appropiate styles applied to it?
Thanks
try to load your css like that:
<link rel="stylesheet" href="{{ public_path('bootstrap/css/bootstrap.min.css')}}">
I want to use a theme cloned from GitHub into my themes directory for almost all pages and articles and automatically-generated pages except for my landing page whose template is not part of the cloned theme and which uses its own particular css..
Currently my working site uses a new template file and related images, js and css files added to the cloned theme. But that's not what I want.
I want to keep separate the landing page's template and related files from the cloned theme but don't understand what settings and / or content file's metadata to use to point to a different theme path just for that one page
i.e. I want to override the THEME settings on just one page.
Settings THEME, CSS_FILE, DIRECT-TEMPLATE and TEMPLATE_PAGES don't seem to be exactly what I want. But maybe they are?
You have a couple of different options. Personally, I'd go with the first method, but I've used all three of these in different situations.
The index.html method
With this method, you create an index.html file that is straight up HTML - exactly how you want your index.html page to look. You can use Jinja variables in it, which is important if you're including CSS that's in your theme (as opposed to using hosted libraries), but mostly, it just looks exactly like you want it to look. A very simple example:
<html>
<head>
<title>My Title</title>
<link href="{{ SITEURL }}/theme/css/mystyles.css" rel="stylesheet" type="text/css">
<body>
<h1>Hello world!</h1>
</body>
</html>
You can then tell Pelican not to render .html files by including this line in your pelicanconfig.py:
READERS = {'html': None}
This will not prevent Jinja from processing Jinja templates in the HTML document.
Finally, because you aren't including any metadata about the HTML file in the HTML file itself (that's what the READERS = {'html': None} business is all about), you have to tell Pelican where to put the final index.html, by setting the TEMPLATE_PAGES variable, also in your pelicanconf.py file:
TEMPLATE_PAGES = {
'index.html' : 'index.html'
}
Now you can see your page by going to localhost/ in your browser.
If you wanted to put the file at a different location, you can specify any location you want:
TEMPLATE_PAGES = {
'index.html' : 'mydirectory/mypage.html'
}
which would make your page accessible at localhost/mydirectory/mypage.html.
Include alternate CSS file in Markdown
Since most HTML works verbatim in Markdown posts, you could also modify your landing page Markdown file to include a CSS file at the top,
Title: My Index
Author: Clark Kent
Date: 2010-12-03 10:20
Category: StackOverflow
<link href="{{ SITEURL }}/theme/css/mystyles.css" rel="stylesheet" type="text/css">
# Hello World
Welcome to the landing page!
Add metadata to control theme
Lastly, you could modify the theme directly to include a metadata attribute that controls what stylesheets the theme uses. For example, let's use the WhichTheme: metadata flag. We'll specify WhichTheme: index for our index Markdown page, and WhichTheme: notindex (or nothing) for all other pages. Then in our theme files, we'll look for the template used to render all pages (usually pages.html), and we'll add a Jinja conditional to check for our new variable, which is accessible at page.WhichTheme:
{% if page.WhichTheme=='index' %}
<link href="{{ SITEURL }}/theme/css/mystyles.css" rel="stylesheet" type="text/css">
<h1>{{ page.title }}</h1>
{% else %}
<h1>{{ page.title }}</h1>
{% endif %}
I want to create a pdf based on one view, generated by Codeigniter. However, this view has a lot of styled elements, and media queries associated with them, so the rendered pdf doesn't correspond at all, with the desired final document.
What's the best way to acomplish this? Right now I'm using mPDF. Is there anyway to take a snapshot of the view and then generate a pdf with it, so the associated styles render correctly on the document?
Right now my code looks like this
public function generatePDF()
{
$this->session_expire();
$this->load->helper('url');
$user_id=$this->session->userdata('user_id');
$this->user_model=$this->db_interface->db_get_user($user_id);
// $this->load->helper('url');
//echo('error aki <br />');
$data['user'] = $this->user_model;
$data['objective'] = $this->db_interface->db_get_objectives($this->user_model->get_id());
$data['list_work'] = $this->db_interface->db_get_list_work_experience($this->user_model->get_id());
$data['list_education'] = $this->db_interface->db_get_list_education($this->user_model->get_id());
$data['list_skills'] = $this->db_interface->db_get_skills($this->user_model->get_id());
$data['list_personal'] = $this->db_interface->db_get_personal_skills($this->user_model->get_id());
$data['list_links'] = $this->db_interface->get_user_links($this->user_model->get_id());
$html = $this->load->view('display_user',$data,TRUE);
//$html = $this->load->view('display_user',$data,TRUE);
// $this->load->view('display_user', $html);
$this->mpdf->WriteHTML($html);
$this->mpdf->Output();
}
Thanks in advance
Short answer: kind of.
Long answer: you have 2 options. You can a) take a screenshot (See Website screenshots using PHP ); or b) you can create a custom stylesheet for print.
The latter will likely be much easier to do. There are limits on what the library you are using can do insofar as CSS is concerned, so read up: http://www.mpdf1.com/mpdf/enhancements
Best bet is probably to create separate stylesheets for screen and printing:
<link rel="stylesheet" href="screen.css" type="text/css" media="screen">
for viewing, and
<link rel="stylesheet" href="print.css" type="text/css" media="print">
for printing.
Style print.css to look good. It is highly unlikely you will be able to mimic the screen exactly, but it should be easy enough to present the information you need to print coherently.