首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将c3.js图表导出为pdf

将c3.js图表导出为pdf
EN

Stack Overflow用户
提问于 2017-03-17 21:02:06
回答 2查看 3.1K关注 0票数 0

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

我在angular js中得到了一个解决方案,但我正在寻找一个基于jQuery的解决方案。

EN

回答 2

Stack Overflow用户

发布于 2017-03-17 21:15:05

您需要的是一个SVG到PNG和一个PNG到PDF的转换器。这是一个纯JS解决方案(与jQuery配合使用)

svg->png

pdf exporter

在你的页面中包含上面的两个文件。然后使用这些函数来完成您的任务:

代码语言:javascript
运行
复制
/**
 * @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

票数 0
EN

Stack Overflow用户

发布于 2021-05-14 22:27:56

我在我的页面底部有这个

代码语言:javascript
运行
复制
<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!"/>
票数 -2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42858282

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档