Javascript 如何将SVG图形导出为pdf

我使用的是一个在SVG中渲染线条图的工具，但我不能像在HTML5画布中渲染的其他图形那样将其导出为PDF

$(function() {
    // let's loop to build tooltips and x labels.
    var thelabels = new Array(30);
    for (var i = 0; i < 30; i++) {
        thelabels[i] = (i % 6 === 0) ? (i + 1) + " september" : "";
    }

    // build the chart using the "google analytics" template.
    $("#chart").chart({
        template: "raphael_analytics",
        labels: thelabels,
        values: values()
    });

    // start a loop that sets new data in the chart every 5 seconds.

});

代码在中提供

在搜索时，我得到了一个链接，可以将SVG图形导出为PDF，但他们提供的演示无法运行，他们使用Perl脚本进行导出

我想从客户端/浏览器导出到画布图像数据

编辑

我还看到了另一个库，它允许您从客户端将SVG下载到PDF。但在库中，他们使用了一个名为RGBColorfillColor的对象，这会引发一个类似RGBColor的错误，但没有定义，因此是否有任何库需要包含..？？？

也许您可以

将网页打印为PDF格式。 使用任何脚本转换它，如。 要以PDF格式打印，请定义用于打印的样式表

@media print {
    body * { visibility: hidden; }
    #chart * { visibility: visible; }
    #chart { position: absolute; top: 10px; left: 10px; }
}

并使用javascript调用print

var chart = document.getElementById('chart').innerHTML,
    body = document.body.innerHTML;
document.body.innerHTML = chart;
window.print();
document.body.innerHTML = body;

---

我不得不将图表和饼图转换成pdf格式，最后使用这个第三方软件包。它将HTML转换为PDF。只需呈现图形，然后将URL传递给转换器。效果很好。它被称为

这不是本地的，但效果很好。用于渲染图表。我添加了他们的javascript和一个下载PDF的按钮

使用说明如下：

结果:

---

你的小提琴链接无效。先更新！！！@Shreevardhan我编辑了我的帖子，请检查一下，知道。但是w.document.write$'chart.html；代码给出错误，如：uncaughtypeerror：无法读取未定义的属性“document”感谢重播，您的想法在google chrome中运行良好，但在其他浏览器中不起作用browsers@RajeshHatwar为什么不在其他浏览器中使用，这是简单的JavaScript和CSS，应该可以在所有现代浏览器中使用。你试过一些吗。结果是什么？是的，我已经测试过了，只有在chrome中，它提供了一个以PDF格式保存文件的选项。浏览器的其余部分要求您选择打印机来打印文件。我又看到了一个库，它允许将SVG下载到类似HTML2Canvas的PDF格式，但它抛出了错误。你能看到一次吗？谢谢你的回答，它工作得很好，我只是想知道SVG到PDF的转换是在客户端进行的，还是会转到某个URl下载，因为我不允许将任何图形数据发送到Internet，我看到它通过ajax将图表数据发送到以下url:xepOnline.Formatter.xep_chandra_服务，所以我又看到了一个库，它允许将SVG下载到类似HTML2Canvas的PDF，但它抛出了错误。一旦CSS2PDF应用程序使用外部服务器，您是否可以看到。如果您不需要外部服务器，您可以随时联系，在您自己的服务器中实现此功能。这不是一个免费选项，尽管它使用RenderXi的许可软件。很抱歉，我不允许将任何图形数据发送到internet

<button onclick="return xepOnline.Formatter.Format('chart',{pageWidth:'11in', pageHeight:'8.5in',render:'download'});">Get PDF</button>
<div id="chart" style="width: 100%; height: 600px"></div>