How to generate a PDF with javascript

I have my javascript code that generates the rows of my table as follows:

    var row = table.insertRow();                        
    row.innerHTML = "<tr><td>"+ms+"</td><td id='cuota' name ='cuota' class='col-xs-7'>"+cuota+"</td><td id='interes' name='interes'>"+interes+"</td><td id='amorti' name='amorti'>"+amortizacion+
    "</td><td id='capital' name='capital'>"+capital+"</td><td id='segurodesgrav' name='segurodesgrav'>"+segurodesgrav+"</td><td  id='seguroinmobil' name='seguroinmobil'>"+seguroinmobil+"</td><td id='gastosadm' name='gastosadm'>"+gastosadm+"</td><td id='cuotafinal' name='cuotafinal'>"+cuotafinal+"</td></tr>";

In my html I use this script to generate my pdf, but it generates it wrong, how can I fix it, or in another simpler way I can create the pdf, without losing the css, I don’t want to use canvas, because the previous programmer used it, but it has problems when generating the pdf on screens such as cell phones and it comes out cut off at the mid (width), the height is correct.

<script>  
  function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter'); 
        source = $('#visibletabla')[0];

        specialElementHandlers = { 
            '#bypassme': function (element, renderer) { 
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 20,
            width: 8000,
            border:0 
        }; 
        pdf.fromHTML(
            source, // HTML string or DOM elem ref.
            margins.left, // x coord
            margins.top, { // y coord
                'width': margins.width, // max width of content on PDF
                'elementHandlers': specialElementHandlers
            },

            function (dispose) { 
                pdf.save('silmulador_planahorrocasa.pdf');
            }, margins
        );
  }
</script>

How do I generate the pdf (wrong)

How do I have the table in the html