c3.js 차트를 pdf로 내보내기

Question

저는 차트 작성을 위해 c3.js 라이브러리를 사용하고 있습니다. 그리고 c3.js에서 그린 차트를 pdf 형식으로 내보내는 쉬운 솔루션이 있는지 궁금합니다.

각도 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에서 복사됩니다.