如何使用 jsPDF 从 SVG 轻松创建 PDF？答案

【问题标题】：How do I create easily a PDF from an SVG with jsPDF?如何使用 jsPDF 从 SVG 轻松创建 PDF？
【发布时间】：2014-04-28 12:01:24
【问题描述】：

我正在尝试创建一个 pdf，但我有一些 SVG 图片。我找到了关于这个问题的信息，但是我只需要使用JavaScript，也就是说，没有jQuery。

我在这里找到了 jsPDF：https://github.com/MrRio/jsPDF

有插件 jspdf.plugin.sillysvgrenderer.js（在同一文件夹中），我们可以在其中找到在文件夹 test 中创建的 PDF 示例。

但是当我尝试自己生成 PDF 时，它不起作用，我不明白为什么。

你知道怎么做吗？

【问题讨论】：

标签： pdf svg jspdf

【解决方案1】：

我得到了这个插件，但只有来自测试的 SVG 文件和我在文档中看到只支持 PATH :(

github上已经有问题了 https://github.com/MrRio/jsPDF/issues/384

如果路径没问题，这是我的代码（或多或少是测试中的代码）：

function demoSvgDocument() {
    var doc = new jsPDF();
    var test = $.get('013_sillysvgrenderer.svg', function(svgText){
        var svgAsText = new XMLSerializer().serializeToString(svgText.documentElement);
        doc.addSVG(svgAsText, 20, 20, doc.internal.pageSize.width - 20*2)

        // Save the PDF
        doc.save('TestSVG.pdf');
    });
}

需要考虑的另一点是，您必须在服务器上运行所有示例。否则你可能看不到任何结果，可能是因为安全

【讨论】：

【解决方案2】：

尝试 canvg 将 SVG 转换为 Canvas。然后使用.toDataURL() 将画布转换为base64 字符串。

更详细的答案在这里https://stackoverflow.com/a/35788928/2090459

在此处查看演示 http://jsfiddle.net/Purushoth/hvs91vpq/

Canvg 回购：https://github.com/gabelerner/canvg

【讨论】：

请注意，这意味着 SVG 在集成到 PDF 之前会转换为位图，因此您将失去矢量格式的好处（通常更轻，与分辨率无关）。
是的@jcaron。 jsPDF 不支持 SVG 导出。如果你愿意，你可以试试 PDFkit。检查这个例子pdfkit.org/demo/browser.html

【解决方案3】：

现在有 svg2pdf.js 使用 jsPDF 的 a fork。它的创建是为了解决这个确切的任务：将 SVG 导出为 PDF。

同时，jsPDF 还添加了一个演示，展示了如何可能导出 SVG using canvg and the jsPDF canvas implementation。

这两种解决方案各有优缺点，因此您不妨同时尝试一下，看看其中一种是否适合您的需求。

【讨论】：

【解决方案4】：

你可以使用jsPDF自带的canvas插件，用canvg在PDF上渲染SVG。我必须在 jsPDF 画布实现上设置一些虚拟属性，并禁用 canvg 的交互/动画功能才能正常工作：

var jsPdfDoc = new jsPDF({
    // ... options ...
});

// ... whatever ...

// hack to make the jspdf canvas work with canvg
jsPdfDoc.canvas.childNodes = {}; 
jsPdfDoc.context2d.canvas = jsPdfDoc.canvas;
jsPdfDoc.context2d.font = undefined;

// use the canvg render the SVG onto the 
// PDF via the jsPDF canvas plugin.
canvg(jsPdfDoc.canvas, svgSource, {
    ignoreMouse: true,
    ignoreAnimation: true,
    ignoreDimensions: true,
    ignoreClear: true
});

在我看来，这似乎是一个比 jsPDF 的 SVG 插件更好的解决方案，因为 canvg 对 SVG 功能有更好的支持。请注意，width 和 height 属性应该设置在 SVG 的 <svg/> 元素上，以便 canvg 正确呈现它（或者至少在我看来是这样）。

【讨论】：

【解决方案5】：

我修改自：https://medium.com/@benjamin.black/using-blob-from-svg-text-as-image-source-2a8947af7a8e

var yourSVG = document.getElementsByTagName('svg')[0];
//or use document.getElementById('yourSvgId'); etc.

yourSVG.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
yourSVG.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');

var serializer = new XMLSerializer();
var serialSVG = serializer.serializeToString(yourSVG);

var svg = serialSVG;

var blob = new Blob([svg], {type: 'image/svg+xml'}); 
var url = URL.createObjectURL(blob);
var image = document.createElement('img');

// image.addEventListener('load', () => URL.revokeObjectURL(url), {once: true});    
//changed above line using babel to code below;

image.addEventListener('load', function () {
    return URL.revokeObjectURL(url);
    }, { once: true });

image.src = url;

//Then just use your pdf.addImage() function as usual;

【讨论】：