I am trying to convert a complete webpage as-is to PDF as part of my final year university project, and have found MPDF extremely useful for this task, however I'm struggling a little with the presentation of the actual output.
The page itself looks like below:
and I would like it to be presented exactly as it is above when converted to PDF, however converting seems to remove all styles from the document, presenting it like so:
The code I have used to convert the page is below:
<?php
ob_start();
include("checklog.php");
require_once("watchlist-controller.php");
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="img/fav.ico">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<title>Screening - Your ticket to your movies - <?php echo $watchlist_name; ?></title>
<meta name="description" content="Screening is a brand new take on the traditional movie database, fusing social networking and multimedia to provide a clear, concise experience allowing you to share your favourite movies, and discover new classics.">
<meta name="keywords" content="Movies, Films, Screening, Discover, Watch, Share, experience, database, movie database, film database, share film, share films, discover film, discover films, share movie, share movies, discover movie, discover movies">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/custom-bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="fonts.css" type="text/css" />
<link rel="stylesheet/less" type="text/css" href="css/stylesheet.less" />
<script src="js/less-1.3.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Start Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- End Google Analytics -->
</head>
<body>
<div class="container"><?php
require_once ("header.php");?>
<div id="main" class="well main-content">
<p class="page-title"><?php echo $watchlist_name; ?></p>
<div class="row-fluid">
<section class="span12 watchlist-holder film-list"><?php
if (count($films) == 0) {?>
<div class="alert alert-info">This Watchlist is empty! Why not visit a movie page to add something to it?</div><?php
} else {?>
<ul class="unstyled"><?php
foreach($films as $key => $film_item) {
include("watchlist-film-controller.php");?>
<li class="well list-item clearfix">
<div class="row-fluid">
<img src="<?php echo $poster_thumb; ?>" alt="<?php echo $title; ?> poster" title="<?php echo $title; ?> poster" />
<div class="span11 movie-info">
<p class="search-title"><?php echo $title; ?> <small>(<?php echo $year; ?>)</small></p><?php
if ($critics_consensus == "") {?>
<p class="watchlist-synopsis">No overview available</p><?php
} else {?>
<p class="watchlist-synopsis"><?php echo $critics_consensus; ?></p><?php
}?>
</div>
</div>
</li><?php
}?>
</ul><?php
}?>
</section>
</div>
</div><?php
include 'footer.html'; ?>
</div>
</body>
</html><?php
$HTMLoutput = ob_get_contents();
ob_end_clean();
//Convert HTML 2 PDF by using MPDF PHP library
include ("mpdf/mpdf.php");
$mpdf=new mPDF();
$mpdf->WriteHTML($HTMLoutput);
$mpdf->Output();?>
I'm not the most experienced of PHP coders, and I'm still learning much as I go along, so any pointers would be appreciated. I'm not sure if the way I've attempted to convert using MPDF is the best way to approach the problem, either, which may be an issue.
Related
Hey i don't understand my website doesn't work i have don't do anything so i will explain
I got a 0 in top on my page now!
Google Chrome Explorator:Screenshot
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.wisementrade.com%2F
View/header.php: https://pastebin.com/7GqFYR75
View/homepage.php: https://pastebin.com/3htmFSmw
View/footer.php: https://pastebin.com/b3X9KScg
Controller/View.php: https://pastebin.com/cxCdcdEQ
Chrome viewer code: https://pastebin.com/Q8VYja5u
I have check the encode UTF-8 and i have re encode UTF-8 with my sublime text but nothing change ... please need help
EDIT: FIXED
I guess unclosed HTML tag cause this problerm. I found a few unclosed HTML tag in your View/header.php. Close it. try this.
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--o-->
<?php
//Session
$customer_id = $this->session->userdata('customer_id');
$user_type = $this->session->userdata('user_type');
$statement = $this->session->userdata('timezone');
?>
<!--o-->
<link rel="icon" type="image/png" href="<?php echo base_url('images/favicon.png'); ?>" />
<meta name="author" content="Wise Men Trade" />
<meta name="copyright" content="Copyright Notice ©2015 WisemenTrade Limited and licensors. All rights reserved." />
<meta name="robots" content="all" />
<!--o-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link href="<?php echo base_url("css/bootstrap.min.css"); ?>" rel="stylesheet"/>
<!-- Basic CSS -->
<link href="<?php echo base_url("css/style.css"); ?>" rel="stylesheet"/>
<!-- Responsive CSS -->
<link href="<?php echo base_url("css/responsive.css"); ?>" rel="stylesheet"/>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="<?php echo base_url("css/owl-carousel/owl.carousel.css"); ?>"/>
<!-- Default Theme -->
<link rel="stylesheet" href="<?php echo base_url("css/owl-carousel/owl.theme.css"); ?>"/>
<!-- MS DROP DOWN -->
<link rel="stylesheet" href="<?php echo base_url('css/msdropdown/flags.css'); ?>"/>
<link rel="stylesheet" href="<?php echo base_url('css/msdropdown/dd.css'); ?>"/>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62333409-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body>
<!--top-header-->
<header>
<div class="header_block">
<!-- left -->
<div class="block_left">
<a href="<?php echo base_url(); ?>">
<img src="<?php echo base_url("images/log_wmt.png"); ?>" class="logo" width="130" height="130" alt="Logo Wise Men Trade" />
</a>
</div>
</div>
</header>
also in your Controller/View.php have a few unclosed div (<div id="container"> and <div class="block_content">). check it and close it.
the last, make sure at the end of your Controller/View.php have a :
</body> <!-- end of body -->
</html> <!-- end of html -->
According to the documentation (https://www.codeigniter.com/user_guide/general/views.html), you could load multiple views in your controller, I think it doesn't work if you load it in the view, so you should have something like this:
<?php
class Page extends CI_Controller {
public function index()
{
$data['page_title'] = 'Your title';
$this->load->view('header');
$this->load->view('menu');
$this->load->view('content', $data);
$this->load->view('footer');
}
}
I have a php site. I have been given code for an auto-sizing ad from google adsense. I have put this within a "div" to align it, and have created a function to echo the adsense code within my php script;
<html>
<head>
<title>MY WEBSITE</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<?php include("title.php"); ?>
<?php
$googleadsensecode = ' //a function for the adsense code.
<div align="center"> //<div> to align the ad.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive_TextnDisplay_20160127 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9232383262111727"
data-ad-slot="4287484293"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>';
echo $googeladsensecode;
</body>
</html>
However the ad is taking up the whole page, and thus is presumably not picking up on the remaining website's content.
What is the error in my code or my approach?
I'm having trouble with creating some sort of indicator on a webpage.
This should show me if something is turned on or off.
My project concerns on making a "automatic" terrarium controller, with sensors, relays and a raspberry. I'm able to show the sensor readings on a website, updating every minute (using jQuery).
At certain times, some relays are activated (which still has to be done, relay arrived today) and I want to see on the site if relay 1 is activated or not and again, updated automatically when this changes. The program to activate some relays is in python, and will also write a txt-file, containing a "0" or a "1" (for "off" and "on").
Then, using for instance a switch (e.g. switch) which should show the state of the relay, according to the txt file.
But, I don't seem to get it working.
Using PHP If and Else statements, ends up showing both even when using simple images as "indicators" of the relay.
<?php
$myfile = fopen("./statusUV.txt", "r") or die("Unable to open file!");
$status= fread($myfile);
if ($status == 1){
print ('<img src=./images/on.png />');
}
else{
print ('<img src=./images/on.png />');
}
But, how can different div's been shown, in case of this switch?
Oh, and I have to say, I'm new to PHP, HTML, Python, jQuery etc.
The "button" doesn't have to be clickable, it just have to show the state of the relay (or the output in the file).
If more information is needed, please, let me know!
Thanks in advance!
<!DOCTYPE HTML>
<html>
<head>
<title>UV</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<?php
$myfile = fopen("./statusUV.txt", "r") or die("Unable to open file!");
$status= fread($myfile);
fclose($myfile);
switch(intval($status)){
case 0 : $img = "<img src='./images/off.png' />"; break;
default : $img = "<img src='./images/on.png' />";break;
}
?>
</head>
<body class="left-sidebar">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Nav -->
<nav id="nav">
<ul>
<li class="active">Data</li>
<li>UV timer</li>
<li>Heat Timer</li>
<li>Led Timer</li>
<li>Sproeier Timer</li>
<li>Apparaten</li>
</ul>
</nav>
</div>
<div id="logo-wrapper">
<div class="container">
<!-- Logo -->
<div id="logo">
<h1>Timer<span class="tagline"> voor Sproeier</span></h1>
</div>
</div>
</div>
</div>
<!-- /Header -->
<!-- Main -->
<div id="main-wrapper">
<div class="divider"> </div>
<div id="main">
<div class="container">
<div class="row">
<div id="sidebar" class="4u">
<?php
if (isset($img)){
echo $img;
echo $status;
}?>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divider"> </div>
<!-- /Wrapper -->
<div id="copyright">
<div class="container">
<p style="font-size:11px">Design: TEMPLATED Images: Unsplash (CC0)</p>
</div>
</div>
</body>
</html>
Assume the var $status = 1 or 0 in the text file.
Your code must be like that :
<html>
<head>
<?php
$myfile = fopen("./statusUV.txt", "r") or die("Unable to open file!");
$status = fread($myfile);
fclose($myfile);
switch(intval($status)){
case 1 : $img = "<img src='./images/on.png' />"; break;
default : $img = "<img src='./images/off.png' />"; break;
}
?>
</head>
<body>
<?php
if (isset($img)){
echo $img;
}?>
</body>
</html>
Some PHP-problems has been solved by reseting the server. Apparently that would fix the strange code appearing on the site.
Now, after testing various things, it appears that $status remains empty. After trying various techniques, I found that fgets($myfile) would do the trick, instead of the fread($myfile)! Thanks everyone for helping!
I am using add this to share content from my site www.halisi-kenya.com but it is posting the wrong image thumnails any one to help.Then secondly my url is showing funny characters at the end http://www.halisi-kenya.com/entry.php?id=55#.UoIPEnD0CyY anyone to help
<?php
include('admin/db_connections/aardb_conn.php');
$query = "SELECT * FROM blog WHERE autoid=".$_GET['id'];
$result = mysql_query($query) or die('Error : ' . mysql_error());
$row = mysql_fetch_array($result, MYSQL_ASSOC);
$title = $row['title'];
$intro = $row['intro'];
$date = $row['timestamp'];
$user = $row['userid'];
$content = $row['body'];
$image1 = $row['image'];
$autoid = $row['autoid'];
$queryi = "SELECT * FROM users WHERE autoid=".$row['userid'];
$resulti = mysql_query($queryi) or die('Error : ' . mysql_error());
$rowi = mysql_fetch_array($resulti, MYSQL_ASSOC);
$fname = $rowi['fname'];
$lname = $rowi['lname'];
$author=$fname." ".$lname;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title><?php echo $title; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Halisi Kenya - It's a lifestyle">
<meta name="keywords" content="Halisi kenya,<?php echo $title; ?>">
<meta name="description" content="<?php $Name = strip_tags($content);
echo $Name;?>">
<meta name="author" content="Billy Ochieng">
<meta name="copyright" content="Halisi Kenya">
<meta http-equiv="Reply-to" content="info#halisi-kenya.com">
<!-- Custom Styles Styles -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Raleway:300,500' rel='stylesheet' type='text/css'>
<!-- Support for HTML5 -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Enable media queries on older browsers -->
<!--[if lt IE 9]>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-45485412-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=538741216211393";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="container">
<header id="breadcrumb">
<ul class="breadcrumb breadcrumb-light breadcrumb-divider-middot">
<li>Home</li>
<li><?php echo $title; ?></li>
</ul>
</header>
<aside class="two-col">
<header class="title2 big-title col-sm-12 col-lg-12">
<h2><?php echo $title; ?></h2>
</header>
<article class="blog-wrap content col-sm-12 col-lg-12">
<div class="blogimg">
<img class="media-object" alt="" src="admin/<?php echo $image1; ?>">
</div>
<p><strong class="text-success"><?php echo $intro; ?></strong></p>
<p> <?php echo $content; ?></p>
<div class="post-tags">
<?php echo $date;?>
</div>
<section class="comments">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508e4b7b0cb342b4"></script>
<!-- AddThis Button END -->
</section>
<div class="post-author">
<h3>By <strong><?php echo $author;?> </strong></h3>
<div class="clearfix"></div>
</div>
</article>
<section class="comments">
<div class="fb-comments" data-href="http://www.halisi-kenya.com/entry.php?id=<?php echo $autoid;?>" data-numposts="5" width="600"></div>
</section>
</body>
</html>
You need to define meta og tag in the header part.
<meta property="og:image" content="<?php echo "http://halisikenya.com/admin/".$row['image'];?>">
<meta property="og:image" content="http://YOURWEBSITE.com/YOURIMAGE.png">
each image should be in aspect ratio of 1.91:1, min 600px X 315px or max 1200px X 630px
after that you need to debug each url of your blog in FB debugger.
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.halisi-kenya.com%2Fentry.php%3Fid%3D55%23.UoIUx_lQHAN
if there is on your site then you will see in debugger only one image which you specify in og tag.
Having a strange zend framework issue. Although it's most likely something simple, I've been unable to resolve it so far. I have scraped the bottom of stackOverflow and several other community sites, as well as the zend documentation.
Any ajaxLink that I include in my layout refuses to function. They are classed properly, with hash placeholder in href attribute, but the javascript to activate the link is not being included in the page .
echo $this->jQuery; statement in layout is also failing. Might be the cause of ajaxLink failure. I have verified that I am properly adding the jQuery view helper in my bootstrap. Have tried using both ZendX_JQuery::enableView($view); and $view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper"); methods.
Thanks in advance
Excerpts from the relevant files follow:
bootstrap.php:
protected function _initViewHelpers()
{
$this->bootstrap('layout');
$layout = $this->getResource('layout');
$view = $layout->getView();
$view->doctype('HTML4_STRICT');
$view->headMeta()->appendHttpEquiv('Content-type', 'text/html;charset=utf-8')
->appendName('description', 'Business Club');
$view->headTitle()->setSeparator(' - ');
$view->headTitle('SOU Business Club');
$view->setHelperPath(APPLICATION_PATH.'/views/helpers', '');
ZendX_JQuery::enableView($view);
}
dashboardLayout.phtml:
<?php echo $this->doctype();?>
<html>
<head>
<?php echo $this->headTitle();?>
<?php echo $this->headMeta();?>
<?php
echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/dashboardStyle.css');
echo $this->headLink()->prependStylesheet($this->baseUrl().'/js/jquery/css/smoothness/jquery-ui-1.8.11.custom.css');
?>
<?php
echo $this->headScript()->appendFile($this->baseUrl().'/js/paginator.js');
echo $this->jQuery();
?>
</head>
<body id="body">
<div id="wrapper">
<div><?php include "dashboardHeader.phtml"; ?></div>
<div id="bar">
Dashboard Home|
<?php
echo $this->ajaxLink('Club Roster | ',
'user/index',
array('update' => '#content',
'method' => 'post'),
array('format' => 'html')
);
?>
Google Docs|
Book Sale Management|
</div>
<div id="content" align="center">
<?php
echo $this->layout()->content;
?>
</div>
<div id="statusBar">
<?php
$userData = Zend_Registry::get('userData');
$name = $userData->name;
$role = $userData->role;
$status = 'Logged in as: '.' Name: '.$name.' Role: '.$role;
echo $status;
?>
<br />
Logout
</div>
<div><?php include "dashboardFooter.phtml"; ?></div>
</div>
</body>
</html>
HTML <head> output:
<head>
<title>SOU Business Club - Member Dashboard</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" >
<meta name="description" content="Business Club" >
<link href="/css/dashboardStyle.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/js/jquery/css/smoothness/jquery-ui-1.8.11.custom.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/dashboardStyle.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="/js/paginator.js"></script>
</head>
In your bootstrap you need to specify where jQuery is, either on your local machine or a CDN. Locally you use:
$view->jQuery()->setLocalPath(PATH);
Or you could use a CDN such as Google's: http://code.google.com/apis/libraries/devguide.html#jquery