使用 jspdf 将 Svg 渲染为 Pdf

Question

我在使用 jspdf 将 svg 元素呈现为 pdf 时遇到问题。我正在使用插件https://github.com/CBiX/svgToPdf.js/ 来执行此操作。

下面是我的代码

// I recommend to keep the svg visible as a preview
var tmp = document.getElementById("chartContainer");
var svgDoc = tmp.getElementsByTagName("svg")[0];
var pdf = new jsPDF('p', 'pt', 'a4');
svgElementToPdf(svgDoc, pdf, {
scale: 72 / 96, // this is the ratio of px to pt units
removeInvalid: false // this removes elements that could not be translated to pdf from the source        svg
});
pdf.output('datauri'); // use output() to get the jsPDF buffer

它正在生成空白 pdf。请帮忙

Answer 1

您可以使用 canvg 做到这一点。

Step1：从 DOM 中获取“SVG”标记代码

var svg = document.getElementById('svg-container').innerHTML;

  if (svg)
    svg = svg.replace(/\r?\n|\r/g, '').trim();

第 2 步： 使用 canvg 从 svg 创建 canvas。

  var canvas = document.createElement('canvas');
  canvg(canvas, svg);

第 3 步： 使用.toDataURL()从画布创建图像

  var imgData = canvas.toDataURL('image/png');
  // Generate PDF
  var doc = new jsPDF('p', 'pt', 'a4');
  doc.addImage(imgData, 'PNG', 40, 40, 75, 75);
  doc.save('test.pdf');

在这里查看演示http://jsfiddle.net/Purushoth/hvs91vpq/193/

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

Answer 2

我在内部使用canvg 尝试了svg2pdf.js 和addSvgAsImage。 两者都对我来说效果不佳，导致 pdf 中的图像定位或显示不正确。

我最终做了以下工作，效果很好：

1. 无需任何库即可将 SVG 转换为 PNG，请参阅 my answer to "Convert SVG to image (JPEG, PNG, etc.) in the browser"。
2. 只需使用普通的addImage method 将结果添加到 pdf 中

Answer 3

我认为当前的 jspdf 版本 (2.3.1) 有一个 addSvgAsImage method，但它将 svg 作为字符串。我想您可以使用 ajax 调用来检索 SVG 内容，但我的代码中只有 SVG 并以这种方式传递它。