I am working on Codeigniter3 and using dompdf to generate pdf where I want to use watermark and logo. I set all things but not able to show images on pdf. First I was using img tag in html itself but it was not working so I added the code to apply the appropriate images in Pdf.php file in libraries folder but still it doesn't show images properly.
I did some research on it and found, need to enable 'isRemoteEnabled' option but when I apply this option, it throws error.
Below is my code
Controller function code
$html = $this->load->view('book_quiz_completion_certificate', $this->data, TRUE);
$this->load->library('pdf');
$this->pdf->createPDF($html, $book_title, true);
Pdf function
function createPDF($html, $filename='', $download=TRUE, $paper='A4', $orientation='portrait')
{
// Set options to enable embedded PHP
$options = new Options();
$options->set('isPhpEnabled', 'true');
$options->set('isRemoteEnabled', 'true');
//$options->set('tempDir', __DIR__ . '/site_uploads/dompdf_temp');
//$options->set('isRemoteEnabled', TRUE);
//$options->set('debugKeepTemp', TRUE);
//$options->set('chroot', '/'); // Just for testing :)
//$options->set('isHtml5ParserEnabled', true);
//$domPdf->setOptions($options);
$dompdf = new DOMPDF($options);
$contxt = stream_context_create([
'ssl' => [
'verify_peer' => FALSE,
'verify_peer_name' => FALSE,
'allow_self_signed'=> TRUE
]
]);
//echo '<pre> $options :: '; print_r($dompdf->getOptions()); die;
$dompdf->setHttpContext($contxt);
$dompdf->load_html($html);
$dompdf->set_paper($paper, $orientation);
// Render the HTML as PDF
$dompdf->render();
// Instantiate canvas instance
$canvas = $dompdf->getCanvas();
// Get height and width of page
$w = $canvas->get_width();
$h = $canvas->get_height();
// Specify oogo image
$logo_imageURL = FCPATH.'assets/uploads/images/143b8-f0b8b-86.jpg';
$logo_imgWidth = 20;
$logo_imgHeight = 20;
// Specify logo image horizontal and vertical position
$x = (($w-$logo_imgWidth)/5);
$y = (($h-$logo_imgHeight)/7);
// Add logo image to the pdf
$canvas->image($logo_imageURL, $x, $y, $logo_imgWidth, $logo_imgHeight);
// Specify watermark image
$imageURL = URL_PUBLIC_UPLOADS.'images/143b8-f0b8b-86.jpg';
$imgWidth = 400;
$imgHeight = 400;
// Set text opacity
$canvas->set_opacity(.5);
// Specify watermark image horizontal and vertical position
$x = (($w-$imgWidth)/2);
$y = (($h-$imgHeight)/4);
// Add watermark image to the pdf
$canvas->image($imageURL, $x, $y, $imgWidth, $imgHeight);
// Specify watermark image
$signature_imageURL = URL_PUBLIC_UPLOADS.'images/download.png';
//$signature_imageURL = FCPATH.'assets/uploads/images/download.png';
$signature_imgWidth = 60;
$signature_imgHeight = 60;
//$canvas->set_opacity(.5);
// Specify signature image image horizontal and vertical position
$x = (($w-$signature_imgWidth)/3);
$y = (($h+$signature_imgHeight)/2);
// Add signature image to the pdf
$canvas->image($signature_imageURL, $x, $y, $signature_imgWidth, $signature_imgHeight);
if($download)
$dompdf->stream($filename.'.pdf', array('Attachment' => 1));
else
$dompdf->stream($filename.'.pdf', array('Attachment' => 0));
}
For html, I am using following template
body {
font-family: Roboto;
}
.certificate-container {
padding: 50px;
width: 1024px;
}
.certificate {
border: 20px solid #0C5280;
padding: 25px;
height: 600px;
position: relative;
}
.certificate:after {
content: '';
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
position: absolute;
background-image: url(https://image.ibb.co/ckrVv7/water_mark_logo.png);
background-size: 100%;
z-index: -1;
}
.certificate-header > .logo {
width: 80px;
height: 80px;
}
.certificate-title {
text-align: center;
}
.certificate-body {
text-align: center;
}
h1 {
font-weight: 400;
font-size: 48px;
color: #0C5280;
}
.student-name {
font-size: 24px;
}
.certificate-content {
margin: 0 auto;
width: 750px;
}
.about-certificate {
width: 380px;
margin: 0 auto;
}
.topic-description {
text-align: center;
}
<div class="certificate-container">
<div class="certificate">
<div class="water-mark-overlay"></div>
<div class="certificate-header">
<img src="https://rnmastersreview.com/img/logo.png" class="logo" alt="">
</div>
<div class="certificate-body">
<p class="certificate-title"><strong>RENR NCLEX AND CONTINUING EDUCATION (CME) Review Masters</strong></p>
<h1>Certificate of Completion</h1>
<p class="student-name">Matthew Taylor</p>
<div class="certificate-content">
<div class="about-certificate">
<p>
has completed [hours] hours on topic title here online on Date [Date of Completion]
</p>
</div>
<p class="topic-title">
The Topic consists of [hours] Continuity hours and includes the following:
</p>
<div class="text-center">
<p class="topic-description text-muted">Contract adminitrator - Types of claim - Claim Strategy - Delay analysis - Thepreliminaries to a claim - The essential elements to a successful claim - Responses - Claim preparation and presentation </p>
</div>
</div>
<div class="certificate-footer text-muted">
<div class="row">
<div class="col-md-6">
<p>Principal: ______________________</p>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<p>
Accredited by
</p>
</div>
<div class="col-md-6">
<p>
Endorsed by
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Now, Both options for me is ok i.e. if it can allow img tag in html itself or it can add image from function itself.
Any help is really appreciated.
Thanks.
Related
am working on a codeigniter website and currently trying to achieve a layout like this where i have equal heights for all images in row but different widths.
My images are stored in a MYSQL database with url paths pointing to the directory where they are located. I have also stored their heights and widths (the height and widths are stored in pixels).
Here is the sql for fetching the contents in PhotoController
$data['data'] = $this->model
->select('photo_path, photo_height, photo_width')
->get()
->getResultArray();
Then in Home view, here is what i have so far. (using bootstrap 4 for styling)
<div class="container">
<div class="row">
<?php foreach ($data as $row) : ?>
<div class="col-md-4 col-lg-6">
<img src="<?= base_url($row['photo_path']); ?>" class="img-lazy img-fluid">
</div>
<?php endforeach; ?>
</div>
</div>
Am stuck on what to do next here.
html
<div class="masonry-with-columns-2">
<?foreach ($data as $row){?>
<div>
img here
</div>
<?}?>
</div>
scss
// Within style tags in your html file
body {
margin: 0;
padding: 1rem;
}
// SCSS
// Masonry layout horizontal
.masonry-with-columns-2 {
display: flex;
flex-wrap: wrap;
div {
height: 150px;
line-height: 150px;
background: #9B1B30;
color: white;
margin: 0 1rem 1rem 0;
text-align: center;
font-weight: 900;
font-size: 2rem;
flex: 1 0 auto;
}
#for $i from 1 through 36 {
div:nth-child(#{$i}) {
$h: (random(400) + 70) + px;
width: $h;
}
}
}
Source https://mdbootstrap.com/docs/angular/layout/masonry/
I use html2pdf to generate pdf with table data but I have some issue that I can't deal with. No matter how I set margins i always have some additional blank page at the end of pdf.
This is how looks like my pdf template :
<body>
<div class="page">
<div class="inner-page">
<div class="dealers-table">
<div class="head">
<div class="it">Lp.</div>
<div class="name">Name</div>
<div class="street">street</div>
<div class="post-code">Post Code</div>
<div class="city">City</div>
<div class="phone">Phone</div>
<div class="services">Services</div>
</div>
<div class="body">
<div>
<div class="it"></div>
<div class="name"></div>
<div class="street"></div>
<div class="post-code"></div>
<div class="city"></div>
<div class="phone"></div>
<div class="services"> /</div>
</div>
</div>
</div>
</div>
</div>
And css:
.page {
width: 210mm;
height: 280mm;
margin: 0 auto;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.inner-page {
padding: 5mm 10mm;
}
.dealers-table {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 6.5pt;
line-height: 1;
}
I don't set any margins in options of my Converter.
When I set page width less than 280px table from second page starts at the end of first page and additional blank page doesn't appear, in other situations there is always useless blank page.
How can I fix it?
EDIT 1
There is some code where I generate pdf on server side:
public function generatePdf() {
$autoDealers = $this->autoDealersOrServices(0);
(some function where i fetch array of dealers from my DB)
$autoDealers = view('pdf.template', [
'autoDealers' => $autoDealers
])->render();
$input = new StringInput();
$input->setHtml($view);
$converter = new Converter($input, new FileOutput());
$converter->setOption('landscape', false);
$converter->setOptions([
'printBackground' => true
]);
$output = $converter->convert();
$output->store('pdf/auto/dealers.pdf');
}
SyntaxEditor Code Snippet
"--encoding UTF-8 --page-size A4 --margin-left 10 --margin-right 10 --margin-top 20 --margin-bottom 0"
I want to make the following bootstrap code automatically show an overlay for two out of three options contained in a database field. They are SOLD, CONTRACT, and NO.
I want different overlays for SOLD and CONTRACT, and no overlay for NO
I have searched for overlays, most tutorials have on hover events, and I am lost as to how to do this.
<div class="row">
<div class="col-md-6 col-md-offset-3">
<a href="listing_show.php?ID=<?php echo($Recordset1->getColumnVal("ID")); ?>">
<img src="images/<?php echo($Recordset1->getColumnVal("IMAGE")); ?>" class="img-responsive center-block sold" alt="<?php echo($Recordset1->getColumnVal("TITLE")); ?>"/>
</a>
</div><br><br>
</div>
I worked it out through a couple of js fiddles on other questions here, if it helps anyone here is the code I added...
html
I added a thumbnail div and a caption div underneath the image both conditional on the contents of the database field.
<?php if($Recordset1->getColumnVal("SOLD") == "YES") { ?>
<div class="caption post-content-sold"></div>
<? } ?>
<?php if($Recordset1->getColumnVal("SOLD") == "CON") { ?>
<div class="caption post-content-contract"></div>
<? } ?>
Then in the CSS I added code to make the thumbnail relative, and then added the two classes to style the image relating to the database field
.thumbnail {
position: relative;
}
.post-content-sold {
background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
opacity: 0.8;
top:0;
left:0;
min-width: 100%;
max-height: 98%;
position: absolute;
color: #ffffff;
content:url(http://www.mtnlakerealty.com/sold.png);
}
.post-content-contract {
background: rgba(255, 255, 0, 1) none repeat scroll 0 0;
opacity: 1;
top:5%;
left:5%;
max-width: 50%;
max-height: 50%;
position: absolute;
color: #ffffff;
content:url(http://www.mtnlakerealty.com/contract.png);
}
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’m in the midst of creating a page that allows users to vote for one of two competing images. I’ve used the GD Star Rating plug-in for WordPress in the past, but am struggling with altering the output in accordance to my specifications. Ideally I would like to eliminate the thumbs down option, so users will only be presented with the thumbs up option for both of the images. It appears that the CSS style code is created dynamically through PHP. Assuming that this is what it is called. Typically I would merely alter the CSS code and comment out the section that outputs the thumbs down image, but I’m not entirely sure what to do in this case. I’ve tried to comment out the lines that deal with the thumbs down CSS (i.e., gdthumb.gddw), but it doesn’t appear to have an effect. Ideas?
<?php
if (count($thumb_sets) > 0 && count($thumb_sizes)) {
foreach ($thumb_sizes as $size) {
echo sprintf(".gdt-size-%s.gdthumbtext { line-height: %spx; }\r\n", $size, $size);
echo sprintf(".gdt-size-%s.gdthumb, .gdt-size-%s.gdthumb a, .gdt-size-%s.gdthumb div { width: %spx; height: %spx; }\r\n", $size, $size, $size, $size, $size);
echo sprintf(".gdt-size-%s.gdthumb.gddw a, .gdt-size-%s.gdthumb.gddw div { background-position: 0px -%spx !important; }\r\n", $size, $size, $size);
echo sprintf(".gdt-size-%s.gdthumb.gdup a:hover { background-position: 0px -%spx; }\r\n", $size, 2 * $size);
echo sprintf(".gdt-size-%s.gdthumb.gddw a:hover { background-position: 0px -%spx !important; }\r\n", $size, 3 * $size);
foreach ($thumb_sets as $set) {
$url = ($set["location"] == 1 ? $base_url_local : $base_url_extra)."thumbs/".$set["folder"]."/thumbs".$size.".".$set["type"];
echo sprintf(".gdt-size-%s.gdthumb a.gdt-%s, .gdt-size-%s.gdthumb div.gdt-%s { background: url('%s') no-repeat; }\r\n", $size, $set["folder"], $size, $set["folder"], $url);
}
}
}
?>
Related HTML
<div id = "rateA" style="width:285px; float:left">
<div style="display: none">VA:F [1.9.22_1171]</div>
<div class="thumblock "><div id="gdsr_thumb_288_a_up" class="gdt-size-40 gdthumb gdup">
<a id="gdsrX288XupXaX25X40XY" class="gdt-starrating" rel="nofollow"></a></div>
<div id="gdsr_thumb_288_a_loader_up" style="display: none; width: 40px " class="ratingloader loadup">
<div class="loader flower thumb" style="width: 40px; height: 40px;"></div></div>
<div id="gdsr_thumb_288_a_dw" class="gdt-size-40 gdthumb gddw">
<a id="gdsrX288XdwXaX25X40XY" class="gdt-starrating" rel="nofollow"></a></div>
<div id="gdsr_thumb_288_a_loader_dw" style="display: none; width: 40px " class="ratingloader loaddw">
<div class="loader flower thumb" style="width: 40px; height: 40px;"></div></div>
<div class="ratingtext ">
<div id="gdsr_thumb_text_288_a" class="gdt-size-40 gdthumbtext">Rating: <strong>0</strong> (from 0 votes)</div></div><div class="raterclear"></div></div>
Generated CSS
.gdt-size-40.gdthumb, .gdt-size-40.gdthumb a, .gdt-size-40.gdthumb div {
height: 40px;
width: 40px;
}
.gdthumb {
float: left;
position: relative;
}
In order to remove the thumb images (i.e., Thumbs Up or Thumbs Down) you should alter the render.php file. I was unable to accomplish this task when merely changing the PHP file that dynamically creates the CSS.