How to get the formatting when converting HTML to PDF

[vidhya_mouli]

I have created a custom widget which generates a newsletter page. I want to download the PDF version of this page (with formatting). Right now it works but without formatting. Any suggestions to get the formatting?

<div class="widget-container">
  <div class="widget-grid" id="newsletterGrid">
    <div ng-repeat="newsletter_data in data.newsletter" class="widget-card">
      <div class="card-content">
        <div class="card-title">{{newsletter_data.title}}</div>
        <img src="{{newsletter_data.image}}" alt="Newsletter Image" class="card-image" width="200" height="100" />
        <div class="card-description">{{newsletter_data.newsletter}}</div>
        
      </div>
    </div>
  </div>    
  <button id="exportButton" ng-click="c.exportToPDF()">Export to PDF</button>
</div>

Client Script:

api.controller = function() {
  var c = this;

  // Function to export HTML content to PDF
  c.exportToPDF = function() {
    var element = document.getElementById('newsletterGrid'); // Get the container element

    var opt = {
      margin:       0.5,
      filename:     'newsletter.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
		
		
		html2pdf().from(element).set(opt).save();
  }; 
};