從圖表和表格生成PDF

Question

每當我點擊PDF時，圖表和表格都應該嵌入到PDF文件中，但在這裏我只能看到表格。 請給我suggetions JSFIDDLE LINK

Answer 1

這爲我做了這份工作。可悲的是，我沒有檢查日誌，並確保它在我使用手機時保持清潔。但我至少有工作。

 <div id="customers"> 
      <canvas id="myChart" width="500" height="300"></canvas> 
      <table id="tab_customers" class="table table-striped"> 
       <colgroup> 
        <col width="20%"> 
        <col width="20%"> 
        <col width="20%"> 
        <col width="20%"> 
       </colgroup> 
       <thead> 
        <tr class='warning'> 
         <th>Country</th> 
         <th>Population</th> 
         <th>Date</th> 
         <th>Age</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>Chinna</td> 
         <td>1,363,480,000</td> 
         <td>March 24, 2014</td> 
         <td>19.1</td> 
        </tr> 
        <tr> 
         <td>India</td> 
         <td>1,241,900,000</td> 
         <td>March 24, 2014</td> 
         <td>17.4</td> 
        </tr> 
        <tr> 
         <td>United States</td> 
         <td>317,746,000</td> 
         <td>March 24, 2014</td> 
         <td>4.44</td> 
        </tr> 
        <tr> 
         <td>Indonesia</td> 
         <td>249,866,000</td> 
         <td>July 1, 2013</td> 
         <td>3.49</td> 
        </tr> 
        <tr> 
         <td>Brazil</td> 
         <td>201,032,714</td> 
         <td>July 1, 2013</td> 
         <td>2.81</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <button onclick="demoFromHTML();">PDF</button> 
     <script> 
      function demoFromHTML() { 
       var pdf = new jsPDF('p', 'pt', 'letter'); 
       // source can be HTML-formatted string, or a reference 
       // to an actual DOM element from which the text will be scraped. 
       source = $('#customers').html(); 



       // we support special element handlers. Register them with jQuery-style 
       // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) 
       // There is no support for any other type of selectors 
       // (class, of compound) at this time. 
       specialElementHandlers = { 
        // element with id of "bypass" - jQuery style selector 
        '#bypassme': function(element, renderer) { 
         // true = "handled elsewhere, bypass text extraction" 
         return true 
        } 
       }; 
       margins = { 
        top: 300, 
        bottom: 60, 
        left: 40, 
        width: 522 
       }; 
       // all coords and widths are in jsPDF instance's declared units 
       // 'inches' in this case 

       var canvas = document.getElementById('myChart'); 
       var context = canvas.getContext('2d'); 
       var imgData = canvas.toDataURL("image/gif", 1.0); 
       pdf.addImage(imgData, 'GIF', margins.left, // x coord 
        40); 
       pdf.fromHTML(

        source, // HTML string or DOM elem ref. 
        margins.left, // x coord 
        margins.top, { // y coord 
         'width': margins.width, // max width of content on PDF 
         'elementHandlers': specialElementHandlers 
        }, 

        function(dispose) { 


         // dispose: object with X, Y of the last line add to the PDF 
         //   this allow the insertion of new lines after html 
         pdf.save('Test.pdf'); 
        }, margins); 
      } 

      var data = { 
       labels: ["January", "February", "March", 
        "April", "May", "June", 
        "July", "Agost", "September", 
        "October", "November", "December" 
       ], 
       datasets: [{ 
        fillColor: "rgba(252,233,79,0.5)", 
        strokeColor: "rgba(82,75,25,1)", 
        pointColor: "rgba(166,152,51,1)", 
        pointStrokeColor: "#fff", 
        data: [65, 68, 75, 
         81, 95, 105, 
         130, 120, 105, 
         90, 75, 70 
        ] 
       }] 
      } 
     </script>