I need a pdf to be generated with name being placed on top of an image at a particular place. I have written a working HTML code but mpdf is unable to load the stylesheets and the name is getting printed below the image.
Here is my code of php:
<?php
$html = file_get_contents('index12.html');
require_once __DIR__ . '/vendor/autoload.php';
$mpdf = new \Mpdf\Mpdf();
$stylesheet = file_get_contents('style.css');
$mpdf->WriteHTML($stylesheet, 1);
$mpdf->WriteHTML($html,2);
$mpdf->Output();
index12.html
<!-- <link rel="stylesheet" href="style.css"> -->
<div class="image">
<img src="yugmak.jpg" alt="" />
<h2>Kung Fu Panda</h2>
</div>
style.css
#font-face {
font-family: "Montez";
src: url("Montez.ttf");
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
font-family: "Montez";
font-size: 250px;
top: 2100px;
padding-left: 1050px;
width: 2000px;
}
Any way to make the css work in pdf would be great.
Related
I am having troubles to transfer my calculated php variable (which gives an output form -90 --> 90) to my css bar class (for a gauge). All the code is defined in the same php file
I want to do it with te following :
.bar { position: absolute; width: 50%; height: 100%; background-color: var(--black); transform: rotate(<?php echo $degree; ?>deg)>;
Tis is inside the style element. The value of degree is calculated below the style element inside a p element.
Could anybody help me
If you truly are "calculating it below", then CSS custom properties still work perfectly with this, you just use the value in your style, optionally with a default value, and then set the custom property value in the style attribute on the tag itself:
<style>
.bar {
position: absolute;
width: 50%;
height: 100%;
transform: rotate(var(--local-bar-transform, 0));
}
</style>
<?php
$degree = -10;
?>
<p class="bar" style="--local-bar-transform: <?php echo $degree; ?>deg">Lorem ipsum</p>
CodePen demo: https://codepen.io/cjhaas/pen/rNrgQoK
You can generate a separate stylesheet with the dynamic value and then include it in your HTML.
style.php
<?php
header("Content-type: text/css; charset: UTF-8");
$dynamicValue = ''; // Dynamic value of $degree
?>
.bar {
position: absolute;
width: 50%;
height: 100%;
background-color: var(--black);
transform: rotate(<?php echo $dynamicValue; ?>deg);
}
Then you need to include this stylesheet using the link element, like this.
<head>
<link rel="stylesheet" type="text/css" href="style.php">
</head>
I'm using PHP mpdf library for PDF export. But the HTML code alignment and position of all content changes when i export HTML to PDF.
Please explain how can I export the full HTML page as it is to the PDF page.
<?php $html='<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
body, html { height: 100%; margin: 0px; width: 100% !important;}
</style>
</head>
<body>
<center>
<div class="container" style="position: relative; width: 80%; left: 20%; display: block; text-align: center;">
<div style="position: absolute; left: 40%; width: 60%; text-align: center;">
<img src="p1/logo.png">
<h1 style="text-align: center;">TALENTX™</h1>
<h1>Profile</h1>
<h1>Aljoharah AlBabtain</h1>
<p>RESULTS REFERENCE REPORT JUNE 2020</p>
</div>
</div>
</center>
</body>
</html>';
require_once APPPATH . 'libraries/mpdf/autoload.php';
$mpdf = new \mPDF('utf-16','A4','');
$html = $this->load->view('reps/p1',null,true);
$mpdf->WriteHTML($html);
$mpdf->Output("files/test.pdf",'F');
The best way for aligning the HTML content in PDF export or for printout is the <table> approach. Put all your content in the table columns.
I use this approach and all my problem fixed.
I want to find a way to make hexagons be a good looking container for text at all window widths. At this point it only looks alright at a few window widths. I'd like to make it so that I can have code that will only show at the good width then hide itself when the screen width changes to a new range so that a new piece of code that does look good can take its place. How am I to do this?
My php code:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css"href="css/styleshexagon.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<?php
//for Medium screen width
print"<div class = \" d-none d-md-block d-lg-none\"\>\n";
$numHexes=3;
for($i = 0;$i<$numHexes;$i++)
{
print"<div class=\"hexagon \">\n";
print" <span class=\"text\">XYZ</span>\n";
print" </div>\n";
}
for($i = 0;$i<$numHexes;$i++)
{
print"<div class=\"hexagon \" style = \"
margin-left:auto ;
margin-bottom: auto;
\">\n";
print" <span class=\"text\">XYZ</span>\n";
print"</div>\n";
}
print"</div>\n";
//for Small screen width
/*Code for that goes here*/
?>
</body>
</html>
My SASS code:
$hex-size: 300px;
$hex-height: $hex-size / sqrt(3);
$hex-color: #C6538C;
.hexagon {
position: relative;
display:inline-block;
width: $hex-size;
height: $hex-height;
background-color: $hex-color;
margin: $hex-height/2;
margin-left:auto;
margin-bottom:auto;
left:-10px;
}
.hexagon .text {
position: absolute;
top: -80px;
left: 0;
font: 12px sans-serif;
color: #ff00ff;
width: $hex-size;
height: $hex-height;
text-align: center;
overflow: hidden;
line-height: $hex-height;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: $hex-size/2 solid transparent;
border-right: $hex-size/2 solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: $hex-height/2 solid $hex-color;
}
.hexagon:after {
top: 100%;
left: 0;
width: 0;
border-top: $hex-height/2 solid $hex-color;
}
It seems your asking for a few different things here. Displaying only certain elements at certain screen sizes, and formatting elements so they are suitable for most if not all screen sizes.
#media (max-width: 700px) {
.mydiv {
width: 100%; /* adds full width to mydiv which is best for mobiles */
display: block; /* displays mydiv as a block */
}
.mydiv-2 {
display: none; /* Doesn’t display mydiv-2 at screen sizes upto 700px */
}
}
Note that you can use both max-width and min-width
Hope this helps!
One possible solution is to use the #media CSS rule Which can apply different styling based on different display media. In your case, to customize based on screen size you could use the min-width and max-width properties.
This example would hide someElement if the screen was smaller than 200 pixels wide.
#media min-width: 200px {
someElement {
display: none
}
}
I'm currently running mikehaertl/phpwkhtmltopdf package to convert HTML to PDF. Using the demo data I appear to be having issues with the PDF rendering the correct page dimensions. I need the page to be filled with an A4 layout, but I'm getting a much smaller resolution output for some reason. I believe there is either a setting I'm not aware of or I'm missing something in the HTML/CSS?
The PHP I am running is:
$pdf = new mikehaertl\wkhtmlto\Pdf(
array(
'binary' => '/usr/local/bin/wkhtmltopdf',
'no-outline', // Make Chrome not complain
'margin-top' => 0,
'margin-right' => 0,
'margin-bottom' => 0,
'margin-left' => 0,
// Default page options
'disable-smart-shrinking'
)
);
$pdf->addPage($this->getOrderPrint($objectId));
// Save the PDF
$pdf->saveAs(dirname(__FILE__).'/test.pdf');
The getOrderPrint method is correctly returnin the below HTML:
<!DOCTYPE html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 21cm;
height: 29.7cm;
}
/* Printable area */
#print-area {
position: relative;
top: 1cm;
left: 1cm;
width: 19cm;
height: 27.6cm;
font-size: 10px;
font-family: Arial;
}
#header {
height: 3cm;
background: #ccc;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 3cm;
background: #ccc;
}
</style>
</head>
<body>
<div id="print-area">
<div id="header">
This is an example headernbmv.
</div>
<div id="content">
<h1>Demo</h1>
<p>This is example content</p>
</div>
<div id="footer">
This is an example footer.
</div>
</div>
</body>
</html>
Try to add 'page-size' => 'A4' to your wkhtmltopdf options.
I was following this tutorial to learn about the include and include_once functions in PHP.
The following files work just fine:
index.php:-
<?php
include_once 'header.php';
echo 'variable';
header.php:-
<h1>My Page's Header</h1>
But when I try to include the following .php file into my index.php, it does not produce the desired result. The header rather overlaps and thus completely hides the 'variable'
What I want is that after I include the header from an external file, My page should start underneath the header. The header included from external file should not be considered included in my page, so none of the elements are overlapped or such. How can I achieve that?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.top-bar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding: 5px;
}
.logo {
display: inline-block;
vertical-align: top;
color: white;
}
</style>
</head>
<body>
<div class="top-bar">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" alt="Logo" class="logo" >
</div>
</body>
</html>
<?php
include_once 'header.php';
?>
<div id="parent_div" >
<script>
function getHeaderHeight() {
return document.getElementById("top-bar").height(); //top-bar is in header.php
}
document.getElementById("parent_div").style.padding-top="getHeaderHeight()";
</script>
<h1>Heading</h1>
</div>
That's because your header is set to position: fixed;. It is taken out of the document flow and will follow you as you scroll arround.
When you want it to not stick to the client top, change your css to this:
.top-bar {
position: relative;
background: #000029;
padding: 5px;
}
If you like your header to be fixed, you may also set a padding to the body of the document, that equals the height of your header.
Here you see your current problem: http://jsfiddle.net/Lc3W8/
Solution 1: http://jsfiddle.net/Lc3W8/1/
body
{
margin:0;
padding:0;
height: 3000px;
/*new:*/
padding-top: 30px;
}
.top-bar
{
position: fixed;
left:0;
right:0;
top:0;
height: 30px;
background-color: blue;
}
Solution two: http://jsfiddle.net/Lc3W8/2/
body
{
margin:0;
padding:0;
height: 3000px;
}
.top-bar
{
height: 30px;
background-color: blue;
}