First Try to use HTMLToQPDF #1

GeeSuth · 2022-10-15T14:17:09Z

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: geesuthsoft@geesuth.com"> geesuthsoft@geesuth.com</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@co.com">email@co.com</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:

davidbuckleyni · 2022-10-15T16:09:08Z

How is this processes is it using external lib to do the pfd to html conversion

Relorer · 2022-10-15T16:58:47Z

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)

bgiromini · 2023-03-01T19:44:41Z

Honestly, for this use case you can move your entire document to QuestPDF and skip html altogether.

MarcinZiabek mentioned this issue Oct 15, 2022

Inserting HTML to PDF QuestPDF/QuestPDF#134

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

First Try to use HTMLToQPDF #1

First Try to use HTMLToQPDF #1

GeeSuth commented Oct 15, 2022

davidbuckleyni commented Oct 15, 2022

Relorer commented Oct 15, 2022

bgiromini commented Mar 1, 2023

First Try to use HTMLToQPDF #1

First Try to use HTMLToQPDF #1

Comments

GeeSuth commented Oct 15, 2022

davidbuckleyni commented Oct 15, 2022

Relorer commented Oct 15, 2022

bgiromini commented Mar 1, 2023