SVG 到 PDF 转换适用于 Plotly.js 但不适用于 C3.js答案

【问题标题】：SVG to PDF conversion working for Plotly.js but not for C3.jsSVG 到 PDF 转换适用于 Plotly.js 但不适用于 C3.js
【发布时间】：2017-06-26 19:21:46
【问题描述】：

我正在使用 css2pdf 在 onclick 事件后将我的 svg 图表保存为 pdf。它适用于 plotly.js，但不适用于 c3.js - 请看我的小提琴：http://jsfiddle.net/3hs7cs4f/

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

代码如下：

<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 的建议。感谢您的帮助！

【问题讨论】：

我发现当我从 c3_chart xepOnline.Formatter.Format 设置中省略“srctype:'svg'”属性时，css2pdf 会转换我的 c3.js svg，但生成的 pdf 是空的始终为 2kb 大小，与原始 svg 尺寸无关。请参阅更新的小提琴jsfiddle.net/3hs7cs4f/1 - 所以c3.js svg属性肯定有一些事情（错误）。
检查 DOM 中的 svg 是否缺少命名空间。如果是，那么您需要在图表绘制后添加它
我可以看到 plotly.js 中的 svg 元素（适用于 css2pdf）和 c3.js 中的 svg 元素（不起作用）之间的以下差异：plotly（类：main-svg ; xmlns: w3.org/2000/svg; xmlns:xlink: w3.org/1999/xlink) C3 (class: overflow: hidden; 没有定义 xmlns 和 xmlns:xlink) - 有帮助吗？
是的，用下面的工作小提琴回答
非常好，凯文。谢谢！

标签： javascript pdf svg plotly c3.js

【解决方案1】：

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

请参阅http://www.cloudformatter.com/CSS2Pdf.APIDoc.FAQ，第一个常见问题解答，因为它是被问到的第一个问题。

为了解决这个问题，我添加了一个小技巧，以便在打印之前将命名空间属性注入此图。我确信有更好的方法，但这个小提琴显示你的结果有效。

<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/

结果：

注意：如果您的 SVG 使用 xlink，您还需要添加“http://www.w3.org/1999/xlink”的“xmlns:xlink”属性。为了安全格式化，我会在您的代码中添加两者。

【讨论】：