Javascript 如何使用html画布将SVG图形导出为pdf

我使用的是D3.js，它在SVG中呈现条形图，但我无法像在HTML5画布中呈现的其他图形一样，将完整的graph init导出为PDF。我该怎么做

(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
        });
    }
}());

---

我让这个插件工作了。我的html标签中有一个小问题

**HTML**

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

尝试使用canvg将SVG转换为Canvas。然后使用.toDataURL（）将画布转换为base64字符串。 .

---

.

请在代码中添加一些注释。您是如何成功地将html5画布图形转换为PDF的，还是如何尝试使用SVG，或者两者都转换，还是其他什么？画布参数是什么？getCanvas（）.then（函数（画布）{…}

 (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
            });
        }

    }());