Added header logo and footer to PDF export.

Raja-Muhammad-Bilal-Arshad · Oct 14, 2024 · 58132b0 · 58132b0
1 parent 6213aff
commit 58132b0
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -405,7 +405,27 @@ <h3 class="text-lg sm:text-xl font-semibold mb-4">Recently added</h3>
         </div>
       </div>
     </div>
+    <!-- Hidden content for PDF generation -->
+    <div id="pdf-content" class="pdf-container hidden">
+      <!-- Logo Section -->
+      <div class="flex justify-center mb-6">
+        <img
+          src="assets/icons/logo_aqualator.svg"
+          alt="Liquidia"
+          class="h-8 w-auto"
+        />
+      </div>
+
+      <!-- Final content included dynamically -->
+      <div id="final-content" class="flex-grow">
+        <!-- Your main content goes here -->
+      </div>
 
+      <!-- Footer Section -->
+      <footer class="mt-6 text-center text-xs text-gray-500 dark:text-gray-400">
+        &copy; 2024 Liquidia. All rights reserved.
+      </footer>
+    </div>
     <footer
       class="light-mode bg-white dark:bg-gray-800 shadow-md py-4 transition-colors duration-200 mt-auto"
     >

diff --git a/script.js b/script.js
@@ -587,29 +587,35 @@ window.onload = function () {
 
 // Add this function to your script.js file
 function addImportExportButtons() {
-  const container = document.querySelector('.grid-cols-1.sm\\:grid-cols-2.md\\:grid-cols-4');
+  const container = document.querySelector(
+    ".grid-cols-1.sm\\:grid-cols-2.md\\:grid-cols-4"
+  );
   if (!container) return;
 
-  const buttonContainer = document.createElement('div');
-  buttonContainer.className = 'col-span-1 sm:col-span-2 md:col-span-4 grid grid-cols-1 sm:grid-cols-2 gap-4';
+  const buttonContainer = document.createElement("div");
+  buttonContainer.className =
+    "col-span-1 sm:col-span-2 md:col-span-4 grid grid-cols-1 sm:grid-cols-2 gap-4";
 
-  const exportButton = document.createElement('button');
-  exportButton.textContent = 'Export Data';
+  const exportButton = document.createElement("button");
+  exportButton.textContent = "Export Data";
   exportButton.onclick = exportData;
-  exportButton.id = 'exportBtn';
-  exportButton.className = 'w-full bg-purple-500 dark:bg-purple-600 hover:bg-purple-600 dark:hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200';
+  exportButton.id = "exportBtn";
+  exportButton.className =
+    "w-full bg-purple-500 dark:bg-purple-600 hover:bg-purple-600 dark:hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200";
 
-  const importButton = document.createElement('button');
-  importButton.textContent = 'Import Data';
+  const importButton = document.createElement("button");
+  importButton.textContent = "Import Data";
   importButton.onclick = importData;
-  importButton.id = 'importBtn';
-  importButton.className = 'w-full bg-indigo-500 dark:bg-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200';
+  importButton.id = "importBtn";
+  importButton.className =
+    "w-full bg-indigo-500 dark:bg-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200";
 
-  const exportPDFButton = document.createElement('button');
-  exportPDFButton.textContent = 'Export as PDF';
+  const exportPDFButton = document.createElement("button");
+  exportPDFButton.textContent = "Export as PDF";
   exportPDFButton.onclick = exportDataAsPDF;
-  exportPDFButton.id = 'exportDataAsPDF';
-  exportPDFButton.className = 'w-full bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200';
+  exportPDFButton.id = "exportDataAsPDF";
+  exportPDFButton.className =
+    "w-full bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200";
 
   buttonContainer.appendChild(exportButton);
   // buttonContainer.appendChild(exportPDFButton);
@@ -619,16 +625,16 @@ function addImportExportButtons() {
 }
 
 // Call this function when the page loads
-document.addEventListener('DOMContentLoaded', addImportExportButtons);
+document.addEventListener("DOMContentLoaded", addImportExportButtons);
 
 // Add the exportData and importData functions here as well
 function exportData() {
   const data = JSON.stringify(items);
-  const blob = new Blob([data], { type: 'application/json' });
+  const blob = new Blob([data], { type: "application/json" });
   const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
+  const a = document.createElement("a");
   a.href = url;
-  a.download = 'liquidia_data.json';
+  a.download = "liquidia_data.json";
   document.body.appendChild(a);
   a.click();
   document.body.removeChild(a);
@@ -637,27 +643,36 @@ function exportData() {
 }
 
 function exportDataAsPDF() {
-  const reportContent = document.getElementById("final").innerHTML;
+  // Clone the content of the final div and insert it into the pdf-content
+  const finalContent = document.getElementById("final").innerHTML;
+  document.getElementById("final-content").innerHTML = finalContent;
+
+  // Select the hidden pdf-content div
+  const pdfContent = document.getElementById("pdf-content");
+  pdfContent.classList.remove("hidden"); // Temporarily show it for PDF generation
+
   const opt = {
-    margin:       1,
-    filename:     'report.pdf',
-    image:        { type: 'jpeg', quality: 0.98 },
-    html2canvas:  { scale: 2 },
-    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
+    margin: [0.5, 0.5, 0.5, 0.5], // [top, left, bottom, right]
+    filename: "report.pdf",
+    image: { type: "jpeg", quality: 0.98 },
+    html2canvas: { scale: 2 },
+    jsPDF: { unit: "in", format: "letter", orientation: "portrait" },
   };
 
-  // Choose the element to convert to PDF
-  html2pdf().from(reportContent).set(opt).save();
-
-  // Show flash message
-  showFlashMessage("Report exported as PDF.", "success");
+  html2pdf()
+    .from(pdfContent)
+    .set(opt)
+    .save()
+    .then(() => {
+      // Hide it again after PDF generation
+      pdfContent.classList.add("hidden");
+    });
 }
 
-
 function importData() {
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.accept = '.json';
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = ".json";
   input.onchange = (event) => {
     const file = event.target.files[0];
     const reader = new FileReader();
@@ -679,4 +694,4 @@ function importData() {
     reader.readAsText(file);
   };
   input.click();
-}
+}
diff --git a/style.css b/style.css
@@ -70,6 +70,25 @@ footer.dark-mode {
 }
 
 /* currency dropdown list text color */
-#currency-select--option{
+#currency-select--option {
   color: #000000;
 }
+
+/* Ensure the pdf-content takes the full height of the page and positions footer at the bottom */
+.pdf-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; /* Full viewport height for the page */
+  justify-content: space-between;
+}
+
+.flex-grow {
+  flex-grow: 1; /* This ensures the content takes up available space */
+}
+
+footer {
+  text-align: center;
+  padding: 10px 0;
+  background-color: #f8f9fa;
+  color: #6c757d;
+}