如何将SVG图导出为pdf

Question

我正在使用API渲染SVG中的折线图，但我无法将其导出为PDF，就像在HTML5画布中呈现的其他图形一样

$(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.

});

代码可在jsfiddle

中找到

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

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

被修改

我在github中看到了另外一个库，它允许您从客户端下载SVG到PDF。但是在库中他们使用了一个名为"RGBColor(fillColor)"的对象，这就抛出了一个错误，比如RGBColor没有定义，所以我需要包含任何库.. ???

Answer 1

我必须将图表和饼图转换为pdf并使用此第三方软件包进行清理。它将HTML转换为PDF。只需渲染图形，然后将URL传递给转换器。它运作得很好。它被称为HiQPDf

Answer 2

也许你可以

1. 将您的网页打印到PDF。
2. 使用svgToPdf.js等任何脚本进行转换。

要以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;

Answer 3

这不是本地的，但工作正常。使用http://www.cloudformatter.com/css2pdf呈现图表。我添加了他们的javascript和一个按钮来下载PDF。

http://jsfiddle.net/JehdF/1237/

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

使用说明在此处：http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage

结果：