jquery - 使用 jquery flot 将图表导出为 pdf

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 位置，使其不会与第一个图表重叠。
• 为图表和 Canvas 设置白色背景。

查看此更新的 fiddle :http://jsfiddle.net/g2CTz/515/