web-dev-qa-db-ja.com

jspdfを使用してSvgをPdfにレンダリングする

Jspdfを使用してsvg要素をpdfにレンダリングすることに問題があります。 Iamプラグイン 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です。助けてください

svgjspdf
14
Priyesh Tiwari

canvgを使用してそれを行うことができます。

ステップ1：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

13
Purushoth