`; // Add Edge Device Status table let tableHtml = `

Edge Device Status

`; dashboardData.edgeDevices.forEach((device, index) => { const rowBg = index % 2 === 0 ? '#ffffff' : '#f7fafc'; tableHtml += ` `; }); tableHtml += `

Device ID	Location	Status	Last Heartbeat	Data Throughput (Mbps)	Latency (ms)
${device.id}	${device.location}	${device.status}	${device.lastHeartbeat}	${device.throughput} Mbps	${device.latency} ms

`; pdfContentDiv.innerHTML += tableHtml; // Add Key Performance Indicators section pdfContentDiv.innerHTML += `

Key Performance Indicators

`; // Append the temporary div to the body to render it for html2canvas document.body.appendChild(pdfContentDiv); // Use html2canvas to capture the content as an image const canvas = await html2canvas(pdfContentDiv, { scale: 2, // Increase scale for better resolution in PDF useCORS: true, // Required if you have external images/resources logging: false // Disable logging for cleaner console }); // Remove the temporary div document.body.removeChild(pdfContentDiv); const imgData = canvas.toDataURL('image/png'); const pdf = new window.jspdf.jsPDF({ orientation: 'portrait', unit: 'px', format: [canvas.width, canvas.height] // Use canvas dimensions for PDF }); pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height); pdf.save('Edge_Computing_Dashboard_Report.pdf'); } // --- Event Listeners --- if (dashboardTabBtn) dashboardTabBtn.onclick = function() { switchTab('dashboard'); }; if (dataConfigTabBtn) dataConfigTabBtn.onclick = function() { switchTab('dataConfig'); }; if (saveConfigBtn) saveConfigBtn.onclick = saveConfiguration; if (addDeviceBtn) addDeviceBtn.onclick = addEdgeDevice; if (nextBtn) nextBtn.onclick = navigateNext; if (prevBtn) prevBtn.onclick = navigatePrevious; if (downloadPdfBtn) downloadPdfBtn.onclick = downloadPDF; // --- Initial Render --- renderDashboard(); // Render dashboard on initial load switchTab('dashboard'); // Ensure dashboard tab is active by default });