Javascript 将Flot图表另存为PDF

我正在尝试将整个flot（饼图/条形图）保存为PDF格式。我正在使用jQuery/FLOT绘制饼图和条形图

我有下载flot图表的PDF格式的代码，但我在一个页面中有三个图表，问题是一旦我单击下载，它们就会打印在页面中，同时我分别以不同的PDF格式获得它们。 我的问题是，是否可以将它们全部放在一个pdf中，而不在页面中打印它们

有什么想法吗

多谢各位

这是我的密码：

 <div id="container" style="width:330px;height:330px"></div>

  <a id="toPdf">Download as PDF </a>

  var _canvas = null;

   $(function() {
   $.plot($("#container"), [ { label: 'Test', data: [[0, 0], [1, 9]] } ], { yaxis: { max: 1 } });
   $("#toPdf").on("click", function(e) {
    e.preventDefault();

        html2canvas($("#container").get(0), {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);

                var imgData = canvas.toDataURL('image/png');
                console.log('Report Image URL: '+imgData);
                var doc = new jsPDF('landscape');

                doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
                doc.save('testingPDF.pdf');
            }
        });
         });
      });

以PDF格式下载
var\u canvas=null；
$（函数（）{
$.plot（$（“#容器”），[{label:'Test'，data:[[0,0]，[1,9]}]，{yaxis:{max:1}}）；
$（“#toPdf”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
html2canvas（$（“#容器”）.get（0）{
onrendered：函数（画布）{
document.body.appendChild（画布）；
var imgData=canvas.toDataURL（'image/png'）；
log（'Report Image URL:'+imgData）；
var doc=新的jsPDF（“景观”）；
addImage文件（imgData，'PNG'，10,10,190,95）；
doc.save（'testingPDF.pdf'）；
}
});
});
});

工作完成后，您是否尝试过移除画布

$(function() {
    $.plot($("#container"), [ { label: 'Test', data: [[0, 0], [1, 9]] } ], { yaxis: { max: 1 } });
    $("#toPdf").on("click", function(e) {
    e.preventDefault();

        html2canvas($("#container").get(0), {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);

                var imgData = canvas.toDataURL('image/png');
                console.log('Report Image URL: '+imgData);
                var doc = new jsPDF('landscape');

                doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
                doc.save('testingPDF.pdf');
                document.body.removeChild(canvas); //  newly added line
            }
        });
    });
});

更新

var _canvas = null;

$(function () {
    $.plot($(".container1"), [{
        label: 'Testing1',
        data: [
            [0, 0],
            [1, 9]
        ]
    }], {
        yaxis: {
            max: 1
        }
    });
    $.plot($(".container2"), [{
        label: 'Testing2',
        data: [
            [0, 0],
            [1, 9]
        ]
    }], {
        yaxis: {
            max: 1
        }
    });
    $.plot($(".container3"), [{
        label: 'Testing3',
        data: [
            [0, 0],
            [1, 9]
        ]
    }], {
        yaxis: {
            max: 1
        }
    });

    window.allcanvas = [];

    $("#toPdf").on("click", function (e) {
        e.preventDefault();
        var allcontainers = $('[class^="container"]');
        allcontainers.each(function (index, elem) {
            html2canvas($(elem).get(0), {
                onrendered: function (canvas) {
                    window.allcanvas.push(canvas);
                    if(allcontainers.length == allcanvas.length){
                        finalpdf();
                    }
                }
            });
        });
    });
    finalpdf = function(){
        var doc = new jsPDF('landscape');
        for(var i = 0; i<allcanvas.length;i++){
            var imgData = allcanvas[i].toDataURL('image/jpeg');
            doc.addImage(imgData, 'JPEG', 10, 10, 190, 95);
            if(i != allcanvas.length-1)
                doc.addPage();
        }
        doc.save('testingPDF.pdf');
    };
});

看看这个新的（你想要什么链接吗？）

HTML

<div class="container1" style="width:330px;height:330px"></div>
<div class="container2" style="width:330px;height:330px"></div>
<div class="container3" style="width:330px;height:330px"></div>
<a id="toPdf">Generate to pdf </a>

生成pdf格式

代码

var _canvas = null;

$(function () {
    $.plot($(".container1"), [{
        label: 'Testing1',
        data: [
            [0, 0],
            [1, 9]
        ]
    }], {
        yaxis: {
            max: 1
        }
    });
    $.plot($(".container2"), [{
        label: 'Testing2',
        data: [
            [0, 0],
            [1, 9]
        ]
    }], {
        yaxis: {
            max: 1
        }
    });
    $.plot($(".container3"), [{
        label: 'Testing3',
        data: [
            [0, 0],
            [1, 9]
        ]
    }], {
        yaxis: {
            max: 1
        }
    });

    window.allcanvas = [];

    $("#toPdf").on("click", function (e) {
        e.preventDefault();
        var allcontainers = $('[class^="container"]');
        allcontainers.each(function (index, elem) {
            html2canvas($(elem).get(0), {
                onrendered: function (canvas) {
                    window.allcanvas.push(canvas);
                    if(allcontainers.length == allcanvas.length){
                        finalpdf();
                    }
                }
            });
        });
    });
    finalpdf = function(){
        var doc = new jsPDF('landscape');
        for(var i = 0; i<allcanvas.length;i++){
            var imgData = allcanvas[i].toDataURL('image/jpeg');
            doc.addImage(imgData, 'JPEG', 10, 10, 190, 95);
            if(i != allcanvas.length-1)
                doc.addPage();
        }
        doc.save('testingPDF.pdf');
    };
});

var\u canvas=null；
$（函数（）{
$.plot（$（“.container1”）[{
标签：“Testing1”，
数据：[
[0, 0],
[1, 9]
]
}], {
亚克斯：{
最高：1
}
});
$.plot（$（“.container2”）[{
标签：“Testing2”，
数据：[
[0, 0],
[1, 9]
]
}], {
亚克斯：{
最高：1
}
});
$.plot（$（“.container3”）[{
标签：“Testing3”，
数据：[
[0, 0],
[1, 9]
]
}], {
亚克斯：{
最高：1
}
});
window.allcanvas=[]；
$（“#toPdf”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var allcontainers=$（'[class^=“container”]'）；
所有容器。每个（函数（索引，元素）{
html2canvas（$（elem）.get（0）{
onrendered：函数（画布）{
window.allcanvas.push（画布）；
if（allcontainers.length==allcanvas.length）{
finalpdf（）；
}
}
});
});
});
finalpdf=函数（）{
var doc=新的jsPDF（“景观”）；
对于（var i=0；iIs是否可以调整图形大小我指的是PDF中的饼图？非常感谢您的帮助。您让我度过了美好的一天：）我可以问您一个最喜欢的问题吗请您评论一下您的代码在哪里编码如何生成PDF。谢谢