HTMLToQPDF
HTMLToQPDF copied to clipboard
Relorer
First Try to use HTMLToQPDF
Hello, I think this library will be good if will can transfer all html tags I was trying this HTML
<!DOCTYPE html>
<html>
<head>
<title> GeeSuthSoftCloud - View Docuemnt </title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta http-equiv="content-type" content="text-html; charset=utf-8">
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@500&display=swap" rel="stylesheet">
<style type="text/css">
html,
body,
{
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
font-family: 'Tajawal', sans-serif;
}
html {
line-height: 1;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q,
blockquote {
quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
body {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 12px;
margin: 0;
padding: 0;
}
body a {
text-decoration: none;
color: inherit;
}
body a:hover {
color: inherit;
opacity: 0.7;
}
body .container {
min-width: 500px;
margin: 0 auto;
padding: 0 20px;
}
body .clearfix:after {
content: "";
display: table;
clear: both;
}
body .left {
float: left;
}
body .right {
float: right;
}
body .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
body .no-break {
page-break-inside: avoid;
}
header {
margin-top: 20px;
margin-bottom: 50px;
}
header figure {
float: left;
width: 60px;
height: 60px;
margin-right: 10px;
background-color: #0b6351;
border-radius: 50%;
text-align: center;
}
header figure img {
margin-top: 13px;
}
header .company-address {
float: left;
max-width: 150px;
line-height: 1.7em;
}
header .company-address .title {
color: #0b6351;
font-weight: 400;
font-size: 1.5em;
text-transform: uppercase;
}
header .company-contact {
float: right;
height: 60px;
padding: 0 10px;
background-color: #0b6351;
color: white;
}
header .company-contact span {
display: inline-block;
vertical-align: middle;
}
header .company-contact .circle {
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
text-align: center;
}
header .company-contact .circle img {
vertical-align: middle;
}
header .company-contact .phone {
height: 100%;
margin-right: 20px;
}
header .company-contact .email {
height: 100%;
min-width: 100px;
text-align: right;
}
section .details {
margin-bottom: 55px;
}
section .details .client {
width: 50%;
line-height: 20px;
}
section .details .client .name {
color: #0b6351;
}
section .details .data {
width: 50%;
text-align: right;
}
section .details .title {
margin-bottom: 15px;
color: #0b6351;
font-size: 3em;
font-weight: 400;
text-transform: uppercase;
}
section table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-size: 0.9166em;
}
section table .qty,
section table .unit,
section table .total {
width: 15%;
}
section table .sn {
width: 5px;
background: #0b6351;
}
section table .desc {
width: 50%;
}
section table thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
section table thead th {
padding: 5px 10px;
background: #0b6351;
border-bottom: 5px solid #FFFFFF;
border-right: 0px solid #FFFFFF;
text-align: right;
color: white;
font-weight: 400;
text-transform: uppercase;
}
section table thead th:last-child {
border-right: none;
}
section table thead .desc {
text-align: right;
}
section table thead .qty {
text-align: center;
}
section table tbody td {
padding: 10px;
background: #E8F3DB;
color: #777777;
text-align: right;
border-bottom: 5px solid #FFFFFF;
border-right: 4px solid #E8F3DB;
}
section table tbody td:last-child {
border-right: none;
}
section table tbody h3 {
margin-bottom: 5px;
color: #0b6351;
font-weight: 600;
}
section table tbody .desc {
text-align: right;
}
section table tbody .qty {
text-align: center;
}
section table.grand-total {
margin-bottom: 45px;
}
section table.grand-total td {
padding: 5px 10px;
border: none;
color: #777777;
text-align: right;
}
section table.grand-total .desc {
background-color: transparent;
}
section table.grand-total tr:last-child td {
font-weight: 600;
color: #0b6351;
font-size: 1.18181818181818em;
}
footer {
margin-bottom: 20px;
}
footer .thanks {
margin-bottom: 40px;
color: #0b6351;
font-size: 1.16666666666667em;
font-weight: 600;
}
footer .notice {
margin-bottom: 25px;
}
footer .end {
padding-top: 5px;
border-top: 2px solid #0b6351;
text-align: center;
}
p {
color: black;
font-weight: bold;
}
.docname {
text-align: center;
padding-bottom: 10px;
height: auto;
}
.docname p {
background-color: #E8F3DB;
/* Second => #E8F3DB */
color: #0b6351;
height: 30px;
font-size: 25px;
}
.sn {
background-color: #0b6351;
color: white
}
</style>
<style>
@media print {
.print-bar {
display: none;
}
}
</style>
</head>
<body dir="rtl">
<div class="print-bar" style="text-align: end;padding: 15px;">
<input type="button" value="Print - " onClick="window.print()">
</div>
<section>
<header class="clearfix">
<div class="container">
<div class="company-contact">
<div class="phone right">
</div>
<div class="email left">
<span class="circle">
<a href="mailto: [email protected]"> [email protected]</a>
<span class="helper"></span>
</div>
</div>
<figure>
</figure>
<div class="company-address">
<p>
<br>
</p>
<p>
VAT : 12345678912365
</p>
</div>
</div>
</header>
</section>
</body>
<section class="container">
<div class="docname">
<p>
</p>
</div>
</section>
<section>
<div class="container">
<div class="details clearfix">
<div class="client">
<p> :</p>
<p class="name"> 111111111111110 </p>
<p> </p>
<a href="mailto: [email protected]">[email protected]</a>
</div>
<div class="client">
<p> :</p>
<p class="name"> </p>
</div>
<div class="client">
<p> :</p>
<p class="name"> </p>
</div>
<div class="client">
<p> :</p>
<p class="name"> </p>
</div>
<div class="client left" style="margin-top: -130px;">
<div class="left">
<div class="title">INV#4 </div>
<div class="date">
21-03-2022 09:00
</div>
</div>
<div class="left">
<div style="text-align: end;">
<img style="height: 100px;" src="data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIAQMAAACXljzdAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAqUlEQVRYhe2UUQ6AMAhDuf+lMZOWqfMAvsWakG3PnwZoxK+PK0vjNL6+Ycmtvr3RyHCWevWNT+x0GzIOWxDVc6FeZ5RFlA3pvi0ZwiKW+7WKRU6X9qpEJ5PaqPpHdt05Jol2l20bTKpjfosZF1BS3XLRQJKJbXmrLlaJ5J7ktV9ooprZt24pk8zx6y3bgFTPIlenTKLi1AAT8chO8yATJ8V0+swQFPn1YR0a0xlKXJm0PQAAAABJRU5ErkJggg=="
alt="">
</div>
</div>
</div>
</div>
<table border="0" cellspacing="0" cellpadding="0" class="right">
<thead>
<tr>
<th class="sn">Sn </th>
<th class="desc">Item Code </th>
<th class="qty">Unit Name </th>
<th class="qty">Quantity </th>
<th class="unit">Unit price </th>
<th class="unit">Discount </th>
<th class="total">Total </th>
</tr>
</thead>
<tbody>
<tr>
<td class="sn">
1
</td>
<td class="desc">
<h3>cod507</h3>
</td>
<td class="qty"></td>
<td class="qty">50.00</td>
<td class="unit"> 1000.00 </td>
<td class="unit">0.00 </td>
<td class="total"> 57500.0000 </td>
</tr>
</tbody>
</table>
<div class="no-break">
<table class="grand-total">
<tbody>
<tr>
<td class="desc"></td>
<td class="qty"></td>
<td class="unit"> 50000.0000 </td>
<td class="total"> SUBTOTAL </td>
</tr>
<tr>
<td class="desc"></td>
<td class="qty"></td>
<td class="unit"> 7500.00 </td>
<td class="total">
TAX
</td>
</tr>
<tr>
<td class="desc"></td>
<td class="qty"></td>
<td class="unit"> 0.0000 </td>
<td class="total"> DISCOUNT </td>
</tr>
<tr>
<td class="desc"></td>
<td class="qty"></td>
<td class="unit"> 57500.0000 </td>
<td class="total"> GRAND TOTAL </td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<body>
<section>
<footer>
<div class="container">
<div class="thanks">Thank you! </div>
<div class="notice">
<div> NOTICE :</div>
<div> Note </div>
</div>
<div class="end">Invoice was created on a computer and is valid without the signature and seal.</div>
</div>
</footer>
</section>
</body>
</html>
I only get
the supposed be:
How is this processes is it using external lib to do the pfd to html conversion
How is this processes is it using external lib to do the pfd to html conversion
@davidbuckleyni HtmlAgilityPack is used for html parsing. Then, recursively, a corresponding component for QuestPDF is created for each node. (html to pdf)
Honestly, for this use case you can move your entire document to QuestPDF and skip html altogether.
