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>
Related
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>
The footer is overlapping one of my webpage. all the others pages are fine but this one its overlapping, i dont really want to edit/update the footer as it is working in other pages, but I would like to see if there is something I can do with the css container for this page.
CSS
#box {
width: 100%;
height: auto;
margin-top: 20px;
position:relative;
padding-right:0.4%;
float:left;
margin-bottom: 10px;
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
CSS footer/body etc
html,
body {
margin:0 auto;
padding: 0;
max-width: 960px;
height: 100%;
background-color: white;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:white;
padding:10px;
}
#body {
padding:10px;
padding-bottom:40px; /* Height of the footer */
}
#footer {
position: absolute;
bottom:0;
left: 0;
right: 0;
height:40px; /* Height of the footer */
background:#EBEBEB;
border-radius: 5px;
}
PHP/HTML
for($temp = 1; $temp <= $cArray[2]; $temp++)
{
$img .= "<div class='boxChildLeft'>
<div class='img'>
<img src='../ProductImages/$cArray[0].jpg' width='100px' height='100px'>
</div>
<div class='prodInfo'>
<p1>$pName</p1><br>
<span id='sp'><p1>$pPrice<p1>
</span>
</div>
</div>";
}
HTML
<div id="box">
<?php echo $img;?>
</div>
The information you provided is not enough, what I suggest is to use W3school HTML validator it will indicate what's missing from your HTML implementation, it will help you by giving suggestions.
I am converting an HTML to pdf file using dompdf. It is working fine. But the problem is that I need to have page margin for all the pages except the first page. The first page should have an image covering the whole page. But now the margin is coming for all pages including the first one.
I am not able to disable margin for the first page. Any help is greatly appreciated. Thanks in advance.
Below is my css
<style type="text/css">
body { margin: 0px; }
#page { margin: 50px; }
#header {
position: fixed;
left: 0px;
top: -52px;
height: 50px;
border-bottom: 2px solid #797979;
margin: 0;
}
#footer {
position: fixed;
left: 0px;
bottom: -52px;
height: 50px;
border-top: 2px solid #797979;
margin: 0;
}
#footer .page:after { content: counter(page); }
.firstpage {
position: absolute;
page-break-after: always;
top: -50px;
width: 100%;
margin: 0;
}
.otherpages{ margin: 0; }
</style>
And here's my html
<div class="firstpage">
<img src="pdf-bg.jpg" style="width:100%; height:auto;/>
</div>
<div id="header">
<p><?php echo date("F j, Y"); ?></p>
</div>
<div id="footer">
<p class="page">Page <?php $PAGE_NUM ?></p>
</div>
<div class="otherpages">
some content
</div>
Try this,
#page { margin: 50px 0; }
.firstpage {
position: absolute;
page-break-after: always;
top: -50px; // compensating for #page top margin
width: 100%;
margin: 0;
}
.otherpages{ margin: 0 50px; }
I'm currently working on making my header and my footer fixed while my page content scrolls through. My body has overflow: hidden; currently. When I remove it I can scroll through the page, however, my header is no longer fixed at the top and my footer still covers the last bit of my page content. I'm pulling the content through php. How can I keep my header and footer fixed on the page, but still allow my PHP dynamic content appear completely?
My code:
CSS:
body {
margin: 0;
padding: 30px 0 40px 0;
overflow: hidden;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: red;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: white;
}
#page {
overflow: auto;
height: 100%;
}
HTML:
<head id="header">
<?php
include('incl/menuinc.php');
?>
</head>
<body>
<div id="page">
<?php
if (isset($_GET['page'])) {
switch ($_GET['page']) {
case 'example_page':
include('incl/pages/example.php');
break;
default:
include('home.php');
}
}
?>
</div>
<div id="footer">
<?php
include('footer.php')
?>
</div>
</body>
http://jsfiddle.net/q8j208eo/2/
*{ /*basic reset*/
margin: 0;
padding: 0;
}
html, body{
position: relative;
height: 100%;
min-height: 100%;
}
#header{
background-color: #ccc;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
#footer{
background-color: #ddd;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
}
#page{
box-sizing: border-box;
min-height: 100%;
padding-top: 40px;
padding-bottom: 60px;
background-color: yellow;
}
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!