Converting SVG to PDF working in Plotly.js but not C3.js
I am using css2pdf to save my svg diagram to pdf after onclick event. It works great for plotly.js but not for c3.js - see my fiddle: http://jsfiddle.net/3hs7cs4f/
I'm sure it must do something with the c3.js svg properties, but I have no idea how to solve this.
Here is the code:
<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>
I tried many other ways to save my c3.js diagrams, but none of them worked satisfactorily. The only thing that works is annatomka's ng-c3 exporter, which uses the AngularJS module ( https://github.com/annatomka/ng-c3-export ). However, this doesn't handle all the css settings in my hands and the quality of the png download is limited by the screen resolution. So 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 on how to save the c3 table as pdf is also highly appreciated. Thanks for the help!
source to share
As I suspected in the comment above, the SVG drawn by c3 does not have an SVG namespace. Css2PDF requires SVG to be in this namespace.
See http://www.cloudformatter.com/CSS2Pdf.APIDoc.FAQ , FAQ first as this is question number one.
To solve this, I added a little hack to give this namespace a namespace attribute before printing. There are better ways, I'm sure, but this fiddle shows that your result works.
<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>
Fiddle: http://jsfiddle.net/3hs7cs4f/9/
Result:
NOTE. If your SVG uses xlink, you also need to add the "xmlns: xlink" attribute " http://www.w3.org/1999/xlink ". For safe formatting, I would add to your code as well.
source to share