`;
};
/**
* Generates and triggers the download of a PDF report.
* This function handles capturing content from both visible and hidden tabs.
*/
const generatePDF = async () => {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4'
});
// Find the content containers and their parent tab panes
const analysisContent = document.getElementById('pdf-content-analysis');
const recommendationsContent = document.getElementById('pdf-content-recommendations');
const analysisPane = document.getElementById('analysis');
if (!analysisContent || !recommendationsContent || !analysisPane) {
console.error("PDF content containers or panes not found.");
return;
}
// Add a title to the PDF
pdf.setFontSize(18);
pdf.text('Cloud Storage Optimization Report', 105, 20, { align: 'center' });
pdf.setFontSize(12);
pdf.text(`Generated on: ${new Date().toLocaleDateString()}`, 105, 27, { align: 'center' });
pdf.setFontSize(14);
// --- Capture Analysis Section ---
// html2canvas cannot capture elements with 'display: none'.
// We must temporarily make the 'analysis' tab visible but position it off-screen
// to avoid flickering or layout shifts for the user.
const originalAnalysisStyle = {
position: analysisPane.style.position,
left: analysisPane.style.left,
display: analysisPane.style.display
};
analysisPane.style.position = 'absolute';
analysisPane.style.left = '-9999px';
analysisPane.style.display = 'block';
// Now that it's visible (but off-screen), we can capture it
pdf.text('Cost Analysis & Comparison', 14, 40);
const canvasAnalysis = await html2canvas(analysisContent, {
scale: 2,
// These options can help if images or charts don't render correctly
allowTaint: true,
useCORS: true
});
// Restore the original styles to hide the tab again
analysisPane.style.position = originalAnalysisStyle.position;
analysisPane.style.left = originalAnalysisStyle.left;
analysisPane.style.display = originalAnalysisStyle.display;
const imgDataAnalysis = canvasAnalysis.toDataURL('image/png');
const pdfWidth = pdf.internal.pageSize.getWidth();
pdf.addImage(imgDataAnalysis, 'PNG', 10, 45, pdfWidth - 20, 0);
// --- Capture Recommendations Section ---
pdf.addPage();
pdf.setFontSize(14);
pdf.text('Optimization Recommendations', 14, 20);
// This content is in the currently active tab, so it can be captured directly.
const canvasRecs = await html2canvas(recommendationsContent, { scale: 2 });
const imgDataRecs = canvasRecs.toDataURL('image/png');
pdf.addImage(imgDataRecs, 'PNG', 10, 25, pdfWidth - 20, 0);
pdf.save('Cloud_Storage_Optimization_Report.pdf');
};
// --- Event Listeners ---
tabButtons.forEach((button, index) => {
button.addEventListener('click', () => switchTab(index));
});
nextBtn.addEventListener('click', () => {
if (currentTabIndex < tabButtons.length - 1) {
switchTab(currentTabIndex + 1);
}
});
prevBtn.addEventListener('click', () => {
if (currentTabIndex > 0) {
switchTab(currentTabIndex - 1);
}
});
pdfDownloadBtn.addEventListener('click', generatePDF);
// --- Initial Setup ---
updateNavButtons(); // Set initial state of nav buttons
});
