I have this PHP file that can 'create' course certificates with custom names passed through $_GET.
The goal is to get the file output into any printable format and download all of the certificates in one (.zip) file.
The problem is that the name's width are dynamic, and the name must match div width.
This is a sample code:
<html>
<head>
</head>
<body style="background-image: image; background-image-size: 100% 100%; width: 1200px; height: 1200px;">
<div class="name_1" style="width: 250px; height: 80px; margin-top: 400px; margin-left: 500px;">
<p><?php echo $_GET['name_1']; ?></p>
</div>
<div class="name_2" style="width: 250px; height: 80px; margin-top: 900px; margin-left: 500px;">
<p><?php echo $_GET['name_2']; ?></p>
</div>
</body>
I have achieved this dynamic text resizing to fit div width with jQuery.
The big problem is that I need to load page by page for 100+ pages to get this dynamic text re-sizing...
So, is there any way of re-sizing all the pages names and download all of them in one click?
Grab the page screenshot(s) using wkhtmltopdf framework, documentation here. It will execute the script on page load, you even have parameter to prolong time for script execution.
--javascript-delay (default to 200ms)
You have a PHP interface, but you can simply use PHP exec this way:
exec("wkhtmltopdf test.html output.pdf")
For creating ZIP libraries, you can find examples here.
FPDF and its derivatives have GetStringWidth() method. If you use the right font, you can get it from this method. A font must be selected using SetFont() before calling this method. There is a set of standard fonts included (Arial, Times, Courier, Symbol and ZapfDingbats), if yours is not one of them, you have to add it: http://www.fpdf.org/en/tutorial/tuto7.htm
$string = "This is a text";
$fpdf = new FPDF();
$pdf->SetFont('Arial','B',16);
echo $fpdf->GetStringWidth($string);
Related
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 kindly ask you for your ideas: I would like to generate a div depending on the size of the window height.
I have created the following script to extract the height via a javascript. I then transform the value to a PHP variable, which I try to insert into the corresponding CSS sheet. When I enter a fixed number (e.g. 800px) the div displays correctly. When I try to use the PHP variable, I don't see anything.
Would you please help me?
Thank you.
<script type="text/javascript">
<!--var w = screen.width;-->
var w = window,
x = w.innerWidth,
y = w.innerHeight;
<?php $screen_height = "<script>document.write(y)</script>";?>
</script>
<style type="text/css">
#map { width: auto; height: 800px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
My solution was:
#map { width: auto; height: <?php echo $screen_height;?>px; border: 0px; padding: 10px; padding-top: 10px; padding-right: 10px; margin-right: 10px;}
Thank you for your help.
Best regards.
Try to use:
<?php echo $screen_height; ?>
instead of:
<?php $screen_height = "<script>document.write(y)</script>";?>
you cannot use JS in CSS!
Your javascript is executed in the browser, while the PHP is executed on the server. The page is already rendered in the browser by the time the javascript figures out what size the screen is. If you need to change the size of a div based on display screen size, just modify the size of the div with your javascript function.
javascript executes on the client, whereas php code is executed on the server side. store the required width and height in a javascript variable
<script type="text/javascript">
function myfun()
{
var w=100;
var h=200;
document.body.innerHTML = '<div style="position:absolute;width:'+w+'px;height:'+h+'px;opacity:0.3;z-index:100;background:#000;"></div>';
}
</script>
<body>
<div id="d1">hello this is div 1</div>
<button id="b1" onclick="myfun();">click</button>
</body>
you can use the javascript itself to load the div and assign the css properties.
create a file like style.css.php
Start the file with
and then treat it like a normal CSS file, but you will be able to use php values in it.
You will not be able to use javascript in it however, but you will be able to pass values to it by request so you can request style.css.php?windowSize=800.
Ideally though it would be better to simply use javascript to alter a class, or use media queries.
what exactly you want to do? if you just need the div size to be related to the window size you could simply use a percentage (example css, height:90%). if you want to change the div size after the DOM has loaded you'll need some javascript.
I build bar codes using jquery in a div in my web app.
The black bars are contructed as a set of div tags with their background as black or white as follows,
<div style='padding: 0px; overflow: auto; width: 194px;' id='bar1'>
<div style='float: left; font-size: 0px; background-color: #FFFFFF; height: 40px; width: 60px'>
<div style='float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 40px;'>
I have tried multiple PHP packages (htmp2pdf, dompdf, tcpdf) to convert this to PDF but come up with either a blank PDF or an error as it sees nested div in the content.
Can anyone tell me how can I convert these generated barcodes to PDF suing PHP?
Try wkhtmltopdf which is a simple shell utility to convert html to pdf using the webkit rendering engine.
To use it, unpack it and run it like this:
> wkhtmltopdf www.mydomain.com/barcode3 barcode3.pdf
Basically, it will run over n HTML pages and generate PDF's without the overhead of purely dynamic PDF generation!
This might offer you a solution, but you'll need to check the requirements and see if it fits with your server constraints. It worked really well when we used it for producing accurate reports directly from HTML.
EDIT: EG, running it as a potential user function from within PHP:
For Linux:
exec("wkhtmltopdf http://mydomain.com /home/user/$user.barcode3.pdf 2>&1");
For Windows:
<?php
exec('C://path/to/package//wkhtmltopdf http://mydomain.html barcode3.pdf');
echo "PDF Created Successfully";
?>
Would it help if you used <img> data instead of drawing the bars with <div> rectangles? Not sure if you need Code 128 or another symbology, but there is a complete set of inline (base64) Code 128 images at http://notionovus.com/blog/code-128-barcode/.
I initially tried to generate barcodes by drawing rectangles, but found that letting the browser do the scaling saved me a lot of work. Sounds like the <div> tags have their down side as well.
I need my administrator to be able to change/update the banner of my site.
This is the banner code
<div class="containertop">This depends on the background of the div</div>
and this is the CSS for that
.containertop
{
width:1000px;
height:300px;
**background:url(../images/1.png) no-repeat center;**
margin: 0 auto;
margin-top: 40px;
}
What I would like to happen is the same as a Facebook cover photo.
When a new banner is uploaded, the CSS will be updated(something like that).
But of course, the new banner must be fetched from the database.
So I am thinking that the CSS would become like this:
Fetch the saved banner source and then:
background:url(<?php echo $row['image']; ?>);
but can I do the PHP connection to database (include 'dbname.php') inside a CSS txt?
There's nothing preventing you to serve a css generated by PHP. That's even easy.
Simply start your php file like this :
<?php
header("Content-Type: text/css");
I agree with Ben. If you make a little embedded css section in your page, you could put the .containerTop css code there. Then, put your code in the page.
So, in your actual web page, put this:
<style type="text/css">
.containertop{
width:1000px;
height:300px;
background:url(<?php echo $row['image']; ?>);
margin: 0 auto;
margin-top: 40px;
}
</style>
Of course, your background url will not update until it is reloaded. If you decide to do it this way, don't forget to take the .containerTop definition out of your existing css.
Having said all that, I really like dystroy's answer. Very nice. I never thought of doing that.
You can set containertop background while loading php file.
<?php
echo "<style>.containertop{ background:url(../images/".$row['image'].") no-repeat center;}</style>"
?>
This will set the background fetched from db.
Well, You can use jQuery to change/overwrite the CSS file.
Example -
$('.containertop').css('backgroud','url(images/change.jpg) repeat');
or
$('.containertop').css('backgroud','url(<?php echo $images_url ?>) repeat');
I am looking for a solution to deliver a "wallpaper" banner with the adserver "openx". A wallpaper consists of a leaderboard banner (728x90 px) and a vertical skyscraper. I cant find any option in OpenX itself, so I guess there must be some kind of dirty methods to get it done.
Anyone here having experiences with it? I'm thinking of delivering just an leaderboard banner and then attaching a html snipped to the banner - which contains the markup to my skyscraper-banner... :-/
greg0ire > You can see an example of a "wallpaper" banner on this site (you might experience an overlay banner before, make sure you disable ad blocking extensions): http://www.allocine.fr/ Some days it is in flash, other days it is just a background-image css property set on the body element. I'd like to achieve the second option.
Thanks!
I got wallpapers ads to work through openx using this method.
First I created a div below the content wrapper of my site (using wordpress, header.php file).
<div id="adbg" style=" margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor:pointer; ">
Then I created a div block with the wallpaper image in the CSS and added it to OpenX as a TEXT BANNER
<div OnClick="location.href='#';" style="background: url('image.jpg') no-repeat scroll center top #026eb4; height: 100%; width: 100%; margin: 0pt auto; cursor:pointer; "></div>
Finally, I took the openx embed code and place it within the ADBG div I pasted above.
This technique worked well for me on all browsers.
You can of course take the CSS in the adbg div and store it in your CSS file.
For the moment, I ended up doing this, but I'd like to see better solutions:
<div class="openx_<?php echo $_block->getBlockParameter('css_class');?> openx_background hidden">
<?php echo str_replace('INSERT_RANDOM_NUMBER_HERE', rand(0, 9000), $_block->getBlockParameter('html', ESC_RAW));?>
<?php echo javascript_tag()?>
var checkImg = window.setInterval(function(){
if (jQuery('.openx_background img').length)
{
jQuery("body").css('background', 'url("' + jQuery('.openx_background img').attr('src') + '") no-repeat');
window.clearInterval(checkImg);
}
}, 1000);
//give up 3 s later
setTimeout(function(){
if (jQuery('.openx_background img').length == 0)
{
clearInterval(checkImg);
}
}, 3001);
<?php echo end_javascript_tag()?>
</div>
$_block->getBlockParameter('html', ESC_RAW) contains the openx javascript invocation code.
Not sure if this is still of interest, but there's a setting in openX for that called "Companion positioning". Have a look at the OpenX reference guide under point 4.6:
http://opensourceusers.com/sites/default/files/openx_reference_guide.pdf
It's a method to make sure that a skyscraper is delivered every time a certain leaderboard is delivered. You can then use the prepend/append functionality to color the background to turn this "hockey stick" into a full blown wallpaper.