将 c3.js 图表导出为 pdf

Question

我正在使用 c3.js 库来构建图表。我想知道是否有一个简单的解决方案可以将 c3.js 绘制的图表导出为 pdf 格式。

我得到了一个 Angular 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();
}

注意：代码 sn-p 完全复制自here。

Answer 2

我的页面底部有这个

<script>
  function printDiv(divName) 
  {
    // fix weird back fill
    d3.select('#'+divName).selectAll("path").attr("fill", "none");
    //fix no axes
    d3.select('#'+divName).selectAll("path.domain").attr("stroke", "black");
    //fix no tick
    d3.select('#'+divName).selectAll(".tick line").attr("stroke", "black");
    // fix text going off the export (becuase my labels font size is larger than default)
    d3.select('#'+divName+"> svg").style("font-size","12px");
    // add any other styles needed
    var printContents = document.getElementById(divName).innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    window.location.reload();   
  }
</script>
<input type="button" onclick="printDiv('chart')" value="print a div!"/>