Question

我试图通过javascript将svg文件转换为pdf文件。我觉得这很简单。

但我在网上看到的所有内容都会对svg进行栅格化，结果pdf看起来很模糊。例如：

http://ihaochi.com/svg_to_pdf/ （将svg转换为png然后通过jspdf将其放入pdf文档中）

但是，pdf不具备矢量功能吗？也就是说，我不想要一个pdf里面的图像。我希望数字值类似于svg的工作方式，因为它以这种方式打印得更好。

Answer 1

我已经测试了许多JavaScript库，它们将我的Web项目的SVG转换为PDF，包括上面提到的那些，并且经历了与仅以屏幕分辨率生成pdf相同的事情。最后，我在css2pdf（http://www.cloudformatter.com/css2pdf）方面取得了很好的经验。它使用一个名为＆＃34; XEPOnline javascript＆＃34;的小型JavaScript库。提取svg的内容，包括客户端的所有css样式，并将此信息发送到亚马逊云上的XEP呈现引擎以生成pdf。输出pdf文件是高分辨率的，请查看我的示例小提琴，我将Plotly.js和C3.js svg图表导出为pdf：http://jsfiddle.net/3hs7cs4f/10/

以下是小提琴的相应代码：

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

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

<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 addnsandprint()">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>

我要感谢Kevin Brown（https://stackoverflow.com/users/2491227/kevin-brown）在让一切正常运行方面提供的大力帮助，请同时查看我之前的帖子SVG to PDF conversion working for Plotly.js but not for C3.js

Answer 2

实际上，PDF 不是“矢量”格式。它最接近的技术关系是“EPS =EncapsulatedPostScript®。”

我不会假设 PDF包含矢量绘图原语，这些原语预计会与SVG中的那些“映射一对一”。

为什么很难将SVG转换为PDF客户端，不是PDF矢量格式？

2 个答案: