How to Export SVG graph to pdf using html canvas

Question

I am using D3.js which renders the bar graph in SVG but I'm not able to export the full graph init to PDF like other graph which are rendered in HTML5 canvas. How do I do that?

(function(){
    var
        form = $('.form'),
        cache_width = form.width(),
        a4  =[ 1100.28, 580.89];  // for a4 size paper width and height

    $('#create_pdf').on('click',function(){

        $('body').scrollTop(0);
        createPDF();
    });
//create pdf
    function createPDF(){
        getCanvas().then(function(canvas){
        var imgData = canvas.toDataURL('image/png');
        /*
         Here are the numbers (paper width and height) that I found to work.
         It still creates a little overlap part between the pages, but good enough for me.
         if you can find an official number from jsPDF, use them.
         */
        var imgWidth = 210;
        var pageHeight = 295;
        var imgHeight = canvas.height * imgWidth / canvas.width;
        var heightLeft = imgHeight;

        var doc = new jsPDF('p', 'mm');
        var position = 0;

        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;

        while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            doc.addPage();
            doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
        }
        doc.save( 'datamagnified_AE.pdf');
        });
    }


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

Answer 1

I got this plugin working.Small Issue in my html tag .

** HTML **

<li>
<a title="Download" id="create_pdf" ></a>
</li>

** jQuery**

 (function(){
        var
            form = $('.form'),
            cache_width = form.width(),
            a4  =[ 1100.28, 580.89];  // for a4 size paper width and height

        $('#create_pdf').on('click',function(){

            $('body').scrollTop(0);
            createPDF();
        });
    //create pdf
        function createPDF(){
            getCanvas().then(function(canvas){
            var imgData = canvas.toDataURL('image/png');
            /*
             Here are the numbers (paper width and height) that I found to work.
             It still creates a little overlap part between the pages, but good enough for me.
             if you can find an official number from jsPDF, use them.
             */
            var imgWidth = 210;
            var pageHeight = 295;
            var imgHeight = canvas.height * imgWidth / canvas.width;
            var heightLeft = imgHeight;

            var doc = new jsPDF('p', 'mm');
            var position = 0;

            doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;

            while (heightLeft >= 0) {
                position = heightLeft - imgHeight;
                doc.addPage();
                doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;
            }
            doc.save( 'datamagnified_AE.pdf');
            });
        }


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

    }());

Try canvg for that to covert SVG to Canvas. Then convert the canvas to base64 string using .toDataURL(). JsPdf Repo. Canvg Repo:.