Issues with generating good Quality pdf from javascript libraries: jspdf and html2canvas

Question

Well, I am working on a utility tool that produces a pdf output. The data is fetched from the user and after some manipulation is converted into a pre-defined format, which is then required in .pdf format with all css intact.

Its an entirely client side application.

I am using jsPdf + html2canvas for this. But I have following concerns:

1. First and foremost, couldn't find any API documentation for them. I am still working with pieces of codes found at various sites.
2. Whatever, I have achieved the Quality of output is far from expected.
3. When my HTML doc is large enough to occupy multiple pages, I still get pdf of only first page. (This, I guess is due to my lack of knowledge, again due to lack of documentation.)

I have seen, there are many similar question. I tried almost all of them, few do not work at all, few triggers some errors and I am still stuck.

So my Queries:

1. Is my selection, suitable for producing good quality pdf (atleast 80%-90% of how it is visible on screen). Will really appreciate, if someone can direct me to good quality output pieces of jspdf and html2canvas.

2. Please guide to a proper documentation on these libs. What I currently have is doc folder provided along zip file in github, which is surely not enough to make out best out of it.

3. If this approach is not feasible, please direct to a better product. Quality is the top notch requirement for us, performance can be negotiated. Ready for paid libraries. But prefer, client side tools (as there is literally no need for server side implementation).

I posted question for above queries, but just in case required, my code:

function previewCtrlFn($scope, Database){
        var vm = this;
        vm.resume = Database.resume;
        console.log(angular.toJson(vm.resume));
        vm.pdf = createPDF;

        var form = $('#aa'),
             width = form.width(),
             a4  =[ 615.28,  841.89];  

        function createPDF(){
         getCanvas().then(function(canvas){
          var 
          img = canvas.toDataURL("image/png"),
          doc = new jsPDF({
                  unit:'px', 
                  format:'a4'
                });     
        doc.addImage(img, 'JPEG', 5, 5);
        doc.save('resume.pdf');
        form.width(width);
         });
        }

        // create canvas object
        function getCanvas(){
         form.width((a4[0]*1.33333) -80).css('max-width','none');
         return html2canvas(form,{
             imageTimeout:1000,
             removeContainer:true
            }); 
        }
    }

I really need some quick help on this.

Answer 1

you can use this code, your pdf size and quality will improve

html2canvas(body,{
    onrendered:function(canvas){
        var img=canvas.toDataURL("image/png");
        console.dir(canvas);
        var pdf=new jsPDF("p", "mm", "a4");
        var width = pdf.internal.pageSize.width;    
        var height = pdf.internal.pageSize.height;
        pdf.addImage(canvas, 'JPEG', 0, 0,width,height);
        pdf.save('test11.pdf');
    }
})