Javascript 为什么很难将SVG转换为PDF客户端，不是吗；PDF矢量格式？
我试图通过javascript将svg文件转换为pdf文件。我想这很简单 但是我在网上看到的所有东西都将svg光栅化，生成的pdf看起来很模糊。例如： （将svg转换为png，然后通过jspdf将其转换为pdf文档） 但是pdf不应该有向量功能吗？也就是说，我不想要pdf里面的图像。我想要svg工作方式中的数值，因为这样打印效果更好。实际上，PDF不是“矢量”格式。其最接近的技术相对物是“EPS=封装PostScript®” 我不会假设PDF包含矢量绘图原语，这些原语将与SVG中的原语“一一对应”。实际上，PDF不是“矢量”格式。其最接近的技术相对物是“EPS=封装PostScript®”Javascript 为什么很难将SVG转换为PDF客户端，不是吗；PDF矢量格式？,javascript,html,pdf,svg,Javascript,Html,Pdf,Svg,我试图通过javascript将svg文件转换为pdf文件。我想这很简单 但是我在网上看到的所有东西都将svg光栅化，生成的pdf看起来很模糊。例如： （将svg转换为png，然后通过jspdf将其转换为pdf文档） 但是pdf不应该有向量功能吗？也就是说，我不想要pdf里面的图像。我想要svg工作方式中的数值，因为这样打印效果更好。实际上，PDF不是“矢量”格式。其最接近的技术相对物是“EPS=封装PostScript®” 我不会假设PDF包含矢量绘图原语，这些原语将与SVG中的原语“一一对
我不会假设PDF包含向量绘图原语，这些原语将与SVG中的原语“一一对应”。我已经测试了许多JavaScript库，这些库将SVG转换为PDF，用于我的web项目，包括上面提到的一个，并且经历了一次又一次的pdf制作过程，只需要屏幕分辨率。最后，我对css2pdf（）有了很好的体验。它使用一个名为“XEPOnline JavaScript”的小型JavaScript库来提取svg的内容，包括客户端的所有css样式，并将此信息发送到amazon云上的XEP渲染引擎以生成pdf。输出的pdf文件是高分辨率的，请查看我的示例FIDLE，其中我将Plotly.js和C3.js svg图表导出为pdf： 以下是小提琴的对应代码：
<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>
函数addnsandprint（）{
$（“#c3_图表”）.find（'svg'）.attr（'xmlns'，'http://www.w3.org/2000/svg');
Format（'c3_chart'，{pageWidth:'11in'，pageHeight:'8.5in'，render:'download'，srctype:'svg'}）；
}
获取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]，
]
}});
我要感谢Kevin Brown（），感谢他在运行所有内容方面提供的巨大帮助，请看我之前的帖子我已经测试了许多JavaScript库，这些库可以将SVG转换为PDF，用于我的web项目，包括上面提到的一个，并且经历了一次又一次的pdf制作过程，只需要屏幕分辨率。最后，我对css2pdf（）有了很好的体验。它使用一个名为“XEPOnline JavaScript”的小型JavaScript库来提取svg的内容，包括客户端的所有css样式，并将此信息发送到amazon云上的XEP渲染引擎以生成pdf。输出的pdf文件是高分辨率的，请查看我的示例FIDLE，其中我将Plotly.js和C3.js svg图表导出为pdf： 以下是小提琴的对应代码：
<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>
函数addnsandprint（）{
$（“#c3_图表”）.find（'svg'）.attr（'xmlns'，'http://www.w3.org/2000/svg');
Format（'c3_chart'，{pageWidth:'11in'，pageHeight:'8.5in'，render:'download'，srctype:'svg'}）；
}
获取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]，
]
}});
我要感谢凯文·布朗（）在让一切正常运转方面给予的巨大帮助，同时请看一下我之前的帖子相关：怎么样？看起来它支持文本。因为您要从一个特殊的输入转换为一个特殊的输出，所以编写这样一个工具的回报是有限的。pdfkit不会从svg转换为pdf。这只是一种以编程方式创建pdf的服务器端方法。此外，我正在寻找客户端。相关：怎么样？看起来它支持文本。因为您要从一个特殊的输入转换为一个特殊的输出，所以编写这样一个工具的回报是有限的。pdfkit不会从svg转换为pdf。这只是一种以编程方式创建pdf的服务器端方法。此外，我正在寻找客户端。为了澄清：“PDF的矢量图形功能与SVG的矢量图形功能不一定‘直接兼容’或‘一对一可转换’。”？（也许我可以将svg转换为eps？）当前的RenderX XEP服务器端将svg转换为PDF需要3.5年的开发时间。如上所述，它不是1比1，特别是在遮罩、渐变和其他一些需要复杂计算才能映射的区域。所以，哦，我真的认为“你被你所拥有的束缚住了”，你所能做的就是稍微调整一下。SVG将被光栅化，光栅将被插入到（现在称为“big，phat”）PDF中。您可能可以控制光栅的DPI分辨率，但这可能是它的范围。为了澄清：“PDF的矢量图形功能与SVG的矢量图形功能不一定“直接兼容”或“一对一可转换”。因此，我可以将eps放在PDF中吗？（也许我可以将svg转换为eps？）当前的RenderX XEP服务器端将svg转换为PDF需要3.5年的开发时间。如上所述，它不是1比1，特别是在蒙版、渐变和其他一些需要复杂计算才能映射的区域