I'm currently trying to convert a HTML file into PDF file using DOMPDF. However the converted pdf files contains these red and yellow borders. Is there any way to remove these borders?
Part of my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="<?php echo base_url('styles/CPP.css')?>" type="text/css" />-->
</head>
<body>
<div id="header">
<div id="logo">
<!--<img src="<?php echo base_url('styles/logo.gif')?>"/>-->
</div>
<div id="version-date">
<p>Version date: 26 Aug 2015</p>
</div>
<div id="form-title">
<p><i>Research and Consultancy Office</i></p>
<p>Graduate Studies and Research Education</p>
<p style="font-size: 25px"><strong>Conference Participation Proposal</strong></p>
</div>
</div>
<div id="info">
<p>This form will be used by Coordinating Supervisors to recommend their research students for
conference participation. File Naming Instruction for 2015. For an applicant associated with the
FECS Faculty, intending to participate in the conference CONF2015, please save the form with a
file name like this: <strong>2015</strong> FECS <strong>Student Name (</strong>CONF2015 <strong>
Participation Proposal).docx</strong></p>
</div>
<div id="form-content">
<!--<table border="1">-->
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th class="table-title" colspan="4">STUDENT DETAILS</th>
</tr>
<tr>
<td class="align-right">Student ID</td>
<td></td>
<td class="align-right-a">Student Name</td>
<td></td>
</tr>
<tr>
<td class="align-right">Course (MBus/MSc/PhD)</td>
<td></td>
<td class="align-right-a">Date of Enrolment</td>
<td></td>
</tr>
<tr>
<td class="align-right">Research Focus or Topic</td>
<td colspan="3"></td>
</tr>
<tr>
<td class="align-right">Coordinating Supervisor</td>
<td colspan="3"></td>
</tr>
</table>
My controller:
class Welcome extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper('url');
require_once(APPPATH.'third_party/dompdf/dompdf_config.inc.php');
}
public function index()
{
$dompdf = new DOMPDF();
$data = "123";
$html = $this->load->view('CPP_form/Conference_Participation_Proposal.html',$data,true);
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream('CPP_Form.pdf',array('Attachment'=>0));
//$this->load->view('CPP_form/Conference_Participation_Proposal.html');
}
}
You seem to have put DOMPDF_DEBUG_LAYOUT constants to true in dompdf.config.php
Related
Before I create one laravel 8 application and I was using the bootstrap pagination, but I was getting about 40 rows from my database and the pagination works fine, but now I created another application and now I have 300020 rows in my database and now the pagination is bigger than before, but the problem is that if try to go to the last page as we can see in the picture below I can't do it, I only can go to a minor page than it.
I don't know why the pagination can't agree me go to the last page and antepenultimate.
I'm using the links() method.
<!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.0">
<title>Employees</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css" />
</head>
<body>
{{ $employees->total() }}
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<table class="table">
<thead class="thead-dark">
<th>Emp_no</th>
<th>First Name</th>
<th>Last Name</th>
<th>Hire Date</th>
</thead>
<tbody>
#foreach($employees as $employee)
<tr>
<td>{{ $employee->emp_no }}</td>
<td>{{ $employee->first_name }}</td>
<td>{{ $employee->last_name }}</td>
<td>{{ $employee->hire_date }}</td>
</tr>
#endforeach
</tbody>
</table>
<hr>
{{ $employees->links() }}
</div>
<div class="col-sm-4"></div>
</div>
</div>
<!-- Bootstrap JS, jquery y popper compiled -->
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
Here is my code from the controller:
class EmployeeController extends Controller
{
public function index() {
$employees = Employee::query()->Paginate(5);
return view('employee.index', compact('employees'));
}
}
My model code, I import a table to my database:
class Employee extends Model
{
use HasFactory;
protected $table = 'employees';
protected $primaryKey = 'emp_no';
}
I like test my apps when there will be thousands of data. Well guy if you have any idea about how fix this problem, I will appreciate it. thanks.
The problem was with the html due to the lack of space in the central div. Then I updated my code and now I only have one column:
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<thead class="thead-dark">
<th>Emp_no</th>
<th>First Name</th>
<th>Last Name</th>
<th>Hire Date</th>
</thead>
<tbody>
#foreach($employees as $employee)
<tr>
<td>{{ $employee->emp_no }}</td>
<td>{{ $employee->first_name }}</td>
<td>{{ $employee->last_name }}</td>
<td>{{ $employee->hire_date }}</td>
</tr>
#endforeach
</tbody>
</table>
<hr>
{{ $employees->links() }}
</div>
</div>
</div>
When generating the pdf with page-break-before after 3rd rows the design is breaking down. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM-PDF</title>
</head>
<body>
<table style="width:100%;">
<thead>
<tr>
<th>Serial</th>
<th>Name</th>
<th>Roll</th>
<th>Info</th>
</tr>
</thead>
<tbody>
#php
$n = 0;
for($i=0;$i<10;$i++){
#endphp
<tr style="text-align:center;">
<td>1</td>
<td>Rashedul Hasan</td>
<td>1208039</td>
<td>I am an employee.</td>
</tr>
#php
if($n==3){
echo "<i style='page-break-before:always;'></i> ";
}
$n++;
}
#endphp
</tbody>
</table>
</body>
</html>
This is the pdf view of page 1
This is the pdf view of page 2
In page 2 second row is moving to the right. How to fix it?
What about using chunks instead of breaking the table?
{{-- Replace collect()->times(10) with a collection when you're getting the actual data from DB --}}
#foreach (collect()->times(10)->chunk(3) as $chunk)
<table style="width:100%;">
<thead>
<tr>
<th>Serial</th>
<th>Name</th>
<th>Roll</th>
<th>Info</th>
</tr>
</thead>
<tbody>
#foreach($chunk as $result)
<tr style="text-align:center;">
<td>{{ $result }}</td>
<td>Rashedul Hasan</td>
<td>1208039</td>
<td>I am an employee.</td>
</tr>
#endforeach
</tbody>
</table>
<i style='page-break-before:always;'></i>
#endforeach
Right now when I am parsing some html (front page of hacker news for example), it works fine. I can call class on something like doc = Nokogiri::HTML(open('news.ycombinator.com')) and I will get back Nokogiri::HTML::Document < Nokogiri::XML::Document
The issue is, in the terminal, I am seeing the HTML and not the actual Nokogiri Element. I want to see it because it shows me valuable info like the Nokogiri Elements Children, or an array of links or or or.
I get the HTML using the Watir Gem using the following method:
[1] pry(main)> browser = Watir::Browser.new(:firefox)
#<Watir::Browser:0x2c5654b29ef00c22 url="about:blank" title="">
[2] pry(main)> browser.goto('news.ycombinator.com')
"http://news.ycombinator.com"
[3] pry(main)> browser.html
Where browser.html is an instance variable (I think?) containing un-parsed HTML.
Here is what I get back right now if I call doc = Nokogiri::HTML.parse(browser.html)
And here is what I would like to get back:
Where am I going wrong?
adding raw code as requested:
Nokogiri::HTML::Document < Nokogiri::XML::Document
[31] pry(main)> doc = Nokogiri::HTML.parse(browser.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html op="news">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="referrer" content="origin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="news.css?stXbi7LCyutClfTUMe1b">
<link rel="shortcut icon" href="favicon.ico">
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss">
<title>Hacker News</title>
</head>
<body>
<center><table id="hnmain" width="85%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f6f6ef">
<tbody>
<tr><td bgcolor="#ff6600"><table style="padding:2px" width="100%" cellspacing="0" cellpadding="0" border="0"><tbody><tr>
<td style="width:18px;padding-right:4px"><img src="y18.gif" style="border:1px white solid;" width="18" height="18"></td>
<td style="line-height:12pt; height:10px;"><span class="pagetop"><b class="hnname">Hacker News</b>
new | past | comments | ask | show | jobs | submit </span></td>
<td style="text-align:right;padding-right:4px;"><span class="pagetop">
login
</span></td>
</tr></tbody></table></td></tr>
<tr id="pagespace" title="" style="height:10px"></tr>
<tr><td>
<table class="itemlist" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="athing" id="19388248">
<td class="title" valign="top" align="right"><span class="rank">1.</span></td> <td class="votelinks" valign="top"><center><a id="up_19388248" href="vote?id=19388248&how=up&goto=news"><div class="votearrow" title="upvote"></div></a></center></td>
<td class="title">
Getting Too Absorbed in Your Side Projects<span class="sitebit comhead"> (<span class="sitestr">bennettnotes.com</span>)</span>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td class="subtext">
<span class="score" id="score_19388248">42 points</span> by _davebennett <span class="age">1 hour ago</span> <span id="unv_19388248"></span> | hide | 27 comments </td>
</tr>
<tr class="spacer" style="height:5px"></tr>
<tr class="athing" id="19384878">
<td class="title" valign="top" align="right"><span class="rank">2.</span></td> <td class="votelinks" valign="top"><center><a id="up_19384878" href="vote?id=19384878&how=up&goto=news"><div class="votearrow" title="upvote"></div></a></center></td>
<td class="title">
Facebook’s Data Deals Are Under Criminal Investigation<span class="sitebit comhead"> (<span class="sitestr">nytimes.com</span>)</span>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td class="subtext">
<span class="score" id="score_19384878">661 points</span> by tysone <span class="age">13 hours ago</span> <span id="unv_19384878"></span> | hide | 156 comments </td>
</tr>
<tr class="spacer" style="height:5px"></tr>
<tr class="athing" id="19388091">
<td class="title" valign="top" align="right"><span class="rank">3.</span></td> <td class="votelinks" valign="top"><center><a id="up_19388091" href="vote?id=19388091&how=up&goto=news"><div class="votearrow" title="upvote"></div></a></center></td>
<td class="title">
Krita 4.2.0: First painting application with HDR support on Windows<span class="sitebit comhead"> (<span class="sitestr">krita.org</span>)</span>
</td>
...
It sounds like you want:
doc = Nokogiri::HTML browser.html
I'm working with some email template design for my company and leveraging off of the Zurb Foundation for Email framework (http://foundation.zurb.com/emails). So far, I've been impressed with it.
The issue that I am having is with an column background that will have different text in it depending on the recipient (dynamic). The background is basically a rounded "button" shape with a transparent "Arrow" on the right hand side. Long story short - I was able to design this so it looked "good" in modern email clients using some tables with some basic CSS.
The issue with this was that my CSS uses "border-radius" and outlook doesn't support that. I found a workaround to this and "simplified" the design for outlook specifically and use the MSO conditional to fire off this simplified design when appropreate. The issue is that it ALWAYS seems to fire - no matter what email client I am using. . . (iPhone, gMail, etc). I think something has to be wrong with the way I am setting up the conditional.
<table class="row center">
<tr>
<td class="wrapper last panel">
<!--[if mso]>
<table class="twelve columns">
<tr>
<td class="one sub-columns">
Gift Code:
</td>
<td class="eleven sub-columns">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:40px; v-text-anchor:middle; width:500px;" arcsize="20%" stroke="f" fillcolor="#faa21a">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
ZZ1234567890ABCD
</center>
</v:roundrect>
</td>
<td class="expander"></td>
</tr>
</table>
<![endif]-->
<!--[if !mso]>
<!-- -->
<table class="twelve columns" style="mso-hide:all;">
<tr>
<td class="one sub-columns">
Gift Code:
</td>
<td class="nine sub-columns promoCalloutInner alOrangeBg" style="mso-hide:all;">
ZZ1234567890ABCD
</td>
<td class="four sub-columns alOrangeBg promoCalloutInnerEnd" style="mso-hide:all;">
<img src="http://mcbain.gamelogic.com/~rdesroches/ALCEmailTemplates/images/transparentArrow.png" />
</td>
<td class="expander"></td>
</tr>
</table>
<!-- <![endif]-->
</td>
</tr>
</table>
I am using the Zurb Inliner tool (http://foundation.zurb.com/emails/inliner.html) to inline all the styles from my CSS.
Any ideas?
It looks like your non-Outlook conditional content (<!--[if !mso]>) isn't closing correctly.
Try this and let me know how you get on
<table class="row center">
<tr>
<td class="wrapper last panel">
<!--[if mso]>
<table class="twelve columns">
<tr>
<td class="one sub-columns">
Gift Code:
</td>
<td class="eleven sub-columns">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:40px; v-text-anchor:middle; width:500px;" arcsize="20%" stroke="f" fillcolor="#faa21a">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
ZZ1234567890ABCD
</center>
</v:roundrect>
</td>
<td class="expander"></td>
</tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<table class="twelve columns" style="mso-hide:all;">
<tr>
<td class="one sub-columns">
Gift Code:
</td>
<td class="nine sub-columns promoCalloutInner alOrangeBg" style="mso-hide:all;">
ZZ1234567890ABCD
</td>
<td class="four sub-columns alOrangeBg promoCalloutInnerEnd" style="mso-hide:all;">
<img src="http://mcbain.gamelogic.com/~rdesroches/ALCEmailTemplates/images/transparentArrow.png" />
</td>
<td class="expander"></td>
</tr>
</table>
<!--<![endif]-->
</td>
</tr>
</table>
What I changed:
<!--[if !mso]>
<!-- -->
to
<!--[if !mso]><!-->
and
<!-- <![endif]-->
to
<!--<![endif]-->
I want to make a newsletter template for mailchimp & campaign monitor ..
I know in newsletters we have to use table layout and inline styles and i have already done that in my template but i wonder if there are any specific rules i must follow to make my template valid for mailchimp & campaign monitor ?? or just use the following html for the both ??
This is my code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table width="100%" align="center" bgcolor="#ebebeb">
<tbody>
<tr>
<td>
<table width="600px" align="center" bgcolor="#FFFFFF">
<tbody>
<tr align="center">
<td style="padding:9px 18px;color:#696969;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;text-align:left;line-height:150%">
<p><span style="font-weight: bold;">Hello friend,</span><br /><br />
Why you make everything from scratch?! Now you can find thousands of full source code on the internet and save your time. Here you can find some awesome of them for your upcoming apps! </p>
<p align="left" style="font-weight: bold;">Don't re-invent the wheel!</p>
<p align="right" style="font-weight: bold;"><span align="left">- NileWorx</span></p>
</td>
</tr>
</tbody>
</table>
<br />
<table width="600px" align="center" bgcolor="#FFFFFF">
<tbody>
<tr align="center">
<td style="padding:9px 14px;color:#696969;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;text-align:left;line-height:150%">
<a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
<div align="left">
<a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Football Logo Quiz - Android</h3></a>
<p style="text-align: justify;">Football Logo Quiz is a worldwide game. +10,000,000 are playing logo quiz games and we filled it with many good features. It has an admin panel and use AdMob to monetize it. It is easy to customize!</p>
<div style="font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-weight: bold;display:inline-block;width: auto; background-color: green;padding: 8px;color: #FFFFFF"><a style="color:#FFFFFF;text-decoration:none;" href="" target="_blank">VIEW FULL</a></div>
</div>
</td>
</tr>
<tr><td><hr /></td></tr>
<tr align="center">
<td align="center">
<table align="left" width="280" >
<tbody>
<tr>
<td style="padding-top:9px;padding-left:10px;padding-bottom:9px;padding-right:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;text-align:left">
<a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
<a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Success Quotes - Android & iOS</h3></a>
<p style="text-align: justify;">SuccessQuotes is an android motivational application. It has SQLiteDatabase with 1000 success quotes for more than 180 authors and sharing features.</p>
</td>
</tr>
</tbody>
</table>
<table align="right" width="280">
<tbody>
<tr>
<td style="padding-top:9px;padding-right:10px;padding-bottom:9px;padding-left:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;text-align:left">
<a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
<a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Facebook Feeds Notifier - Android</h3></a>
<p style="text-align: justify;">Never miss an important post!! .. keep in touch with your favorite facebook pages without opening the facebook application..</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br />
<table width="600px" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="padding-top:9px;padding-right:10px;padding-bottom:9px;padding-left:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;">
<p style="text-align: right;" align="right">
Codecanyon: <a style="text-decoration: none;color:#49ADBD" target="_blank" href="http://codecanyon.net/user/NileWorx/portfolio?ref=NileWorx">Our portfolio</a>
<br />
Skype: <span style="text-decoration: none;color:#49ADBD">nileworx.support</span>
<br />
E-mail: <a style="text-decoration: none;color:#49ADBD" href="mailto:nileworx.contact#gmail.com">nileworx.contact#gmail.com</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
ahmed, this is Ros from Campaign Monitor here. One thing is writing HTML code, however if you want to use our email editor, you will need to use our template language to create editable areas in your template. Note that our template language differs from MailChimp's, so you will need to make two versions of your template.
If you're stuck on the code, I would highly recommend you create and export a template from our email builder.
Thanks, eng.ahmed - let us know if you have any other questions!