Using a seperate HTML file for the generating the PDF.

Putting the footer at the bottom of each page.

6 files changed, 294 insertions, 242 deletions

diff --git a/src/html.d.ts b/src/html.d.ts
new file mode 100644
index 0000000..b913216
--- /dev/null
+++ b/src/html.d.ts
@@ -0,0 +1,3 @@
+declare module "*.html" {
+	export default (replacements: any) => string;
+}
diff --git a/src/scripts/functionality/view-khatian/download-information-pdf-page-content.html b/src/scripts/functionality/view-khatian/download-information-pdf-page-content.html
new file mode 100644
index 0000000..e91c15e
--- /dev/null
+++ b/src/scripts/functionality/view-khatian/download-information-pdf-page-content.html
@@ -0,0 +1,273 @@
+<div id="content">
+	<style>
+		* {
+			box-sizing: border-box !important;
+			text-decoration: none;
+			margin: 0;
+			padding: 0;
+			font-size: 16px !important;
+		}
+
+		#content {
+			width: 100%;
+			margin: 0;
+			padding: 0;
+		}
+
+		.banner {
+			width: 100%;
+		}
+
+		.details {
+			padding: 1rem;
+		}
+
+		#locater-information {
+			width: 100%;
+			margin-bottom: 1rem;
+		}
+
+		#locater-information,
+		.details#plot-information > div:nth-child(1) > div:nth-child(5) > table {
+			border-collapse: collapse;
+		}
+
+		.details#khatian-information > table,
+		.details#plot-information > div:nth-child(1) {
+			width: 100% !important;
+			border-spacing: 0;
+		}
+
+		.details#plot-information > div:nth-child(1) > div:nth-child(1) {
+			text-align: center !important;
+		}
+
+		.details#plot-information > div:nth-child(1) > div:nth-child(1) {
+			margin: 0 !important;
+		}
+
+		.details#plot-information > div > div > table tr,
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr,
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table > tbody > tr:last-child,
+		#locater-information > tbody > tr {
+			border-bottom: 1px solid black;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr > th:nth-child(1),
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr > td:nth-child(1),
+		.details#khatian-information #headertitle > tr > th:nth-child(1),
+		#locater-information > tbody > tr > td:nth-child(1),
+		.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td:nth-child(1),
+		#headertitle > tr > th:nth-child(1),
+		#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr > td:nth-child(1) {
+			border-left: 1px solid black !important;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1),
+		#headertitle > tr,
+		.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr.table-text.knwurprpty_tbl_head_txt.ng-scope,
+		#headertitle,
+		#locater-information tr:nth-child(1) {
+			border-top: 1px solid black !important;
+			border-color: black !important;
+		}
+
+		.details td {
+			white-space: normal;
+		}
+
+		.details#plot-information #headertitle > tr > th,
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr > th,
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr > td,
+		.details#khatian-information #headertitle > tr > th,
+		#locater-information > tbody > tr > td,
+		.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td,
+		.details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr > td,
+		.details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody {
+			border-right: 1px solid black !important;
+		}
+
+		.details#plot-information > div:nth-child(1) > div:nth-child(3) > table {
+			border: none !important;
+		}
+
+		.details#plot-information > div:nth-child(1) > div {
+			position: initial !important;
+			left: 0 !important;
+			width: 100% !important;
+			border-left: none !important;
+			border-right: none !important;
+		}
+
+		.details#plot-information > div:nth-child(2),
+		.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td:nth-child(4),
+		.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > th:nth-child(4),
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(3),
+		.details#khatian-information > table > tbody > tr > td:nth-child(2) {
+			display: none !important;
+		}
+
+		.details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr {
+			background-color: transparent !important;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1),
+		.details#plot-information > div:nth-child(1) > div:nth-child(3) > table {
+			width: 100% !important;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(1),
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(4) {
+			text-align: center;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) {
+			width: 100% !important;
+			position: initial !important;
+			left: 0 !important;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table,
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table {
+			width: 100% !important;
+			border: none !important;
+		}
+
+		.details table tbody tr tr,
+		.details table tbody tr th,
+		.details table tbody tr td {
+			background-color: transparent;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) td,
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) th {
+			text-align: left;
+		}
+
+		.details#khatian-information > table > tbody > tr > td > div > table > tbody > tr > th,
+		.details#khatian-information > table > tbody > tr > td > div > table > tbody > tr > td,
+		.details#plot-information td {
+			padding: 0 0.2rem 0 0.2rem;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1) > th {
+			font-weight: 500;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr > th:nth-child(1),
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr > td:nth-child(1),
+		#locater-information > tbody > tr > td:nth-child(1) {
+			font-weight: bold;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(4) {
+			margin-top: 1rem !important;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5),
+		.details#plot-information > div:nth-child(1) > div:nth-child(5) {
+			position: initial !important;
+			left: 0 !important;
+			top: 0 !important;
+			margin: 0 !important;
+			width: 100% !important;
+		}
+
+		.details#plot-information > div:nth-child(1),
+		.details#khatian-information > table,
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) {
+			border: none !important;
+		}
+
+		.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1) > th,
+		#locater-information > tbody > tr > td {
+			width: 50%;
+		}
+
+		@page {
+			size: A4;
+			margin: 0 0 5rem 0;
+		}
+
+		footer {
+			heigth: 5rem;
+			width: 100%;
+		}
+
+		footer > img {
+			width: 210mm;
+			height: 5rem !important;
+			background: transparent;
+			position: fixed;
+			bottom: 0;
+		}
+
+		@page {
+			size: A4;
+		}
+
+		body {
+			width: 210mm !important;
+			height: 297mm !important;
+			margin: 0 !important;
+			padding: 0 !important;
+		}
+	</style>
+	<img class="banner" src="https://banglarbhumi.gov.in/BanglarBhumi/images/bl.png">
+	<div class="details" id="$isPlotInformation$">$details$</div>
+	<footer>
+		<img class="footer" src="$sanghaFacilitationCentreBannerUrl$">
+	</footer>
+	<script>
+		let tableBodyElement;
+		const createTableEntry = (label, value) => {
+			const tableRowElement = document.createElement("tr");
+			const tableLabelColumnElement = document.createElement("td");
+			tableLabelColumnElement.innerHTML = label;
+			const tableValueColumnElement = document.createElement("td");
+			tableValueColumnElement.innerHTML = value;
+			tableRowElement.appendChild(tableLabelColumnElement);
+			tableRowElement.appendChild(tableValueColumnElement);
+			tableBodyElement.appendChild(tableRowElement);
+		};
+
+		if ($isPlotInformation$) {
+			const tableElement = document.createElement("table");
+			tableElement.setAttribute("id", "locater-information");
+			tableBodyElement = document.createElement("tbody");
+			tableElement.appendChild(tableBodyElement);
+			const detailsElement = document.querySelector("#plot-information > div:nth-child(1)");
+			detailsElement.insertBefore(tableElement, detailsElement.querySelector("div:nth-child(2)"));
+		} else {
+			tableBodyElement = document.querySelector(".details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody");
+		}
+
+		createTableEntry("\u{99C}\u{9C7}\u{9B2}\u{9BE} (District):", "$district$");
+		createTableEntry("\u{9AC}\u{9CD}\u{9B2}\u{995} (Block):", "$block$");
+		createTableEntry("\u{9AE}\u{9CC}\u{99C}\u{9BE} (Mouza):", "$mouza$");
+
+		Promise.all(
+			Array.from(document.images)
+				.filter(img => !img.complete).map(img => new Promise(resolve => {
+					img.onload = img.onerror = resolve;
+				}))
+			).then(() => {
+				const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+				const headerRowHeight = document.getElementById("headertitle").offsetHeight;
+				const footerHeight = document.querySelector("footer > img").offsetHeight;
+				const pageHeight = document.body.offsetHeight - (footerHeight + rem);
+				let offset = -document.querySelector("div > img").getBoundingClientRect().top;
+
+				for (const tableRowElement of Array.from(document.querySelectorAll($isPlotInformation$ ? "#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr" : "#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table > tbody > tr"))) {
+					const tableRowElementDOMRect = tableRowElement.getBoundingClientRect();
+					if (tableRowElementDOMRect.y + offset + tableRowElementDOMRect.height >= pageHeight) {
+						tableRowElement.style.pageBreakBefore = "always";
+						offset -= pageHeight - (headerRowHeight + rem);
+					}
+				}
+
+				window.addEventListener("afterprint", window.close);
+				window.print();
+			});
+	</script>
+</div>
diff --git a/src/scripts/functionality/view-khatian/download-information-pdf-page-content.ts b/src/scripts/functionality/view-khatian/download-information-pdf-page-content.ts
deleted file mode 100644
index 9ff18ec..0000000
--- a/src/scripts/functionality/view-khatian/download-information-pdf-page-content.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-const sanghaFacilitationCentreBannerUrl = chrome.runtime.getURL("/assets/sangha-facilitation-centre-banner.jpg");
-
-export default (isPlotInformation: boolean, details: string, { district, block, mouza }: { district: string, block: string, mouza: string }) => `
-<style>
-	* {
-		box-sizing: border-box !important;
-		text-decoration: none;
-		margin: 0;
-		padding: 0;
-	}
-
-	body {
-		width: 100%;
-		margin: 0 !important;
-		padding: 0 !important;
-	}
-
-	#content {
-		width: 100%;
-		margin: 0;
-		padding: 0;
-	}
-
-	.banner {
-		width: 100%;
-	}
-
-	.details {
-		padding: 1rem;
-	}
-
-	#locater-information {
-		width: 100%;
-		margin-bottom: 1rem;
-	}
-
-	#locater-information,
-	.details#plot-information > div:nth-child(1) > div:nth-child(5) > table {
-		border-collapse: collapse;
-	}
-
-	.details#khatian-information > table,
-	.details#plot-information > div:nth-child(1) {
-		width: 100% !important;
-		border-spacing: 0;
-		border: 1px solid black;
-	}
-
-	.details#plot-information > div:nth-child(1) > div:nth-child(1) {
-		text-align: center !important;
-	}
-
-	.details#plot-information > div:nth-child(1) > div:nth-child(1) {
-		margin: 0 !important;
-	}
-
-	.details#plot-information > div > div > table tr {
-		border-bottom: 1px solid black;
-	}
-
-	.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > th:last-child,
-	.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td:last-child,
-	.details#plot-information > div:nth-child(1) > div:nth-child(3) > table,
-	.details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr > td:last-child,
-	.details#plot-information #headertitle > tr > th:last-child,
-	.details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr:last-child {
-		border: none !important;
-	}
-
-	.details#plot-information > div:nth-child(1) > div {
-		position: initial !important;
-		left: 0 !important;
-		width: 100% !important;
-		border-left: 0 !important;
-		border-right: 0 !important;
-	}
-
-	.details#plot-information > div:nth-child(2),
-	.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td:nth-child(4),
-	.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > th:nth-child(4),
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(3),
-	.details#khatian-information > table > tbody > tr > td:nth-child(2) {
-		display: none !important;
-	}
-
-	.details#plot-information > div:nth-child(1) > div:nth-child(5) > table > tbody > tr {
-		background-color: transparent !important;
-	}
-
-	.details#khatian-information > table > tbody > tr > td:nth-child(1),
-	.details#plot-information > div:nth-child(1) > div:nth-child(3) > table {
-		width: 100% !important;
-	}
-
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(1),
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(4) {
-		text-align: center;
-	}
-
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) {
-		width: 100% !important;
-		position: initial !important;
-		left: 0 !important;
-	}
-
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table,
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table {
-		width: 100% !important;
-		border: none !important;
-	}
-
-	.details table tbody tr tr,
-	.details table tbody tr th,
-	.details table tbody tr td {
-		border: none !important;
-		background-color: transparent;
-	}
-
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) td,
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) th {
-		text-align: left;
-	}
-
-	.details#khatian-information > table > tbody > tr > td > div > table > tbody > tr > th,
-	.details#khatian-information > table > tbody > tr > td > div > table > tbody > tr > td,
-	.details#plot-information td {
-		padding: 0 0.2rem 0 0.2rem;
-	}
-
-	.details table tbody tr tr,
-	#locater-information tr {
-		border-bottom: 1px solid black !important;
-	}
-
-	.details table tbody tr tr:last-child {
-		border: none;
-	}
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1) > th {
-		font-weight: 500;
-	}
-
-	.details table tbody tr th,
-	.details table tbody tr td,
-	.details#plot-information #headertitle > tr > th {
-		border-right: 1px solid black !important;
-	}
-
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1),
-	#headertitle > tr,
-	.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr.table-text.knwurprpty_tbl_head_txt.ng-scope,
-	#headertitle,
-	#locater-information tr:nth-child(1) {
-		border-top: 1px solid black !important;
-		border-color: black !important;
-	}
-
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table > tbody > tr:last-child,
-	.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > td:nth-child(3),
-	.details#plot-information > div:nth-child(1) > div:nth-child(3) > table > tbody > tr > th:nth-child(3),
-	.details#khatian-information > table tbody tr tr th:last-child, .details table tbody tr tr td:last-child,
-	#locater-information tr > td:last-child {
-		border-right: none !important;
-	}
-
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > p:nth-child(4) {
-		margin-top: 1rem !important;
-	}
-
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(5),
-	.details#plot-information > div:nth-child(1) > div:nth-child(5) {
-		position: initial !important;
-		left: 0 !important;
-		top: 0 !important;
-		margin: 0 !important;
-		width: 100% !important;
-	}
-
-	.details#khatian-information > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1) > th {
-		width: 50%;
-	}
-
-	.footer {
-		width: 100%;
-		margin-top: 1rem;
-	}
-</style>
-<img class="banner" src="https://banglarbhumi.gov.in/BanglarBhumi/images/bl.png">
-<div class="details" id=${isPlotInformation ? "plot-information" : "khatian-information"}>${details}</div>
-<img class="footer" src="${sanghaFacilitationCentreBannerUrl}">
-<script>
-	let tableBodyElement;
-	const createTableEntry = (label, value) => {
-		const tableRowElement = document.createElement("tr");
-		const tableLabelColumnElement = document.createElement("td");
-		tableLabelColumnElement.innerHTML = label;
-		const tableValueColumnElement = document.createElement("td");
-		tableValueColumnElement.innerHTML = value;
-		tableRowElement.appendChild(tableLabelColumnElement);
-		tableRowElement.appendChild(tableValueColumnElement);
-		tableBodyElement.appendChild(tableRowElement);
-	};
-	${isPlotInformation
-		? `
-			const tableElement = document.createElement("table");
-			tableElement.setAttribute("id", "locater-information");
-			tableBodyElement = document.createElement("tbody");
-			tableElement.appendChild(tableBodyElement);
-			const detailsElement = document.querySelector("#plot-information > div:nth-child(1)");
-			detailsElement.insertBefore(tableElement, detailsElement.querySelector("div:nth-child(2)"));
-		`
-		: `
-			tableBodyElement = document.querySelector(".details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody");
-		`
-	}
-	createTableEntry("\u{99C}\u{9C7}\u{9B2}\u{9BE} (District):", "${district}");
-	createTableEntry("\u{9AC}\u{9CD}\u{9B2}\u{995} (Block):", "${block}");
-	createTableEntry("\u{9AE}\u{9CC}\u{99C}\u{9BE} (Mouza):", "${mouza}");
-</script>
-`;
diff --git a/src/scripts/functionality/view-khatian/index.ts b/src/scripts/functionality/view-khatian/index.ts
index e29e8a4..38e500b 100644
--- a/src/scripts/functionality/view-khatian/index.ts
+++ b/src/scripts/functionality/view-khatian/index.ts
@@ -1,8 +1,10 @@
-import { downloadPDF } from "@/shared/download-pdf";
-import getDownloadInformationPDFPageContent from "@/scripts/functionality/view-khatian/download-information-pdf-page-content";
+import { generateWebPage } from "@/shared/generate-web-page";
+import getDownloadInformationPDFPageContent from "@/scripts/functionality/view-khatian/download-information-pdf-page-content.html";
 
 declare function load(): void;
 
+const sanghaFacilitationCentreBannerUrl = chrome.runtime.getURL("/assets/sangha-facilitation-centre-banner.jpg");
+
 document.addEventListener("DOMContentLoaded", () => {
 	const proxiedPost = $.post;
 
@@ -26,13 +28,14 @@ document.addEventListener("DOMContentLoaded", () => {
 	let isPlotInformation: boolean | null = null;
 
 	const downloadInformationPDF = () => {
-		let contentElement = document.getElementById(isPlotInformation ? "plotdetails" : "khdetails");
-		const documentStringContent = getDownloadInformationPDFPageContent(!!isPlotInformation, contentElement!.innerHTML, {
+		generateWebPage(getDownloadInformationPDFPageContent({
+			sanghaFacilitationCentreBannerUrl,
+			isPlotInformation: !!isPlotInformation,
+			details: document.getElementById(isPlotInformation ? "plotdetails" : "khdetails")!.innerHTML,
 			district: getValueOfSelectElement("#lstDistrictCode1"),
 			block: getValueOfSelectElement("#lstBlockCode1"),
 			mouza: getValueOfSelectElement("#lstMouzaList")
-		});
-		downloadPDF(`<div id="content">${documentStringContent}</div>`);
+		}));
 	};
 
 	$.post = function() {
diff --git a/src/shared/download-pdf.ts b/src/shared/download-pdf.ts
deleted file mode 100644
index bd8f815..0000000
--- a/src/shared/download-pdf.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export const downloadPDF = (content: string) => {
-	const tab = window.open("about:blank", "_blank");
-
-	if (tab) {
-		tab.document.write(content);
-		tab.document.close();
-		tab.focus();
-		Promise.all(Array.from(tab.document.images)
-			.filter(img => !img.complete)
-			.map(img => new Promise(resolve => {
-				img.onload = img.onerror = resolve;
-			}))).then(() => {
-				tab.print();
-				tab.close();
-			});
-	}
-};
diff --git a/src/shared/generate-web-page.ts b/src/shared/generate-web-page.ts
new file mode 100644
index 0000000..d7de655
--- /dev/null
+++ b/src/shared/generate-web-page.ts
@@ -0,0 +1,9 @@
+export const generateWebPage = (content: string) => {
+	const tab = window.open("about:blank", "_blank");
+
+	if (tab) {
+		tab.document.write(content);
+		tab.document.close();
+		tab.focus();
+	}
+};