jsPDF addHTML exporting low quality image to PDF

Question

Simple question searching from last 2 days but didnt find solution i am converting html to pdf using this addHTML api of jsPDF

$('#loadPdf').on('click', function() {
        var pdf = new jsPDF('p', 'in', 'a4');
        pdf.addHTML($('#complete')[0], function() {
            pdf.save('new.pdf');
            pdf.output('datauri');
        });
    });

this is producing blur image pdf the text is showing blurry. I searched a lot find some links (share below) but didn't get answer.

html2canvas-generates-blurry-images

addHTML image quality

jspdf and addHTML / blurry font

is there any way available to get high quality image pdf. If i don't use addHTML api and use any other then image is not displaying in pdf. help please

Answer 1

It looks like that many are still using pdf.addHTML() and have the same low quality issue. pdf.addHTML() is actually deprecated now. The new vector-supporting API, pdf.html(), works much better. See their sample for yourself. Here is the working code using jsPDF and html2canvas 1.0.0-alpha.11 :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous">
</script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
    function download() {
        let pdf = new jsPDF('l', 'pt', 'a4');
        pdf.html(document.getElementById('id'), {
            callback: function () {
                //pdf.save('test.pdf');
                window.open(pdf.output('bloburl')); // to debug
            }
        });
    }
</script>