// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A4 Document with Custom Header</title> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div class="controls-container"> <div class="csv-controls"> <label for="csvFileInput" class="csv-label">Load Data from CSV:</label> <input type="file" id="csvFileInput" accept=".csv" class="csv-input"> </div> <div class="navigation-controls"> <button id="prevButton" class="action-button nav-button" disabled>« Prev</button> <span id="recordIndicator" class="record-indicator">No data loaded</span> <button id="nextButton" class="action-button nav-button" disabled>Next »</button> </div> <div class="button-container"> <button id="downloadPdfButton" class="action-button">Download as PDF</button> </div> </div> <div class="a4-sheet"> <div class="document-header"> <div class="header-left"> <div class="trl-section"> <div class="logo-placeholder"> <img src="./assets/iiitd_logo.png" alt="IIITD Logo"/> </div> <div class="trl-details">TRL: <span class="trl-value-number" id="trlNumDisplay" contenteditable="true">N/A</span></div> </div> <div class="tech-title-section"> <h1 id="techTitleDisplay" contenteditable="true">Technology Title</h1> </div> </div> <div class="header-right"> <img src="./assets/iiitd_building.jpeg" alt="Header Image Placeholder"> </div> </div> <div class="main-content"> <div class="innovator-docket-patent"> <p><strong>Innovator:</strong> <span id="innovatorsDisplay" contenteditable="true">N/A</span></p> <p><strong>Docket:</strong> <span id="docketDisplay" contenteditable="true">N/A</span></p> <p><strong>Patent:</strong> <span id="patentStatusDisplay" contenteditable="true">N/A</span></p> </div> <div class="description"> <div class="description-header"> <h2>Description</h2> </div> <div class="description-content"> <p id="descriptionDisplay" contenteditable="true">Description of the technology will appear here once data is loaded.</p> </div> </div> </div> </div> <script src="script.js"></script> </body> </html> // script.js document.addEventListener('DOMContentLoaded', () => { const csvFileInput = document.getElementById('csvFileInput'); const prevButton = document.getElementById('prevButton'); const nextButton = document.getElementById('nextButton'); const recordIndicator = document.getElementById('recordIndicator'); const downloadPdfButton = document.getElementById('downloadPdfButton'); const trlNumDisplay = document.getElementById('trlNumDisplay'); const techTitleDisplay = document.getElementById('techTitleDisplay'); const innovatorsDisplay = document.getElementById('innovatorsDisplay'); const docketDisplay = document.getElementById('docketDisplay'); const patentStatusDisplay = document.getElementById('patentStatusDisplay'); const descriptionDisplay = document.getElementById('descriptionDisplay'); let csvData = []; let currentRecordIndex = 0; function parseCSV(csvText) { const lines = csvText.trim().split('\n'); const headers = lines[0].split(',').map(header => header.trim()); const data = []; for (let i = 1; i < lines.length; i++) { const values = []; let currentVal = ''; let inQuotes = false; for (let char of lines[i]) { if (char === '"') { inQuotes = !inQuotes; } else if (char === ',' && !inQuotes) { values.push(currentVal.trim()); currentVal = ''; } else { currentVal += char; } } values.push(currentVal.trim()); // Add the last value if (values.length === headers.length) { const entry = {}; headers.forEach((header, index) => { let value = values[index]; // Remove surrounding quotes if present only at start/end if (value.startsWith('"') && value.endsWith('"')) { value = value.substring(1, value.length - 1); } entry[header] = value; }); data.push(entry); } } return data; } function displayRecord(index) { if (csvData.length === 0 || index < 0 || index >= csvData.length) { return; } const record = csvData[index]; trlNumDisplay.textContent = record.trl_num || 'N/A'; techTitleDisplay.textContent = record.tech_title || 'N/A'; // Innovators might be a comma-separated string, display as is or format innovatorsDisplay.textContent = record.innovators ? record.innovators.split(',').map(s => s.trim()).join(', ') : 'N/A'; docketDisplay.textContent = record.docket || 'N/A'; patentStatusDisplay.textContent = record.patent_status || 'N/A'; descriptionDisplay.textContent = record.description || 'N/A'; recordIndicator.textContent = `Record ${index + 1} of ${csvData.length}`; currentRecordIndex = index; prevButton.disabled = index === 0; nextButton.disabled = index === csvData.length - 1; } csvFileInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { try { csvData = parseCSV(e.target.result); if (csvData.length > 0) { displayRecord(0); downloadPdfButton.disabled = false; } else { recordIndicator.textContent = "No valid data found in CSV."; prevButton.disabled = true; nextButton.disabled = true; downloadPdfButton.disabled = true; } } catch (error) { console.error("Error parsing CSV:", error); recordIndicator.textContent = "Error parsing CSV file."; alert("Could not parse CSV file. Please check the format."); csvData = []; prevButton.disabled = true; nextButton.disabled = true; downloadPdfButton.disabled = true; } }; reader.readAsText(file); } }); prevButton.addEventListener('click', () => { if (currentRecordIndex > 0) { displayRecord(currentRecordIndex - 1); } }); nextButton.addEventListener('click', () => { if (currentRecordIndex < csvData.length - 1) { displayRecord(currentRecordIndex + 1); } }); // PDF Download Functionality (from your existing script) downloadPdfButton.addEventListener('click', () => { if (csvData.length === 0) { alert("Please load data from a CSV file first."); return; } const element = document.querySelector('.a4-sheet'); const controlsContainer = document.querySelector('.controls-container'); controlsContainer.style.display = 'none'; const opt = { margin: 0, filename: `a4_doc_trl${csvData[currentRecordIndex]?.trl_num || 'N'}_${csvData[currentRecordIndex]?.tech_title?.substring(0,15) || 'Untitled'}.pdf`, image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2, useCORS: true, logging: false, letterRendering: true, scrollX: -window.scrollX, scrollY: -window.scrollY, windowWidth: document.documentElement.offsetWidth, windowHeight: document.documentElement.offsetHeight }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } }; html2pdf().from(element).set(opt).save().then(() => { controlsContainer.style.display = 'flex'; }).catch(err => { console.error("Error generating PDF:", err); controlsContainer.style.display = 'flex'; }); }); // Initially disable download button until data is loaded downloadPdfButton.disabled = true; }); // style.css -> pasted "i want a functionality in which, i want to have a 10mm margin at top and end (except for 10mm gap in page 1 top)of each a4 sized sheet downloaded except the first page, that means when i click on download button, and there is too much content in my a4 sized sheet, then obvisouly it must be spillted acorss more than 1 pages, so for all the pages except for page 1, add a 10mm gap at the end and top of the page (except for 10mm gap in page 1 top) and give complete fixed js file only, not any other file, and dont change any other funcionality
I'll modify the JavaScript file to add the 10mm margins at the top and bottom of each page (except the first page) when generating the PDF. Here's the complete updated script.js file:
script.js
I found some issues in the code block.
I will fix them.
script.js
The key changes I made:
Added a custom pageRenderer function that:
pageRenderer to the html2pdf optionspagebreak: { mode: 'avoid-all' } to improve page breaking behaviorcompress: true to the jsPDF options for better PDF qualityThis implementation maintains all the existing functionality while adding the requested margin behavior for multi-page PDFs.