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

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

将图表导出为 pdf 使用 jquery flot

Export graph to pdf use jquery flot

jquery

charts

flot

html2canvas

jspdf