I have this HTML page and this PDF page generated by a PHP script using DOMPDF.
As you can see the margins and spacings are not the same.
Any suggestion to make a correct page?
This worked for me:
<style>
#page { margin: 0px 0px; }
</style>
Related
I wanted to change background image on phpMyAdmin login page (index.php), but I have no idea how I'm supposed to do it. I tried to add <style> elements by echoing them in /phpmyadmin/libraries/plugins/auth/AuthenticationCookie.php file, but it adds items after <body> tag.
Thanks to Phil I've managed to modify /phpmyadmin/themes/pmahomme/css/common.css.php file, and I've found where I can change the CSS code to properly add a background picture to the login form. In my file it was placed on lines 871-875:
body#loginform {
margin-top: 1em;
text-align: center;
background-image: url("<file>");
}
I know: opinion-based stuff shouldn't be asked etc., but this isn't about opinion, but for now simply about what still exists or rather what will still work today.
My concern: I am looking for a solution to generate one-page pdf files from PHP/HTML pages that get their content from a database and are rather heavily styled with CSS (also including tabular data and images). A function that lets you open or download the PDF when clicking on a link. The PDF should just basically look the same as the corresponding webpage at size A4 (I'll style it that way). As if you choose "preview/save as PDF" in MacOS' printing dialog, but without the user needing any particular software, working on any OS and browser.
I searched SO and the web, and I found a lot of old posts and pages (3 years and much older), like Convert HTML + CSS to PDF with PHP? , Generate PDF report from php and Generate PDF from HTML PHP I can't see in these posts if any of this is still up-to-date / working.
So I'd have to download all that stuff and build it into my pages, maybe only find out that it doesn't work anymore or isn't really applicable for my situation.
Could people who have experience with that kind of stuff please point me to places where I can find scripts/libraries which are able to do this and work with PHP 5.6 and 7? It doesn't have to support CSS3, I can restrict these pages to CSS2, and although I am using webfonts on that website, I can get along without them for the PDFs. Possibly for free, but also a not-too-expensive commercial solution would be okay. I'd be very grateful for any help.
You can use the mpdf library. It's very easy to learn. Here is the sample code.
It works perfectly.
You can get value from another page, using post method also. Your choice.
<?php $student_id = $_GET['student_id']; ?>
<?php
include("mpdf/mpdf.php");
$html .= "
<html>
<head>
<style>
body {font-family: sans-serif;
font-size: 10pt;
background-image: url(\"images/ok.jpg\");
background-repeat: no-repeat;
padding-top:10pt;
margin-top: 100px;
padding-top: 50px;
}
td { vertical-align: top;
border-left: 0.6mm solid #000000;
border-right: 0.6mm solid #000000;
align: center;
}
p.student_id{
padding-left : 140px;
padding-top : -27px;
}
</style>
</head>
<body>
<!--mpdf
<p class=\"student_id\">$student_id</p>
<sethtmlpageheader name='myheader' value='on' show-this-page='1' />
<sethtmlpagefooter name='myfooter' value='on' />
mpdf-->
</body>
</html>
";
$mpdf=new mPDF();
$mpdf->WriteHTML($html);
$mpdf->SetDisplayMode('fullpage');
$mpdf->Output();
?>
I can't find anything that works for me, and since I'm a cut and paste html editor (I know only the main basic stuff), I don't understand most of the other posts. This is the webpage I'm working with: http://goo.gl/MgsoX4 (I'm hosting it on dropbox because I haven't finished it yet). I had the idea of having a background change every time some refreshed/reloaded the page. I can't seem to find anything that works for me. The CSS for the background is the following:
#banner {
background-attachment: scroll, fixed;
background-color: #666;
background-image: url("images/overlay.png"), url("../images/1.jpg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
color: #fff;
padding: 12em 0 20em 0;
text-align: center;
}
Whenever I change "../images/1.jpg" to "../images/2.jpg", the background will change to the second jpg, but I've tried a php image rotator and it won't work!
The issue you're having is that you're trying to define the image inside of the stylesheet. In order to create a random background image, it will have to be attached as an inline style.
Keep the css how you currently have it for a fallback. You would then have the div look something like this:
<div id="banner" style="background-image:url("images/newImage.jpg");"></div>
#Steve-Sanders comment is also correct in that you will need an actual server to run PHP.
Inside of your PHP page, inside of the head tag, you could alter the #banner style. Because CSS is cascading, doing this will override anything inside of your external style sheet
my_style_sheet.css
#banner {
background-attachment: scroll, fixed;
background-color: #666;
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
color: #fff;
padding: 12em 0 20em 0;
text-align: center;
}
my_page.php
<head>
<link rel="stylesheet" type="text/css" href="my_style_sheet.css" />
<style type="text/css">
#banner {
background-image: url('images/<?php echo rand(0, 5); ?>.jpg');
}
</style>
Javascript example
...
<div id="banner"></div>
<script type="text/javascript">
document.getElementById('banner').style.backgroundImage = "url('images/'" + Math.ceil(Math.random() * 5) + ".jpg')";
</script>
If you want to use JQuery you can paste this code in the head section of your html page or just before the closing tag of your page.
I dowloaded your files and changed the file path for the img and it worked fine for me. everytime I hit f5 you will get a new background image
<!-- place in head element or before closing--> <!-- </body> tag of html page -->
<!--load JQuery first-->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
//the highest number of the image you want to load
var upperLimit = 10;
//get random number between 1 and 10
//change upperlimit above to increase or
//decrease range
var randomNum = Math.floor((Math.random() * upperLimit) + 1);
//change the background image to a random jpg
//edit add closing ) to prevent syntax error
$("body").css("background-image","url('images/" + randomNum + ".jpg')");//<--changed path
});
</script>
It won't work, unless your page is in PHP. You need to use javascript/ajax instead to rotate the images.
PHP requires a server that can execute the code. Dropbox doesn't execute the code because it isn't supposed to. Instead it just serves the html the way it was uploaded, if you check the DOM you will see the php tags. When served by a proper server that executes php the tags are removed.
Edit: change the html file's extension to "php" so that it looks like "index.php"
A simple solution to this could be,
before doctype
<?php
$bgimage = array('originals/background-01.png', 'originals/background-02.png', 'originals/background-03.png', 'originals/background-04.png', 'originals/background-05.png', 'originals/background-06.png');
$i = rand(0, count($bgimage)-1);
$mybgimage = "$bgimage[$i]";
?>
and inside style call
background: url(images/<?php echo $mybgimage; ?>) no-repeat;
This code creates a pdf from html. Here is an example. How to make the background image on the second page like on the first page?
$mpdf = new mPDF('utf-8','A4','8','',10,10,22,22,10,20);
$html = '<div id="for_pdf">
<h3>some text</h3>
...
<h3>some text</h3>
</div>';
$stylesheet = file_get_contents('./static/css/print.css');
$mpdf->WriteHTML($stylesheet,1);
$mpdf->list_indent_first_level = 0;
$mpdf->WriteHTML($html,2);
$mpdf->Output("$doc_name.pdf",'D');
Part of print.css file:
#for_pdf{
background-image: url("/static/image/pdf_img/big_logo.gif");
background-repeat: no-repeat;
background-position: center;
}
I know this is an old question but the solution is to use the #page selector in CSS.
#page {
background: url("/static/image/pdf_img/big_logo.gif") 50% 0 no-repeat;
}
*I turned your CSS into shorthand but does the same thing.
The above code should be added to your css file or inside tags in your html file.
#page should also be the first call in the css otherwise mPDF will ignore it.
Using #page will make changes to every page no matter how many you have. You can also do some more cool stuff by doing "#page :first {}" which allows you to put custom settings for just the first page and then use regular #page to affect the rest differently from the first.
I am using this code:
<?php
header("Content-type:image/gif");
And some PHP gd code below to generate the image
?>
The problem is that the page title is set to an image of width x height. Is there a way to change the page title, without using the following?
<img src='link'/>
NOTICE: I don't need to use any JavaScript code or external file.
Wrap the image's new window in html. I'm assuming from the question's poor wording that you are opening a new window with "just the image" as its content?
If so, just wrap it via HTML. Unless a browser is not consuming the result, in which case you need to be more specific to the process / purpose.
The text you see in the title of a page like this is determined by the browser. You can't change it via PHP. When rendering an HTML page, the browser looks for the title element, however, in everything else, it chooses the title based on attributes of the page you're viewing. As you guessed it, the only alternative is to create an HTML page and reference the image through an img tag and changing the title through the title tag.
You can create an html page, with an iframe (size = 100%), that embeds the image. Then you can then set the title in the HTML page.
Example:
<html>
<head>
<title>YOUR TITLE</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: none; padding-top: 32px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<iframe src="http://www.nbc.com/"></iframe>
<body>
</html>