web-dev-qa-db-ja.com

jsPDFでSVGからPDF=を簡単に作成するにはどうすればよいですか？

PDFを作成しようとしていますが、SVG画像がいくつかあります。この問題に関する情報を見つけましたが、JavaScriptを使用する必要があります。つまり、jQueryを使用しません。

ここでjsPDFを見つけました： https://github.com/MrRio/jsPDF

プラグインjspdf.plugin.sillysvgrenderer.js（同じフォルダー内）があり、PDFフォルダに作成test。

しかし、自分でPDFを生成しようとすると、機能せず、理由がわかりません。

あなたはそれを行う方法を知っていますか？

pdfsvgjspdf
11
azn0viet

私はこのプラグインを機能させましたが、テストからのSVGファイルでのみ、パスでのみサポートされていることがドキュメントでわかりました:(

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');
    });
}

考慮すべきもう1つのポイントは、すべての例をサーバーで実行する必要があることです。そうしないと、おそらくセキュリティのために結果が表示されません

3
Tima

SVGをCanvasに変換するには、canvgを試してください。次に、.toDataURL()を使用してキャンバスをbase64文字列に変換します。

より詳細な回答はこちら https://stackoverflow.com/a/35788928/2090459

ここでデモを確認してください http://jsfiddle.net/Purushoth/hvs91vpq/

Canvgリポジトリ： https://github.com/gabelerner/canvg

3
Purushoth

私はこれを次のように変更しました 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;
1
Mr. J

JsPDFに付属のキャンバスプラグインを使用して、PDF canvgで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
});

CanvgはSVG機能のサポートがはるかに優れているため、これはjsPDFのSVGプラグインよりもはるかに優れたソリューションのようです。 widthプロパティとheightプロパティは<svg/> canvgのSVG要素を使用して正しくレンダリングする（または少なくとも私にはそれが見える）。

1
Yuval

JsPDFの a fork を使用する svg2pdf.js が追加されました。この正確なタスクを解決するために作成されました：SVGをPDFにエクスポートします。

また、当面の間、jsPDFは、SVGをエクスポートする方法を示すデモを追加しました canvgおよびjsPDFキャンバス実装を使用 。

2つのソリューションには異なる長所と短所があるため、両方を試して、どちらかがニーズに合っているかどうかを確認することをお勧めします。

1
Sebastian