Comment puis-je créer facilement un fichier PDF à partir d'un SVG avec jsPDF?

Je suis en train de créer un pdf, mais j'ai quelques images SVG. J'ai trouvé des informations sur ce problème, mais je n'ai qu'à l'utilisation de 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ù l'on peut trouver un exemple de fichier PDF créé dans le dossier test.

Mais quand j'essaie de générer le fichier PDF sur mon propre, il ne fonctionne pas et je ne comprends pas pourquoi.

Savez-vous comment le faire?

InformationsquelleAutor azn0viet | 2014-04-28
  1. 3

    J'ai eu ce plugin de travail, mais seulement avec fichier SVG à partir des essais et la j'ai vu dans la doc que seuls les Chemins sont pris en charge 🙁

    Il y a déjà la question sur github
    https://github.com/MrRio/jsPDF/issues/384

    Si les chemins sont ok pour voici mon code (c'est plus ou moins le code de l'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 à prendre en compte, vous devez exécuter tous les exemples sur un serveur. Sinon, vous ne verrez pas les résultats, probablement en raison de la sécurité

    InformationsquelleAutor Tima
  2. 3

    Essayer canvg pour que pour le convertir en SVG sur la Toile. Puis de convertir la toile en base64 chaîne à l'aide de .toDataURL().

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

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

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

    • Notez que cela signifie que le SVG est converti en une image bitmap avant d'être intégré dans le fichier PDF, donc vous perdrez les avantages d'un format vectoriel (généralement plus léger, indépendant de la résolution).
    • Oui @jcaron. jsPDF ne prend pas en charge le format SVG à l'exportation. Si vous voulez, vous pouvez essayer PDFkit. Cochez cette exemple pdfkit.org/demo/browser.html
    InformationsquelleAutor Purushoth
  3. 1

    Il est maintenant svg2pdf.js qui utilise une fourchette de jsPDF.
    Il a été créé pour résoudre cette tâche: l'Exportation d'un SVG dans un document PDF.

    Également dans l'intervalle, jsPDF également ajouté une démo qui montre comment, éventuellement, à l'exportation SVG à l'aide de canvg et la jsPDF toile de mise en œuvre.

    Les deux solutions ont des avantages et des inconvénients, de sorte que vous pouvez essayer les deux et voir si l'un d'entre eux correspond à vos besoins.

    InformationsquelleAutor Sebastian
  4. 1

    Vous pouvez utiliser la toile plugin qui vient avec jsPDF pour rendre le SVG sur le PDF avec canvg. J'ai dû mettre un peu factice de propriétés sur la jsPDF toile de mise en œuvre, et de désactiver le interactive/fonctions d'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 être une bien meilleure solution que le plugin SVG pour jsPDF, comme canvg a beaucoup plus de soutien de fonctionnalités SVG. Notez que le width et height propriétés doivent être définies sur la <svg/> élément de votre SVG pour canvg à rendre correctement (ou du moins me semblait-il).

    InformationsquelleAutor Yuval
  5. 1

    J'ai modifié ce à 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;
    InformationsquelleAutor Mr. J