Exporting c3.js chart as pdf

问题

I am using c3.js library for building charts. And I was wondering if there is an easy solution to export charts drawn by c3.js in pdf format.

I got a solution in angular js but I am looking for a jQuery based solution.

回答1:

What you need is a SVG to PNG and a PNG to PDF converter. Here's a pure JS solution (works with jQuery)

svg->png

pdf exporter

Include the two files above in your page. Then use these functions to do your thing:

/**
 * @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();
}

Note: Code snippet is entirely copied from here.

来源：https://stackoverflow.com/questions/42858282/exporting-c3-js-chart-as-pdf