导出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复制。