web-dev-qa-db-fra.com

Comment créer facilement un PDF d'un SVG avec jsPDF?

J'essaye de créer un pdf mais j'ai quelques images SVG. J'ai trouvé des informations sur ce problème, mais il me suffit d'utiliser JavaScript, c'est-à-dire, pas de jQuery.

J'ai trouvé jsPDF ici: https://github.com/MrRio/jsPDF

Il y a le plugin jspdf.plugin.sillysvgrenderer.js (dans le même dossier) et où on peut trouver un exemple de PDF créé dans le dossier test.

Mais lorsque j'essaie de générer le PDF seul, cela ne fonctionne pas et je ne comprends pas pourquoi.

Savez-vous comment le faire?

pdfsvgjspdf
9
azn0viet

J'ai obtenu ce plugin, mais seulement avec le fichier SVG des tests et celui que j'ai vu dans la doc que seuls les PATH sont supportés :(

Il y a déjà un numéro sur github https://github.com/MrRio/jsPDF/issues/384

Si les chemins sont corrects, voici mon code (c'est plus ou moins le code des tests):

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

Un autre point à considérer, vous devez exécuter tous les exemples sur un serveur. Sinon, vous ne verrez aucun résultat probablement à cause de la sécurité

3
Tima

Essayez canvg pour convertir SVG en Canvas. Puis convertissez le canevas en chaîne base64 à l’aide de .toDataURL(). 

La réponse plus détaillée est ici https://stackoverflow.com/a/35788928/2090459

Regardez la démo ici http://jsfiddle.net/Purushoth/hvs91vpq/

Repo Canvg: https://github.com/gabelerner/canvg

3
Purushoth

J'ai modifié cela à partir de: 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

Vous pouvez utiliser le plug-in de toile fourni avec jsPDF pour rendre le fichier SVG sur PDF avec canvg. J'ai dû définir quelques propriétés factices sur l'implémentation de la toile jsPDF et désactiver les fonctionnalités interactives/animation de canvg pour que cela fonctionne sans erreurs:

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

Cela me semble une bien meilleure solution que le plugin SVG pour jsPDF, car canvg supporte beaucoup mieux les fonctionnalités SVG. Notez que les propriétés width et height doivent être définies sur l’élément <svg/> de votre fichier SVG à convertir afin de l’afficher correctement (ou du moins me l’a semblé).

1
Yuval

Il y a maintenant svg2pdf.js qui utilise un fork de jsPDF. Il a été créé pour résoudre cette tâche précise: Exporter un fichier SVG au format PDF.

De plus, jsPDF a également ajouté une démo qui montre comment exporter éventuellement SVG en utilisant canvg et la mise en oeuvre de la toile jsPDF . 

Les deux solutions présentent des avantages et des inconvénients différents. Vous voudrez peut-être essayer les deux et voir si l'une d'elles répond à vos besoins.

1
Sebastian