APEX

Hello Everyone,

I am trying to build download feature for pl/sql dynamic content region, Below is the my testing content added so may <br> tags to increase length of content.

DECLARE
v_html_content CLOB := '';
v_receipt_id varchar2(64):='24-000991';

BEGIN
v_html_content := '<div id="content" style="margin: 0; padding: 0; height: 297mm; overflow: auto; position: relative; top: 0;">'; -- Start of content

v_html_content := v_html_content || '<div>';
v_html_content := v_html_content || '<table border="0" width="100%" style="padding: 0; margin: 0;">';
v_html_content := v_html_content || '<tr><td style="padding: 0; margin: 0;" ><img src="#APP_IMAGES#Health Centre.png" "> </td></tr>';
v_html_content := v_html_content || '</table>';
v_html_content := v_html_content || '</div>';

v_html_content := v_html_content || 'Point and purpose is the key to understanding t<br>ypes of paragraphs and kinds of paragraphs.

In writing, the words point and <br>purpose are almost synonymous. <br> Your point is your purpose, and <br>how you decide to make your <br>point clear to your reader is also y<br>our purpose. Writers have a poi<br>nt and a purpose for every paragraph that they create.

Writers write descriptive parag<br>raphs beca<br>use their pur<br>pose is to describe something. Th<br>eir point is <br>that something is beautiful or disgu<br>sting or strangely intriguing<br>. Writers w<br>rite persuasive and <br>argument paragraphs bec<br>ause their purpose is to persuade o<br>r convince someone. Their point is that their reader should see thi<br>ngs a particular way and possi<br>bly take action on that new way of seeing things. W<br>riters write paragraphs of <br>comparison because the comparison will make their poin<br>t clear to their readers.' ||'<br>';

v\_html\_content := v\_html\_content || '\<button type="button"  onclick="downloadFile('' '||v\_receipt\_id||' '');">Download PDF\</button>';

v_html_content:=v_html_content||'</div>';

htp.p(v_html_content);
END;

Any how this content is showing correctly in dynamic content page. If i take print of this page it is fit to A4.But the problem is when i download this page using below code the vertical alignment is disturbed differently when i try with different content length. (The css part which i have applied to the page it is fit to A4 tried with print). Can anyone know the issue? or Has different approach?

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.2/html2pdf.js"></script>

<script>

function downloadFile(receiptId) {
console.log("Download button clicked for receipt ID:", receiptId);

   var element = document.getElementById('content');  
   if (element) {  
       var opt = {  
           margin: \[0, 0, 0, 0\],  // Adjust margins for better fitting  
           filename: receiptId + '.pdf',  
           image: { type: 'jpeg', quality: 0.98 },  
           html2canvas: { scale: 1.5, useCORS: true }, // Use CORS if loading images from other domains  
           jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }  
       };

       // Setting the element's width to ensure it fits A4 size  
       element.style.width = '210mm'; // A4 width in mm  
       element.style.height = 'auto'; // Maintain aspect ratio

       html2pdf().from(element).set(opt).save().then(function() {  
           console.log('PDF downloaded successfully');  
       }).catch(function(err) {  
           console.error('Error generating PDF:', err);  
       });  
   } else {  
       console.error("Content element not found.");  
   }  

}

</script>