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

How to Export SVG graph to pdf using html canvas

本文关键字：图形 pdf SVG 何使用 html      更新时间：2023-09-26

我正在使用D3.js，它在SVG中呈现条形图，但我无法像在HTML5画布中呈现的其他图形一样导出完整的图形初始化为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>

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

尝试画布转换SVG到画布。然后使用. todataurl()将画布转换为base64字符串。JsPdf回购。Canvg回购:.

相关文章：