将图形导出为pdf使用jquery flot

Question

我在导出更多使用jquery flot到pdf

的图表方面遇到了问题

我使用html2canvas.js和jspdf-min.js将graphs导出到pdf，但我有两个问题：

首先，它导致pdf太丑了。

第二次，我想在一页中导出两个图表，但它会导出为两页。

这是我的代码：

var _canvas = null;
$(function() {
  $("#id_generate_pdf").on("click", function (e) {
    window.allcanvas = [];
    var allcontainers = $('[id^="flot-placeholder"]');

    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, 280, 65);
      if(i != allcanvas.length-1) {
        doc.addPage();
      }
    }
    doc.save('testingPDF.pdf');
  };
});

以下是我的演示：My demo code

希望每个人都能支持我。非常感谢你。

更新：

我想导出pdf，此pdf包含与我附加的image相同的文字。

我不知道该怎么做。请给我一些想法或一些建议。非常感谢你。

My demo code update

Answer 1

• 取消对doc.addPage();
的通话
• 将doc.addImage()参数中的宽度和高度更改为与图表具有相同比例的内容。
• 更改第二个图表的y位置，使其不与第一个图表重叠。
• 将白色背景设置为图表和画布。

请参阅此更新的小提琴：http://jsfiddle.net/g2CTz/515/