導出c3.js圖表​​爲pdf

Question

我正在使用c3.js庫來構建圖表。我想知道是否有一個簡單的解決方案，以PDF格式導出由c3.js繪製的圖表。

我得到了角js的解決方案，但我正在尋找一個基於jQuery的解決方案。

Answer 1

你需要的是一個SVG到PNG和一個PNG到PDF轉換器。這裏是一個純JS的解決方案（使用jQuery作品）

svg->png

pdf exporter

包括在你的頁面中的兩個文件上面。然後使用這些功能做你的事：

/** 
 
* @param {SVGElement} svg 
 
* @param {Function} callback 
 
* @param {jsPDF} callback.pdf 
 
* */ 
 
function svg_to_pdf(svg, callback) { 
 
    svgAsDataUri(svg, {}, function(svg_uri) { 
 
    var image = document.createElement('img'); 
 

 
    image.src = svg_uri; 
 
    image.onload = function() { 
 
     var canvas = document.createElement('canvas'); 
 
     var context = canvas.getContext('2d'); 
 
     var doc = new jsPDF('portrait', 'pt'); 
 
     var dataUrl; 
 

 
     canvas.width = image.width; 
 
     canvas.height = image.height; 
 
     context.drawImage(image, 0, 0, image.width, image.height); 
 
     dataUrl = canvas.toDataURL('image/jpeg'); 
 
     doc.addImage(dataUrl, 'JPEG', 0, 0, image.width, image.height); 
 

 
     callback(doc); 
 
    } 
 
    }); 
 
} 
 

 
/** 
 
* @param {string} name Name of the file 
 
* @param {string} dataUriString 
 
*/ 
 
function download_pdf(name, dataUriString) { 
 
    var link = document.createElement('a'); 
 
    link.addEventListener('click', function(ev) { 
 
    link.href = dataUriString; 
 
    link.download = name; 
 
    document.body.removeChild(link); 
 
    }, false); 
 
    document.body.appendChild(link); 
 
    link.click(); 
 
}

注：代碼片斷完全由here複製。