Fatal编程技术网
  • javascript/
  • Javascript SVG到PDF的转换适用于Plotly.js，但不适用于C3.js

Javascript SVG到PDF的转换适用于Plotly.js，但不适用于C3.js

javascript pdf svg

Javascript SVG到PDF的转换适用于Plotly.js，但不适用于C3.js,javascript,pdf,svg,plotly,c3.js,Javascript,Pdf,Svg,Plotly,C3.js,我使用css2pdf在onclick事件后将svg图表保存为pdf。它对plotly.js很有效，但对c3.js不起作用-请看我的小提琴： 我确信它与c3.jssvg属性有关，但我不知道如何解决这个问题 代码如下： <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> <script src="https://cdn.plot.ly/plotly-

我使用css2pdf在onclick事件后将svg图表保存为pdf。它对plotly.js很有效，但对c3.js不起作用-请看我的小提琴：

我确信它与c3.jssvg属性有关，但我不知道如何解决这个问题

代码如下：

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Scrip /xeponline.jqplugin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>

<body>
<br><br>
  <!-- Source and on-click event for plotly.js -->
  <div id="plotly_chart" style="width: 90%; height: 270px"></div>
  <button onclick="return xepOnline.Formatter.Format('plotly_chart',{pageWidth:'11in', pageHeight:'8.5in',render:'download', srctype:'svg'});">Get plotly_PDF</button>

  <!-- Source and on-click event for c3.js-->
  <div id="c3_chart" style="width: 90%; height: 270px"></div>
  <button onclick="return xepOnline.Formatter.Format('c3_chart',{pageWidth:'11in', pageHeight:'8.5in',render:'download', srctype:'svg'});">Get c3_PDF</button>

<!-- JAVASCRIPT for plotly.js chart -->
<script type="text/javascript">
  Chart = document.getElementById('plotly_chart');

 Plotly.plot( Chart, [{
   x: [1, 2, 3, 4, 5],
   y: [1, 2, 4, 8, 16] }], { 
   margin: { t: 0 } } );
</script>

<!-- JAVASCRIPT for j3.js chart -->
<script type="text/javascript">
   var chart = c3.generate({
   bindto: '#c3_chart',
   padding: {
       top: 10,
       right: 70,
       bottom: 50,
       left: 75,
   },
   data: {
       columns: [
           ['data1', 100, 200, 150, 300, 200],
           ['data2', 400, 500, 250, 700, 300],
       ]
   }});
</script>





获取plotly\u PDF
获取c3\u PDF
Chart=document.getElementById（'plotly_Chart'）；
图[{
x:[1,2,3,4,5]，
y:[1,2,4,8,16]}]，{
边距：{t:0}）；
var图表=c3.0({
bindto:“#c3_图表”，
填充：{
前10名，
右：70，
底数：50，
左：75，
},
数据：{
栏目：[
[data1'，100200150300200]，
[data2'，400500250700300]，
]
}});
我尝试了很多其他的方法来保存我的c3.js图表，但没有一种效果令人满意。唯一有效的是来自annatomka的ng-c3导出器，它使用AngularJS模块（）。然而，这个并不能处理我手中的所有css设置，下载的png的质量受到屏幕分辨率的限制。因此，我真的想要一个pdf导出器，我发现处理所有css设置的是css2pdf。但是，对于如何将c3图表保存为pdf格式的其他建议，我们也非常感谢。谢谢你的帮助

正如我在上面的评论中所怀疑的，c3绘制的SVG缺少SVG名称空间。Css2PDF要求SVG位于此命名空间中

请参阅，第一个常见问题，因为它是第一个问题

为了解决这个问题，我添加了一个小技巧，在打印之前将namespace属性注入到这个绘图中。我相信有更好的方法，但这把小提琴显示了你的工作成果

<script>
   function addnsandprint(){
     $('#c3_chart').find('svg').attr('xmlns','http://www.w3.org/2000/svg');
     xepOnline.Formatter.Format('c3_chart',{pageWidth:'11in', 
        pageHeight:'8.5in',render:'download', srctype:'svg'});
   }
</script>


函数addnsandprint（）{
$（“#c3_图表”）.find（'svg'）.attr（'xmlns'，'http://www.w3.org/2000/svg');
Format（'c3_图表'，{pageWidth:'11in'，
页面高度：'8.5in'，呈现：'download'，srctype:'svg'}）；
}
小提琴：

结果:

注意：如果SVG使用xlink，还需要添加“”的“xmlns:xlink”属性。为了安全格式化，我会在代码中添加这两种格式。

我发现，当我从c3_chart xepOnline.Formatter.Formatter设置中省略“srctype:'svg'”属性时，css2pdf会转换我的c3.js svg，但生成的pdf总是空的，大小始终为2kb，与原始svg维度无关。查看更新的fiddle-因此c3.js svg属性肯定有问题。检查DOM中的svg，看看它是否缺少名称空间。如果是，那么您需要在图表绘制之后添加它。我可以看到plotly.js中的svg元素（适用于css2pdf）与c3.js中的svg元素（不适用于css2pdf）之间的以下区别：plotly（class:main svg；xmlns:；xmlns:xlink:）c3（class:overflow:hidden；没有定义xmlns和xmlns:xlink）-这有帮助吗？是，用下面的小提琴回答问题很好，凯文。非常感谢。