SVG到PDF的转换适用于Plotly.js，但不适用于C3.js [英] SVG to PDF conversion working for Plotly.js but not for C3.js
问题描述
我正在使用css2pdf将onclick事件后的svg图表保存为pdf.它适用于plotly.js，但不适用于c3.js-请参阅我的小提琴: http://jsfiddle.net /3hs7cs4f/
I am using css2pdf for saving my svg chart to pdf after onclick event. It works nicely for plotly.js, but not for c3.js - please see my fiddle: http://jsfiddle.net/3hs7cs4f/
我确定它必须对c3.js的svg属性进行某些操作，但是我不知道如何解决此问题.
I am sure it has to do something with the c3.js svg properties, but I have no idea how to solve this.
这是代码:
<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>
我尝试了很多其他方法来保存我的c3.js图表，但没有一个能令人满意地工作.唯一有效的方法是annatomka的ng-c3导出器，它使用AngularJS模块( https: //github.com/annatomka/ng-c3-export ).但是，此功能无法处理我手中的所有CSS设置，并且下载的png的质量受屏幕分辨率的限制.因此，我真的很想去一个pdf导出器，我发现处理所有css设置的是css2pdf.但是，任何其他有关如何将c3图表另存为pdf的建议也都受到赞赏.感谢您的帮助！
I tried a lot of other ways to save my c3.js charts, but none of them worked satisfyingly. The only thing that works is the ng-c3 exporter from annatomka, which uses the AngularJS module (https://github.com/annatomka/ng-c3-export). However, this one does not handle all of the css settings in my hands, and the quality of the downloaded png is limited by screen resolution. Thus, I really would like to go for a pdf exporter, and the one I found that handles all the css settings is css2pdf. But any other suggestions how to save c3 chart as pdf that work are also much appreciated. Thanks for the help!
推荐答案
正如我在上面的评论中所怀疑的那样，c3绘制的SVG缺少SVG命名空间. Css2PDF要求SVG位于此命名空间中.
As I suspected in the comment above, the SVG drawn by c3 lacks the SVG namespace. Css2PDF requires that SVG's be in this namespace.
请参见 http://www.cloudformatter.com/CSS2Pdf.APIDoc.FAQ ，第一个常见问题解答，因为它是第一个要问的问题.
See http://www.cloudformatter.com/CSS2Pdf.APIDoc.FAQ , first FAQ as it is the number one question asked.
为解决此问题，我添加了一点技巧，以便在打印前将名称空间属性注入到该绘图中.我敢肯定，有更好的方法，但是这个小提琴显示了您的结果有效.
To solve this issue, I added a little hack to inject the namespace attribute to this plot before print. There are better ways I am sure but this fiddle shows your result working.
<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>
小提琴: http://jsfiddle.net/3hs7cs4f/9/
结果:
NOTE: If your SVG makes use of xlink, you would also need to add the "xmlns:xlink" attribute of "http://www.w3.org/1999/xlink". For safe formatting, I would add both in your code.
这篇关于SVG到PDF的转换适用于Plotly.js，但不适用于C3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
