Good Afternoon. In my ongoing saga in using jsPDF, html2canvas and now html2pdf to capture a div element in order to export the html content as a PDF, I'm having some and issue on 3 fronts.

1. How do I increase the text quality? It's somewhat blurring and would like the report text and image to be somewhat crisper.

2. Is there a way to use the .html() function from jsPDF instead of saving the content as an image in the PDF file?

3. Is there a better way to this? This feature has been a total headache. The crazy thing, in the actual web app, I have print button that nicely formats the html, I get the print window and it saves nicely as PDF. Unfortunately many users don't like the extra step and prefer just downloading.

Note: I'm using the current version of html2pdf.js for the page break functionality which I'm working on. The following code is not set up yet to incorporate the page break capability.

Here is my code:

HTML:

<div class="modal-body" id="printItems">
  <div class="container" id="selectedItems"></div>  
</div>

<button stule="border:none"><span id="downloadActivity" class="glyphicon glyphicon-download-alt" title="download report to PDF" onclick="downloadToPDF()"</span></button>

<script type="text/javascript" src="/library/html2pdf.bundle.js"></script>

Javascript:

function downloadPDF() {
  
  var opt = 
    {
        margin:1,   
        filename: webPage + dateStamp + '.pdf',
        quality: 0.95,
        image: {type: 'jpeg', quality:4},
            html2canvas: {
            dpi:100,
            useCORS: true,
            letterRendering: true,
            width: 205,
            scale: 0.26,
            getContext: '2d'
        },
        jsPDF: {unit: 'in', format: 'a4', orientation: 'portrait}
    };
   html2pdf().from(element).ser(opt).toPdf().get('pdf').then(function(pdf){
        pdf.setFontSize(9)
        pdf.text(JSON.parse(localStorage.getItem('classKey')), 75, 1, {baseline: 'top' });
    }).save()


}