將浮動圖表保存爲PDF

Question

我正在嘗試將整個浮動塊（餅圖/條形圖）保存爲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'); 
      } 
     }); 
     }); 
     }); 

Answer 1

您是否嘗試刪除畫布，一旦工作完成？

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

UPDATE

看看這個新fiddle（你想要的東西鏈路上，這對嗎？）

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> 

CODE

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'); 
    }; 
});