I am creating pdf by passing html to dompdf. I am trying to add header and footer on every page of the pdf. The issue is that the pdf has multiple pages. The header is created on the first page and footer on the last page. I need them both on every page.
#page {
margin: 0cm 0cm;
}
body {
margin-left: 1cm;
margin-right: 1cm;
margin-top: 1cm;
margin-bottom: 1cm;
}
header {
position: fixed;
top: 0cm;
left: 0cm;
right: 0cm;
height: 1cm;
padding: 10px;
background-color: #0011ff;
}
footer {
position: fixed;
bottom: 0cm;
left: 0cm;
right: 0cm;
height: 1cm;
padding: 10px;
background-color: #0011ff;
}
<header>
<p>Header</p>
</header>
<div>
<p>main content. This is just an example of how I am creating the document. This div's content spans on multiple pages.</p>
</div>
<footer>
<p>Footer</p>
</footer>
I got the solution from here and added bottom: 0px; to the footer style.
Here is the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#page{
margin-top: 150px;
margin-bottom: 150px;
}
header{
position: fixed;
left: 0px;
right: 0px;
height: 150px;
margin-top: -150px;
}
footer{
position: fixed;
left: 0px;
right: 0px;
height: 150px;
bottom: 0px;
margin-bottom: -150px;
}
</style>
</head>
<body>
<header>
<img src="{{public_path("images/header.jpg")}}" style="width: 100%" >
</header>
<footer>
<img src="{{public_path("images/footer.jpg")}}" style="width: 100%">
</footer>
<main>
<!-- content here -->
</main>
</body>
</html>
The generated PDF had the header and footer images on all pages.
Please add proper html tags like; You need to wrap with html and body tag to make it work. This will print header and footer in each pdf pages.
<html>
<body>
<header>
<p>Header</p>
</header>
<footer>
<p>Footer</p>
</footer>
<div>
<p>main content. This is just an example of how I am creating the document. This div's content spans on multiple pages.</p>
</div>
</body>
</html>
Related
This is how I create the footer with DOMPdf:
$canvas = $dompdf->get_canvas();
$footer = $canvas->open_object();
$w = $canvas->get_width();
$h = $canvas->get_height();
$canvas->page_text($w-85,$h-28,"footer right",'helvetica',8);
$canvas->page_text($w-320,$h-28,"Page {PAGE_NUM} of {PAGE_COUNT}",'helvetica',8);
$canvas->page_text($w-550,$h-28,"footer left", 'helvetica',8);
This creates 3 sections in my footer, which works fine for me.
But I need the possibility in each line to integrate html text. I tried it like this:
$canvas->page_text($w-85,$h-28,"<b>My Company</b><br>My street<br>My city",'helvetica',8);
$canvas->page_text($w-320,$h-28,"Page {PAGE_NUM} of {PAGE_COUNT}",'helvetica',8);
$canvas->page_text($w-550,$h-28,"footer left", 'helvetica',8);
But the html code is not converted in the pdf.
I also tried:
$text = $dompdf->loadHtml("<b>My Company</b><br>My street<br>My city");
$canvas->page_text($w-85,$h-28,$test,'helvetica',8);
Like this nothing is loaded
You can't add html code in DomPdf
But you can work around using css
footer {
position: fixed;
bottom: 0;
left: 0px;
right: 0px;
height: 20px;
border-top: 1px solid #AAAAAA;
color: #777777;
width: 100%;
padding: 8px 0;
text-align: center;
}
And in html body place your content in <footer> </footer>
Working example:
<html>
<head>
<style>
#page { margin: 180px 50px; }
#header { position: fixed; left: 0px; top: -180px; right: 0px; height: 150px; background-color: orange; text-align: center; }
#footer { position: fixed; left: 0px; bottom: -180px; right: 0px; height: 150px; background-color: lightblue; }
#footer .page:after { content: counter(page, upper-roman); }
</style>
<body>
<div id="header">
<h1>Widgets Express</h1>
</div>
<div id="footer">
<p class="page">Page </p>
</div>
<div id="content">
<p>the first page</p>
<p style="page-break-before: always;">the second page</p>
</div>
</body>
</html>
Despite of other people having the same issues I still couldn't get it to work, so I'll really need your help.
I'm currently writing a guestbook in php with a html-template but I have the issue that my divs don't use the min-height properties that I set if they are a percentage. I wanted to make the whole page responsive for all resolutions and window-sizes so that's why I'm trying to avoid fixed heights.
The following is my html-markup:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</body>
</html>
As my CSS-file is quite big I will only give you the important parts:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
}
body {
height:100%;
width:calc(70% - 2px);
margin-left: calc((30% - 2px) / 2);
position: absolute;
}
#wrap_main {
background: rgba(255,255,255,0.7);
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
margin-top: calc(1% + 4px);
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 550px;
width: 95%;
}
If you need more parts, please write so in the comment. I'm sorry if the code is a little messy but I haven't yet cleaned it up...
My problem is, that the #wrap_content and #content can't have a percentage height and I don't know why but it just won't work.
Did I make a mistake somewhere along the way and just don't see it?
What do I need to change, so that the #wrap_main is always as big as it's content? How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Do I need to change something in the html-markup?
If you see anything else that I could do better, please advise. I'm still very new to php, html and css but I'll welcome every help I can get. Thanks in advance.
If you want to check out what the page looks like at the moment click here. Be aware that not everything is working correctly yet, but if you want to register yourself, you're highly welcome to test it out.
EDIT:
I had to change the html-markup a little and adapted the css quite a bit thanks to the idea of William, thanks again:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="whity_layer">
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</div> <!-- whity_layer -->
</body>
</html>
And CSS:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
z-index: -1;
}
body {
height: 100%;
max-height:auto;
width:100%;
position: relative;
z-index: 0;
}
#whity_layer {
background: rgba(255,255,255,0.7);
margin-left: calc((30% - 2px) / 2);
width: calc(70% - 2px);
height: 100%;
position: fixed;
overflow: auto;
z-index: 1;
}
#wrap_main {
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
top: 45px;
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 100%;
width: 95%;
}
I'll have yet to decide the min-height of the content-wrapper, but I'll figure it out.
EDIT 2
I have to add that at the moment I have a scrollbar on the whity_layer if the content overflows (overflow: auto) which I can't get rid of for the time being... every homebrew attempt I found wouldn't work with my markup... Nowadays it should be easier to hide scrollbars with css in my opinion...
What do I need to change, so that the #wrap_main is always as big as it's content?
You don't need to use height or min-height to have the #wrap_main always as big as it's content.
How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Just take the height and min-height out of the CSS
Do I need to change something in the html-markup?
Not really, just change the CSS.
Here is a jsfiddle without the height and min-height on CSS that will adjust it's height according the content.
EDIT:
If you just need a whity background, you might consider this:
Create a new div #whity_layer and make it absolute before all the other divs:
<body>
<div id="whity_layer"></div>
<div id="wrap-main"></div>
.........
Change the CSS to:
body {
position: relative;
}
#whity_layer {
background: rgba(255,255,255,0.7);
position: absolute;
width: 100%;
height: 100%;
}
#wrap_main {
// Remove background
}
A time ago i tried to find a css alternative to make my div always as big as it's content, but as long as i remember that was horrible/hard, i'am sorry that i can't really answer you, but if you want to try with another method you can use AngularJs with, for exemple, ng-style so you can give your divs a "dynamic" size.
The rest is all about algorithm :).
Good luck mate :3
While running third party php application i get this type of warning:Warning: DOMNode::cloneNode(): ID mainBodyArea already defined in /libraries/content-extractor/ContentExtractor.php on line 676
Followed by another warning:
Warning: Cannot modify header information - headers already sent by (output started at libraries/content-extractor/ContentExtractor.php:676) in libraries/feedwriter/FeedWriter.php on line 103
lines in ContentExtractor.php near 676..
if (isset($this->body)) $this->body = $this->body->cloneNode(true);
$success = $this->readability->init();
lines in FeedWriter.php near line 103
header('Content-type: application/json; charset=UTF-8');
$this->json = new stdClass();
I am stuck here few hours because if this. I am new to php concepts.
Please help me.
I wasn't getting entirely this error but have just fixed something incredibly similar, mine was.
DOMNode::cloneNode() [<a href='domnode.clonenode'>domnode.clonenode</a>]: ID header already defined in dompdf/include/frame_decorator.cls.php on line 128
I was making a pdf with the html of:
$html = '<html><head>
<style>
#page { font-family:Arial, Helvetica, sans-serif; margin:0px; }
#header { position: fixed; left: 0px; top: 50px; right: 0px; height: 70px; text-align: center; }
#footer { position: fixed; left: 0px; bottom: 50px; right: 0px; height: 70px; text-align: center; }
#content { position: fixed; left: 0px; top: 160px; right: 0px; text-align:center; height:934px; width:934px; }
</style>
</head>
<body>
<div id="header">
header content
</div>
<div id="content">
main content
</div>
<div id="footer">
footer content
</div>
</body>
</html>';
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$pdf = $dompdf->output();
To fix the problem all I did was change the id's to classes:
$html = '<html><head>
<style>
#page { font-family:Arial, Helvetica, sans-serif; margin:0px; }
.header { position: fixed; left: 0px; top: 50px; right: 0px; height: 70px; text-align: center; }
.footer { position: fixed; left: 0px; bottom: 50px; right: 0px; height: 70px; text-align: center; }
.content { position: fixed; left: 0px; top: 160px; right: 0px; text-align:center; height:934px; width:934px; }
</style>
</head>
<body>
<div class="header">
header content
</div>
<div class="content">
main content
</div>
<div class="footer">
footer content
</div>
</body>
</html>';
I hope that helps or gets you a step closer to fixing the issue!
I'm having an issue trying getting my fixed header and footer to show using a php include
Here is my HTML
<?php include '_includes/header.php' ?>
<div class="neo__wrapper">
<div class="neo__container">
</div>
</div>
<?php include '_includes/footer.php' ?>
My SASS (used for nesting)
*{
margin: 0;
padding: 0;
text-decoration: none;
border: 0;
border: none;
}
html,body{
width: 100%;
height: 100%;
}
.neo__wrapper{
width: 100%;
height: 100%;
margin: 0 auto;
.neo__container{
width: 960px;
height: 3000px;
margin: 0 auto;
}
}
header{
background:#ccc;
width: 100%;
position: fixed;
height: 100px;
top: 0;
}
footer{
background:#ccc;
position: fixed;
width: 100%;
height: 50px;
bottom: 0;
}
I'm just building a framework so my header.php is just
<header></header>
and my footer.php is
<footer></footer>
Basically, my page should just have a gray fixed header and footer
Your including an empty file.
<head><link rel="stylesheet" type="text/css" href="MyCSSFile.css"></head>
also, if you are doing a header and footer on every page, include this code into them as well. in header.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="MyCSSFile.css">
</head>
<body>
and in footer.php
<footer>
<script src="MyJavascriptFile.js"></script>
</footer>
</body>
</html>
Just figured out that it was an issue regarding WAMP, so PHP wasn't even running in the first place
I have a problem with some HTML elements. I have an image and a title in a <header> tag - they should both move independently to each other, however when I move the img element down 40px with the margin-top attribute - the title seems to move down 40px with it. So I add margin-top: -20px; to move it back up and it seems to stay put.
Here's my code:
The header file:
<div class="page">
<header>
<div class="titlesec">
<img class="circular" src="themes/default/image.jpg" />
<a class="logo" href="<?php echo base_url(); ?>">
<?php echo site_name(); ?>
</a>
</div>
<div class="split"></div>
</header>
The footer file:
<footer>
<p>© Copyright <?php date("Y"); ?> Duncan Hill</p>
</footer>
</div>
</body>
</html>
and my css:
.page {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.logo {
font-family: 'Helvetica Neue';
font-weight: 100;
font-size: 56px;
text-decoration: none;
color: #555555;
margin-top: -20px;
}
.split {
height: 1px;
background-color: #CCCCCC;
}
.circular {
margin-top: 40px;
width: 80px;
height: 80px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.titlesec {
height: 150px;
}
Any help is appreciated immensely!
img and a are inline tags. Which means they are in the same line. Adding margin-top manipulates this line, and affects therefore both of them.
Depending on what you want to do, you could solve this with surounding both elements with their own div. Then you can style the divs independently. Maybe a float on those divs comes in handy, too.
Close your "page" DIV. It seems that your not properly closing your html tags.