11

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

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

プラグインjspdf.plugin.sillysvgrenderer.js (同じフォルダー内) があり、フォルダーtestで作成された PDF の例を見つけることができます。

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

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

4

5 に答える 5

3

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

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

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

Canvg レポ: https://github.com/gabelerner/canvg

于 2016-03-04T06:01:37.453 に答える
1

これを次から変更しました: 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;
于 2019-01-14T21:40:37.180 に答える