dousui8263
dousui8263
2016-08-25 16:55

too long

已采纳

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
        });
    }
}());
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dousi7919 dousi7919 5年前

    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:.

    点赞 评论 复制链接分享