jsPDF添加圖表

Question

我正在使用jsPDF通過Appcelerator的Titanium生成PDF文檔。現在我需要添加一個簡單的兩段餅圖。我怎麼能以最簡單的方式做到這一點？

它不需要任何花哨。我正在考慮首先生成圖像，並將該圖像添加到文檔中。也許有一個圖書館可以生成餅圖的圖像並將其保存到手機中。然而，即時通訊不知道jsPDF支持圖像，我似乎無法找到任何好的文檔庫。

Answer 1

也許您可以先檢查jsPDF網站，您可以使用庫（也許是谷歌圖表）生成圖像，將圖表保存爲圖像，然後使用插件jspdf.plugin.addimage.js和一些代碼添加到PDF。 這是從他們的網站

var imgData = 'here the jpeg image string on base64'; 
var doc = new jsPDF(); 

doc.setFontSize(40); 
doc.text(35, 25, "Octonyan loves jsPDF"); 
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180); 

Answer 2

採取我知道它已經閒置了近一年的example，但因爲它沒有一個公認的答案，我會盡力回答。

添加圖表jsPDF

1.Convert的圖表，以使用HTML畫布支持的圖像格式（JPEG或者PNG在base64編碼）。

2.確保圖像URL可用於addImage函數。

下面是將圖像添加到jsPDF文檔而不必包含原始base64代碼的示例。它來自jsPDF示例。

function demoImages() { 
    // Because of security restrictions, getImageFromUrl will 
    // not load images from other domains. Chrome has added 
    // security restrictions that prevent it from loading images 
    // when running local files. Run with: chromium --allow-file-access-from-files --allow-file-access 
    // to temporarily get around this issue. 
    var getImageFromUrl = function(url, callback) { 
     var img = new Image(), data, ret = { 
      data: null, 
      pending: true 
     }; 

     img.onError = function() { 
      throw new Error('Cannot load image: "'+url+'"'); 
     }; 
     img.onload = function() { 
      var canvas = document.createElement('canvas'); 
      document.body.appendChild(canvas); 
      canvas.width = img.width; 
      canvas.height = img.height; 

      var ctx = canvas.getContext('2d'); 
      ctx.drawImage(img, 0, 0); 
      // Grab the image as a jpeg encoded in base64, but only the data 
      data = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length); 
      // Convert the data to binary form 
      data = atob(data); 
      document.body.removeChild(canvas); 

      ret['data'] = data; 
      ret['pending'] = false; 

      console.log("data",data); 

      if (typeof callback === 'function') { 
       callback(data); 
      } 
     }; 
     img.src = url; 

     return ret; 
    }; 

    // Since images are loaded asyncronously, we must wait to create 
    // the pdf until we actually have the image data. 
    // If we already had the jpeg image binary data loaded into 
    // a string, we create the pdf without delay. 
    var createPDF = function(imgData) { 
     var doc = new jsPDF(); 

     doc.addImage(imgData, 'JPEG', 10, 10, 50, 50); 
     doc.addImage(imgData, 'JPEG', 70, 10, 100, 120); 

     doc.save('output.pdf'); 

    } 

    getImageFromUrl('thinking-monkey.jpg', createPDF); 
} 

jsPDF

的良好的文檔你會學到很多jsPDF從他們的practical documentation功能。例如源代碼，不要從GitHub下載，因爲有些文件丟失。你可以從here下載。

note：刪除第312行basic.js上的分號以使代碼有效。

乾杯，...