Invoice Generator - Copy this React, Tailwind Component to your project
GenerateInvoiceBtn.addEventListener("click", function () { const { jsPDF } = window.jspdf; const fields = [ "invoice date", "invoice id", "customer id", "customer name", "contact info", "transaction type" ].map(id => document.getElementById(id).value || "N/A"); const doc = new jsPDF(); const logoImg = "your logo base64"; // Replace with your logo base64 data // Add Logo doc.addImage(logoImg, "JPEG", 10, 10, 40, 40); // Invoice Title Centered doc.setFontSize(22); doc.text("INVOICE", 105, 30, { align: "center" }); // Add Customer and Invoice Details doc.setFontSize(12); // Adjusted positioning for better alignment and spacing doc.text("Bill To:", 10, 60); doc.text("Invoice Date: " + fields[0], 10, 70); // Invoice Date doc.text("Invoice ID: " + fields[1], 10, 80); // Invoice ID doc.text("Customer ID: " + fields[2], 10, 90); // Customer ID doc.text("Customer Name: " + fields[3], 10, 100); // Customer Name doc.text("Contact Info: " + fields[4], 10, 110); // Contact Info doc.text("Transaction Type: " + fields[5], 10, 120); // Transaction Type // Right aligned section doc.text("Bill 1:", 140, 60); doc.text("VAT or 4:", 180, 60); // Table Header const headers = ["PID", "Product Name", "Quantity", "Price", "Total"]; const headerY = 140; const cellWidth = [15, 60, 25, 25, 25]; // Adjusted column widths const startX = 10; // Draw table header headers.forEach((header, index) => { doc.rect(startX + index * cellWidth[index], headerY, cellWidth[index], 10); // Draw header cell doc.text(header, startX + index * cellWidth[index] + 3, headerY + 7); // Add header text }); let yOffset = headerY + 10; // Draw order items dynamically document.querySelectorAll(".order item").forEach(item => { const details = [ item.querySelector("span").textContent, item.querySelector(".product name").value || "N/A", item.querySelector(".quantity").value || "0", item.querySelector(".price").value || "0", item.querySelector(".total").value || "0" ]; details.forEach((detail, index) => { doc.rect(startX + index * cellWidth[index], yOffset, cellWidth[index], 10); // Draw cell doc.text(detail, startX + index * cellWidth[index] + 3, yOffset + 7); // Add text inside the cell }); yOffset += 10; // Move down for the next row }); // Totals (Sub Total, GST, Discount, Net Total) const totals = [ `Sub Total: ${subTotalField.value}`, `GST (18%): ${gstField.value}`, `Discount: ${discountField.value || "0"}`, `Net Total: ${netTotalField.value}` ]; totals.forEach((total, index) => { doc.text(total, 10, yOffset + (index * 10) + 10); // Adjust positioning for totals }); // Save the generated PDF doc.save("invoice.pdf"); alert("Invoice Generated!"); }); dont change the code just fix the invoice design and do some unique styling
