├── LICENSE
├── README.md
├── jquery-version
    ├── custom.css
    ├── custom.css.map
    ├── custom.js
    ├── custom.min.css
    ├── custom.min.css.map
    ├── custom.scss
    ├── custom2.css
    ├── index.html
    ├── js.png
    ├── receipt.html
    └── wsp.png
└── js-version
    ├── custom.css
    ├── custom.css.map
    ├── custom.js
    ├── custom.min.css
    ├── custom.min.css.map
    ├── custom.scss
    ├── custom2.css
    ├── index.html
    ├── js.png
    ├── receipt.html
    └── wsp.png


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 WebStylePress
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML to PDF using JavaScript Only
2 | HTML to PDF using JS Only
3 | 
4 | YouTube Tutorial
5 | 
6 | https://youtu.be/DV2tAG5E-F0
7 | 


--------------------------------------------------------------------------------
/jquery-version/custom.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin-top: 40px;
 3 |   font-size: 22px;
 4 | }
 5 | 
 6 | #ignore {
 7 |   background-color: #eee;
 8 | }
 9 | 
10 | #btn {
11 |   margin-top: 20px;
12 | }
13 | 
14 | #content img {
15 |   max-width: 200px;
16 | }/*# sourceMappingURL=custom.css.map */


--------------------------------------------------------------------------------
/jquery-version/custom.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["custom.scss","custom.css"],"names":[],"mappings":"AAAA;EACE,gBAAA;EACA,eAAA;ACCF;;ADEA;EAAU,sBAAA;ACEV;;ADAA;EAAO,gBAAA;ACIP;;ADFA;EAAe,gBAAA;ACMf","file":"custom.css"}


--------------------------------------------------------------------------------
/jquery-version/custom.js:
--------------------------------------------------------------------------------
 1 | jQuery(document).ready(function () {
 2 | 	//////////////
 3 | 	//////////////
 4 | 	$('#btn-print').click(function () {
 5 | 		// window.print();
 6 | 
 7 | 		let wspFrame = document.getElementById('frame').contentWindow;
 8 | 		wspFrame.focus();
 9 | 		wspFrame.print();
10 | 	});
11 | 	//////////////
12 | 	//////////////
13 | 
14 | 	$('#btn-one').click(function () {
15 | 		html2canvas(document.querySelector('#content')).then((canvas) => {
16 | 			let base64image = canvas.toDataURL('image/png');
17 | 			// console.log(base64image);
18 | 			let pdf = new jsPDF('p', 'px', [1600, 1131]);
19 | 			pdf.addImage(base64image, 'PNG', 15, 15, 1110, 360);
20 | 			pdf.save('webtylepress-two.pdf');
21 | 		});
22 | 	});
23 | 	//////////////
24 | 	//////////////
25 | 	$('#btn-two').click(function () {
26 | 		html2canvas(
27 | 			document
28 | 				.querySelector('iframe')
29 | 				.contentWindow.document.querySelector('.receipt-wrap'),
30 | 		).then((canvas) => {
31 | 			let base64image = canvas.toDataURL('image/png');
32 | 			// console.log(base64image);
33 | 			let pdf = new jsPDF('p', 'px', [1600, 1131]);
34 | 			pdf.addImage(base64image, 'PNG', 15, 15, 1140, 966);
35 | 			pdf.save('webtylepress-receipt.pdf');
36 | 		});
37 | 	});
38 | 	//////////////
39 | 	//////////////
40 | });
41 | 


--------------------------------------------------------------------------------
/jquery-version/custom.min.css:
--------------------------------------------------------------------------------
1 | body{margin-top:40px;font-size:22px}#ignore{background-color:#eee}#btn{margin-top:20px}#content img{max-width:200px}/*# sourceMappingURL=custom.min.css.map */


--------------------------------------------------------------------------------
/jquery-version/custom.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["custom.scss"],"names":[],"mappings":"AAAA,KACE,eAAA,CACA,cAAA,CAGF,QAAA,qBAAA,CAEA,KAAA,eAAA,CAEA,aAAA,eAAA","file":"custom.min.css"}


--------------------------------------------------------------------------------
/jquery-version/custom.scss:
--------------------------------------------------------------------------------
 1 | body{
 2 |   margin-top: 40px;
 3 |   font-size: 22px;
 4 | }
 5 | 
 6 | #ignore { background-color: #eee; }
 7 | 
 8 | #btn { margin-top: 20px; }
 9 | 
10 | #content img { max-width: 200px; }


--------------------------------------------------------------------------------
/jquery-version/custom2.css:
--------------------------------------------------------------------------------
  1 | body,
  2 | * {
  3 | 	color-adjust: exact !important;
  4 | 	-webkit-print-color-adjust: exact !important;
  5 | 	print-color-adjust: exact !important;
  6 | }
  7 | 
  8 | .text-danger strong {
  9 | 	color: #006fb3;
 10 | }
 11 | .receipt-main {
 12 | 	background: #ffffff none repeat scroll 0 0;
 13 | 	border-bottom: 12px solid #333333;
 14 | 	border-right: 1px solid #ccc;
 15 | 	border-left: 1px solid #ccc;
 16 | 	border-top: 12px solid #006fb3;
 17 | 	margin-top: 50px;
 18 | 	margin-bottom: 50px;
 19 | 	padding: 40px 30px !important;
 20 | 	position: relative;
 21 | 	color: #333333;
 22 | 	font-family: open sans;
 23 | }
 24 | .receipt-main p {
 25 | 	color: #333333;
 26 | 	font-family: open sans;
 27 | 	line-height: 1.42857;
 28 | }
 29 | .receipt-footer h1 {
 30 | 	font-size: 15px;
 31 | 	font-weight: 400 !important;
 32 | 	margin: 0 !important;
 33 | }
 34 | .receipt-main::after {
 35 | 	background: #414143 none repeat scroll 0 0;
 36 | 	content: '';
 37 | 	height: 5px;
 38 | 	left: 0;
 39 | 	position: absolute;
 40 | 	right: 0;
 41 | 	top: -13px;
 42 | }
 43 | .receipt-main thead {
 44 | 	background: #414143 none repeat scroll 0 0;
 45 | }
 46 | 
 47 | .receipt-main th,
 48 | .receipt-main thead tr {
 49 | 	background-color: #414143;
 50 | }
 51 | 
 52 | .receipt-main thead th {
 53 | 	color: #fff;
 54 | }
 55 | 
 56 | .receipt-right h5 {
 57 | 	font-size: 16px;
 58 | 	font-weight: bold;
 59 | 	margin: 0 0 7px 0;
 60 | }
 61 | .receipt-right p {
 62 | 	font-size: 13px;
 63 | 	margin: 0px;
 64 | }
 65 | .receipt-right p i {
 66 | 	text-align: center;
 67 | 	width: 18px;
 68 | }
 69 | .receipt-main td {
 70 | 	padding: 9px 20px !important;
 71 | }
 72 | .receipt-main th {
 73 | 	padding: 13px 20px !important;
 74 | }
 75 | .receipt-main td {
 76 | 	font-size: 14px;
 77 | 	font-weight: initial !important;
 78 | }
 79 | .receipt-main td p:last-child {
 80 | 	margin: 0;
 81 | 	padding: 0;
 82 | }
 83 | .receipt-main td h2 {
 84 | 	font-size: 20px;
 85 | 	font-weight: 900;
 86 | 	margin: 0;
 87 | 	text-transform: uppercase;
 88 | }
 89 | .receipt-header-mid .receipt-left h1 {
 90 | 	font-weight: 100;
 91 | 	margin: 34px 0 0;
 92 | 	text-align: right;
 93 | 	text-transform: uppercase;
 94 | }
 95 | .receipt-header-mid {
 96 | 	margin: 24px 0;
 97 | 	overflow: hidden;
 98 | }
 99 | 
100 | #container {
101 | 	background-color: #dcdcdc;
102 | }
103 | 
104 | @media print {
105 | 	.receipt-main thead th {
106 | 		color: #333;
107 | 	}
108 | }
109 | 


--------------------------------------------------------------------------------
/jquery-version/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 | 		<meta
 7 | 			name="viewport"
 8 | 			content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 | 		/>
10 | 		<title>WebStylePress</title>
11 | 		<link
12 | 			rel="stylesheet"
13 | 			href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
14 | 		/>
15 | 		<link rel="stylesheet" href="custom.css" />
16 | 	</head>
17 | 	<body>
18 | 		<div class="container">
19 | 			<div id="content">
20 | 				<h3 style="color: red"
21 | 					>Generate & Download PDF From Page Section Using JS</h3
22 | 				>
23 | 				<hr />
24 | 				<p
25 | 					>Click at buttons below to <mark>generate PDF</mark> and
26 | 					<u>download it</u> using <i>only JavaScript</i>. We can
27 | 					<strong>Generate PDF</strong> from whole page. We can target class or
28 | 					ID and generate PDF from only a section in page -
29 | 					<span style="color: blue">a part of page.</span></p
30 | 				>
31 | 				<img src="js.png" class="img-fluid d-block mx-auto" />
32 | 			</div>
33 | 
34 | 			<br />
35 | 
36 | 			<button id="btn-print" class="btn btn-success btn-lg"
37 | 				>Print & Generate PDF</button
38 | 			>
39 | 
40 | 			<button id="btn-one" class="btn btn-success btn-lg"
41 | 				>Download PDF (With Styles & Images / Same Page)</button
42 | 			>
43 | 
44 | 			<button id="btn-two" class="btn btn-success btn-lg"
45 | 				>Generate PDF From iFrame</button
46 | 			>
47 | 
48 | 			<iframe
49 | 				id="frame"
50 | 				style="width: 100%; border: 0; height: 0"
51 | 				src="receipt.html"
52 | 			></iframe>
53 | 		</div>
54 | 
55 | 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
56 | 
57 | 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
58 | 
59 | 		<script
60 | 			src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
61 | 			integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
62 | 			crossorigin="anonymous"
63 | 			referrerpolicy="no-referrer"
64 | 		></script>
65 | 
66 | 		<script src="custom.js"></script>
67 | 	</body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/jquery-version/js.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webstylepress/HTML-to-PDF-using-JS-Only/2e8d01f3ab3f2a23b98ab1a9da201d7f7c80af46/jquery-version/js.png


--------------------------------------------------------------------------------
/jquery-version/receipt.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8" />
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 | 		<meta
  7 | 			name="viewport"
  8 | 			content="width=device-width, initial-scale=1, shrink-to-fit=no"
  9 | 		/>
 10 | 		<title>WebStylePress</title>
 11 | 		<link
 12 | 			rel="stylesheet"
 13 | 			href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
 14 | 		/>
 15 | 		<link rel="stylesheet" href="custom.css" />
 16 | 		<link rel="stylesheet" href="custom2.css" />
 17 | 	</head>
 18 | 	<body>
 19 | 		<div class="container receipt-wrap" id="receipt-wrap">
 20 | 			<div class="row justify-content-md-center">
 21 | 				<div class="receipt-main col-xs-10 col-sm-10 col-md-6">
 22 | 					<div class="row">
 23 | 						<div class="col-xs-6 col-sm-6 col-md-6">
 24 | 							<div class="receipt-left">
 25 | 								<img
 26 | 									class="img-responsive"
 27 | 									alt="iamgurdeeposahan"
 28 | 									src="wsp.png"
 29 | 									style="width: 71px; border-radius: 43px"
 30 | 								/>
 31 | 							</div>
 32 | 						</div>
 33 | 						<div class="col-xs-6 col-sm-6 col-md-6 text-right">
 34 | 							<div class="receipt-right">
 35 | 								<h5>WebStylePress</h5>
 36 | 								<p>+00 00000-0000 <i class="fa fa-phone"></i></p>
 37 | 								<p>info@sitename.com <i class="fa fa-envelope-o"></i></p>
 38 | 								<p>United States <i class="fa fa-location-arrow"></i></p>
 39 | 							</div>
 40 | 						</div>
 41 | 					</div>
 42 | 
 43 | 					<br />
 44 | 
 45 | 					<div class="row">
 46 | 						<div class="col-xs-8 col-sm-8 col-md-8 text-left">
 47 | 							<div class="receipt-right">
 48 | 								<h5>WebStylePress</h5>
 49 | 								<p><b>Mobile :</b> +00 00000-0000</p>
 50 | 								<p><b>Email :</b> info@sitename.com</p>
 51 | 								<p><b>Address :</b> United States</p>
 52 | 							</div>
 53 | 						</div>
 54 | 						<div
 55 | 							class="col-xs-4 col-sm-4 col-md-4"
 56 | 							style="align-self: flex-end"
 57 | 						>
 58 | 							<div class="receipt-left">
 59 | 								<h1>Receipt</h1>
 60 | 							</div>
 61 | 						</div>
 62 | 					</div>
 63 | 
 64 | 					<br />
 65 | 
 66 | 					<div>
 67 | 						<table class="table table-bordered">
 68 | 							<thead>
 69 | 								<tr>
 70 | 									<th>Description</th>
 71 | 									<th>Amount</th>
 72 | 								</tr>
 73 | 							</thead>
 74 | 							<tbody>
 75 | 								<tr>
 76 | 									<td class="col-md-9">Payment for August 2022</td>
 77 | 									<td class="col-md-3"><i class="fa fa-inr"></i> 15,000/-</td>
 78 | 								</tr>
 79 | 								<tr>
 80 | 									<td class="col-md-9">Payment for June 2022</td>
 81 | 									<td class="col-md-3"><i class="fa fa-inr"></i> 6,00/-</td>
 82 | 								</tr>
 83 | 								<tr>
 84 | 									<td class="col-md-9">Payment for May 2022</td>
 85 | 									<td class="col-md-3"><i class="fa fa-inr"></i> 35,00/-</td>
 86 | 								</tr>
 87 | 								<tr>
 88 | 									<td class="text-right">
 89 | 										<p>
 90 | 											<strong>Total Amount: </strong>
 91 | 										</p>
 92 | 										<p>
 93 | 											<strong>Late Fees: </strong>
 94 | 										</p>
 95 | 										<p>
 96 | 											<strong>Payable Amount: </strong>
 97 | 										</p>
 98 | 										<p>
 99 | 											<strong>Balance Due: </strong>
100 | 										</p>
101 | 									</td>
102 | 									<td>
103 | 										<p>
104 | 											<strong><i class="fa fa-inr"></i> 65,500/-</strong>
105 | 										</p>
106 | 										<p>
107 | 											<strong><i class="fa fa-inr"></i> 500/-</strong>
108 | 										</p>
109 | 										<p>
110 | 											<strong><i class="fa fa-inr"></i> 1300/-</strong>
111 | 										</p>
112 | 										<p>
113 | 											<strong><i class="fa fa-inr"></i> 9500/-</strong>
114 | 										</p>
115 | 									</td>
116 | 								</tr>
117 | 								<tr>
118 | 									<td class="text-right"
119 | 										><h2><strong>Total: </strong></h2></td
120 | 									>
121 | 									<td class="text-left text-danger"
122 | 										><h2
123 | 											><strong><i class="fa fa-inr"></i> 31,566/-</strong></h2
124 | 										></td
125 | 									>
126 | 								</tr>
127 | 							</tbody>
128 | 						</table>
129 | 					</div>
130 | 
131 | 					<div class="row">
132 | 						<div class="col-xs-8 col-sm-8 col-md-8 text-left">
133 | 							<div class="receipt-right">
134 | 								<p><b>Date :</b> 15 Nov 2022</p>
135 | 								<h5 style="color: rgb(140, 140, 140)"
136 | 									>Thank you for your business!</h5
137 | 								>
138 | 							</div>
139 | 						</div>
140 | 					</div>
141 | 				</div>
142 | 			</div>
143 | 		</div>
144 | 	</body>
145 | </html>
146 | 


--------------------------------------------------------------------------------
/jquery-version/wsp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webstylepress/HTML-to-PDF-using-JS-Only/2e8d01f3ab3f2a23b98ab1a9da201d7f7c80af46/jquery-version/wsp.png


--------------------------------------------------------------------------------
/js-version/custom.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin-top: 40px;
 3 |   font-size: 22px;
 4 | }
 5 | 
 6 | #ignore {
 7 |   background-color: #eee;
 8 | }
 9 | 
10 | #btn {
11 |   margin-top: 20px;
12 | }
13 | 
14 | #content img {
15 |   max-width: 200px;
16 | }/*# sourceMappingURL=custom.css.map */


--------------------------------------------------------------------------------
/js-version/custom.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["custom.scss","custom.css"],"names":[],"mappings":"AAAA;EACE,gBAAA;EACA,eAAA;ACCF;;ADEA;EAAU,sBAAA;ACEV;;ADAA;EAAO,gBAAA;ACIP;;ADFA;EAAe,gBAAA;ACMf","file":"custom.css"}


--------------------------------------------------------------------------------
/js-version/custom.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function () {
 2 | 	//////////////
 3 | 	//////////////
 4 | 	document.querySelector('#btn-print').addEventListener('click', function () {
 5 | 		// window.print();
 6 | 
 7 | 		let wspFrame = document.getElementById('frame').contentWindow;
 8 | 		wspFrame.focus();
 9 | 		wspFrame.print();
10 | 	});
11 | 	//////////////
12 | 	//////////////
13 | 
14 | 	document.querySelector('#btn-one').addEventListener('click', function () {
15 | 		html2canvas(document.querySelector('#content')).then((canvas) => {
16 | 			let base64image = canvas.toDataURL('image/png');
17 | 			// console.log(base64image);
18 | 			let pdf = new jsPDF('p', 'px', [1600, 1131]);
19 | 			pdf.addImage(base64image, 'PNG', 15, 15, 1110, 360);
20 | 			pdf.save('webtylepress-two.pdf');
21 | 		});
22 | 	});
23 | 	//////////////
24 | 	//////////////
25 | 	document.querySelector('#btn-two').addEventListener('click', function () {
26 | 		html2canvas(
27 | 			document
28 | 				.querySelector('iframe')
29 | 				.contentWindow.document.querySelector('.receipt-wrap'),
30 | 		).then((canvas) => {
31 | 			let base64image = canvas.toDataURL('image/png');
32 | 			// console.log(base64image);
33 | 			let pdf = new jsPDF('p', 'px', [1600, 1131]);
34 | 			pdf.addImage(base64image, 'PNG', 15, 15, 1140, 966);
35 | 			pdf.save('webtylepress-receipt.pdf');
36 | 		});
37 | 	});
38 | 	//////////////
39 | 	//////////////
40 | });
41 | 


--------------------------------------------------------------------------------
/js-version/custom.min.css:
--------------------------------------------------------------------------------
1 | body{margin-top:40px;font-size:22px}#ignore{background-color:#eee}#btn{margin-top:20px}#content img{max-width:200px}/*# sourceMappingURL=custom.min.css.map */


--------------------------------------------------------------------------------
/js-version/custom.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["custom.scss"],"names":[],"mappings":"AAAA,KACE,eAAA,CACA,cAAA,CAGF,QAAA,qBAAA,CAEA,KAAA,eAAA,CAEA,aAAA,eAAA","file":"custom.min.css"}


--------------------------------------------------------------------------------
/js-version/custom.scss:
--------------------------------------------------------------------------------
 1 | body{
 2 |   margin-top: 40px;
 3 |   font-size: 22px;
 4 | }
 5 | 
 6 | #ignore { background-color: #eee; }
 7 | 
 8 | #btn { margin-top: 20px; }
 9 | 
10 | #content img { max-width: 200px; }


--------------------------------------------------------------------------------
/js-version/custom2.css:
--------------------------------------------------------------------------------
  1 | body,
  2 | * {
  3 | 	color-adjust: exact !important;
  4 | 	-webkit-print-color-adjust: exact !important;
  5 | 	print-color-adjust: exact !important;
  6 | }
  7 | 
  8 | .text-danger strong {
  9 | 	color: #006fb3;
 10 | }
 11 | .receipt-main {
 12 | 	background: #ffffff none repeat scroll 0 0;
 13 | 	border-bottom: 12px solid #333333;
 14 | 	border-right: 1px solid #ccc;
 15 | 	border-left: 1px solid #ccc;
 16 | 	border-top: 12px solid #006fb3;
 17 | 	margin-top: 50px;
 18 | 	margin-bottom: 50px;
 19 | 	padding: 40px 30px !important;
 20 | 	position: relative;
 21 | 	color: #333333;
 22 | 	font-family: open sans;
 23 | }
 24 | .receipt-main p {
 25 | 	color: #333333;
 26 | 	font-family: open sans;
 27 | 	line-height: 1.42857;
 28 | }
 29 | .receipt-footer h1 {
 30 | 	font-size: 15px;
 31 | 	font-weight: 400 !important;
 32 | 	margin: 0 !important;
 33 | }
 34 | .receipt-main::after {
 35 | 	background: #414143 none repeat scroll 0 0;
 36 | 	content: '';
 37 | 	height: 5px;
 38 | 	left: 0;
 39 | 	position: absolute;
 40 | 	right: 0;
 41 | 	top: -13px;
 42 | }
 43 | .receipt-main thead {
 44 | 	background: #414143 none repeat scroll 0 0;
 45 | }
 46 | 
 47 | .receipt-main th,
 48 | .receipt-main thead tr {
 49 | 	background-color: #414143;
 50 | }
 51 | 
 52 | .receipt-main thead th {
 53 | 	color: #fff;
 54 | }
 55 | 
 56 | .receipt-right h5 {
 57 | 	font-size: 16px;
 58 | 	font-weight: bold;
 59 | 	margin: 0 0 7px 0;
 60 | }
 61 | .receipt-right p {
 62 | 	font-size: 13px;
 63 | 	margin: 0px;
 64 | }
 65 | .receipt-right p i {
 66 | 	text-align: center;
 67 | 	width: 18px;
 68 | }
 69 | .receipt-main td {
 70 | 	padding: 9px 20px !important;
 71 | }
 72 | .receipt-main th {
 73 | 	padding: 13px 20px !important;
 74 | }
 75 | .receipt-main td {
 76 | 	font-size: 14px;
 77 | 	font-weight: initial !important;
 78 | }
 79 | .receipt-main td p:last-child {
 80 | 	margin: 0;
 81 | 	padding: 0;
 82 | }
 83 | .receipt-main td h2 {
 84 | 	font-size: 20px;
 85 | 	font-weight: 900;
 86 | 	margin: 0;
 87 | 	text-transform: uppercase;
 88 | }
 89 | .receipt-header-mid .receipt-left h1 {
 90 | 	font-weight: 100;
 91 | 	margin: 34px 0 0;
 92 | 	text-align: right;
 93 | 	text-transform: uppercase;
 94 | }
 95 | .receipt-header-mid {
 96 | 	margin: 24px 0;
 97 | 	overflow: hidden;
 98 | }
 99 | 
100 | #container {
101 | 	background-color: #dcdcdc;
102 | }
103 | 
104 | @media print {
105 | 	.receipt-main thead th {
106 | 		color: #333;
107 | 	}
108 | }
109 | 


--------------------------------------------------------------------------------
/js-version/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 | 		<meta
 7 | 			name="viewport"
 8 | 			content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 | 		/>
10 | 		<title>WebStylePress</title>
11 | 		<link
12 | 			rel="stylesheet"
13 | 			href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
14 | 		/>
15 | 		<link rel="stylesheet" href="custom.css" />
16 | 	</head>
17 | 	<body>
18 | 		<div class="container">
19 | 			<div id="content">
20 | 				<h3 style="color: red"
21 | 					>Generate & Download PDF From Page Section Using JS</h3
22 | 				>
23 | 				<hr />
24 | 				<p
25 | 					>Click at buttons below to <mark>generate PDF</mark> and
26 | 					<u>download it</u> using <i>only JavaScript</i>. We can
27 | 					<strong>Generate PDF</strong> from whole page. We can target class or
28 | 					ID and generate PDF from only a section in page -
29 | 					<span style="color: blue">a part of page.</span></p
30 | 				>
31 | 				<img src="js.png" class="img-fluid d-block mx-auto" />
32 | 			</div>
33 | 
34 | 			<br />
35 | 
36 | 			<button id="btn-print" class="btn btn-success btn-lg"
37 | 				>Print & Generate PDF</button
38 | 			>
39 | 
40 | 			<button id="btn-one" class="btn btn-success btn-lg"
41 | 				>Download PDF (With Styles & Images / Same Page)</button
42 | 			>
43 | 
44 | 			<button id="btn-two" class="btn btn-success btn-lg"
45 | 				>Generate PDF From iFrame</button
46 | 			>
47 | 
48 | 			<iframe
49 | 				id="frame"
50 | 				style="width: 100%; border: 0; height: 0"
51 | 				src="receipt.html"
52 | 			></iframe>
53 | 		</div>
54 | 
55 | 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
56 | 
57 | 		<script
58 | 			src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
59 | 			integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
60 | 			crossorigin="anonymous"
61 | 			referrerpolicy="no-referrer"
62 | 		></script>
63 | 
64 | 		<script src="custom.js"></script>
65 | 	</body>
66 | </html>
67 | 


--------------------------------------------------------------------------------
/js-version/js.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webstylepress/HTML-to-PDF-using-JS-Only/2e8d01f3ab3f2a23b98ab1a9da201d7f7c80af46/js-version/js.png


--------------------------------------------------------------------------------
/js-version/receipt.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8" />
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 | 		<meta
  7 | 			name="viewport"
  8 | 			content="width=device-width, initial-scale=1, shrink-to-fit=no"
  9 | 		/>
 10 | 		<title>WebStylePress</title>
 11 | 		<link
 12 | 			rel="stylesheet"
 13 | 			href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
 14 | 		/>
 15 | 		<link rel="stylesheet" href="custom.css" />
 16 | 		<link rel="stylesheet" href="custom2.css" />
 17 | 	</head>
 18 | 	<body>
 19 | 		<div class="container receipt-wrap" id="receipt-wrap">
 20 | 			<div class="row justify-content-md-center">
 21 | 				<div class="receipt-main col-xs-10 col-sm-10 col-md-6">
 22 | 					<div class="row">
 23 | 						<div class="col-xs-6 col-sm-6 col-md-6">
 24 | 							<div class="receipt-left">
 25 | 								<img
 26 | 									class="img-responsive"
 27 | 									alt="iamgurdeeposahan"
 28 | 									src="wsp.png"
 29 | 									style="width: 71px; border-radius: 43px"
 30 | 								/>
 31 | 							</div>
 32 | 						</div>
 33 | 						<div class="col-xs-6 col-sm-6 col-md-6 text-right">
 34 | 							<div class="receipt-right">
 35 | 								<h5>WebStylePress</h5>
 36 | 								<p>+00 00000-0000 <i class="fa fa-phone"></i></p>
 37 | 								<p>info@sitename.com <i class="fa fa-envelope-o"></i></p>
 38 | 								<p>United States <i class="fa fa-location-arrow"></i></p>
 39 | 							</div>
 40 | 						</div>
 41 | 					</div>
 42 | 
 43 | 					<br />
 44 | 
 45 | 					<div class="row">
 46 | 						<div class="col-xs-8 col-sm-8 col-md-8 text-left">
 47 | 							<div class="receipt-right">
 48 | 								<h5>WebStylePress</h5>
 49 | 								<p><b>Mobile :</b> +00 00000-0000</p>
 50 | 								<p><b>Email :</b> info@sitename.com</p>
 51 | 								<p><b>Address :</b> United States</p>
 52 | 							</div>
 53 | 						</div>
 54 | 						<div
 55 | 							class="col-xs-4 col-sm-4 col-md-4"
 56 | 							style="align-self: flex-end"
 57 | 						>
 58 | 							<div class="receipt-left">
 59 | 								<h1>Receipt</h1>
 60 | 							</div>
 61 | 						</div>
 62 | 					</div>
 63 | 
 64 | 					<br />
 65 | 
 66 | 					<div>
 67 | 						<table class="table table-bordered">
 68 | 							<thead>
 69 | 								<tr>
 70 | 									<th>Description</th>
 71 | 									<th>Amount</th>
 72 | 								</tr>
 73 | 							</thead>
 74 | 							<tbody>
 75 | 								<tr>
 76 | 									<td class="col-md-9">Payment for August 2022</td>
 77 | 									<td class="col-md-3"><i class="fa fa-inr"></i> 15,000/-</td>
 78 | 								</tr>
 79 | 								<tr>
 80 | 									<td class="col-md-9">Payment for June 2022</td>
 81 | 									<td class="col-md-3"><i class="fa fa-inr"></i> 6,00/-</td>
 82 | 								</tr>
 83 | 								<tr>
 84 | 									<td class="col-md-9">Payment for May 2022</td>
 85 | 									<td class="col-md-3"><i class="fa fa-inr"></i> 35,00/-</td>
 86 | 								</tr>
 87 | 								<tr>
 88 | 									<td class="text-right">
 89 | 										<p>
 90 | 											<strong>Total Amount: </strong>
 91 | 										</p>
 92 | 										<p>
 93 | 											<strong>Late Fees: </strong>
 94 | 										</p>
 95 | 										<p>
 96 | 											<strong>Payable Amount: </strong>
 97 | 										</p>
 98 | 										<p>
 99 | 											<strong>Balance Due: </strong>
100 | 										</p>
101 | 									</td>
102 | 									<td>
103 | 										<p>
104 | 											<strong><i class="fa fa-inr"></i> 65,500/-</strong>
105 | 										</p>
106 | 										<p>
107 | 											<strong><i class="fa fa-inr"></i> 500/-</strong>
108 | 										</p>
109 | 										<p>
110 | 											<strong><i class="fa fa-inr"></i> 1300/-</strong>
111 | 										</p>
112 | 										<p>
113 | 											<strong><i class="fa fa-inr"></i> 9500/-</strong>
114 | 										</p>
115 | 									</td>
116 | 								</tr>
117 | 								<tr>
118 | 									<td class="text-right"
119 | 										><h2><strong>Total: </strong></h2></td
120 | 									>
121 | 									<td class="text-left text-danger"
122 | 										><h2
123 | 											><strong><i class="fa fa-inr"></i> 31,566/-</strong></h2
124 | 										></td
125 | 									>
126 | 								</tr>
127 | 							</tbody>
128 | 						</table>
129 | 					</div>
130 | 
131 | 					<div class="row">
132 | 						<div class="col-xs-8 col-sm-8 col-md-8 text-left">
133 | 							<div class="receipt-right">
134 | 								<p><b>Date :</b> 15 Nov 2022</p>
135 | 								<h5 style="color: rgb(140, 140, 140)"
136 | 									>Thank you for your business!</h5
137 | 								>
138 | 							</div>
139 | 						</div>
140 | 					</div>
141 | 				</div>
142 | 			</div>
143 | 		</div>
144 | 	</body>
145 | </html>
146 | 


--------------------------------------------------------------------------------
/js-version/wsp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webstylepress/HTML-to-PDF-using-JS-Only/2e8d01f3ab3f2a23b98ab1a9da201d7f7c80af46/js-version/wsp.png


--------------------------------------------------------------------------------