11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je souhaiterais savoir s'il existe une librairie JQuery qui permet d'enregistrer directement en PDF une partie précise d'une page web (exemple : #ma_div).

Merci à vous !


Edit : Qqles messages plus loin ; j'utlise JSPDF ; et j'obtiens pour le moment une erreur.
Modifié par mini-truc (06 Nov 2013 - 13:39)
bien sur et cela ce fait tres facilement avec la librairie jsPDF


<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

<script>
var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});
</script>



et voila pour un exemple en live :
http://jsfiddle.net/y2b7Q/
Bonjour @tazzkiller,

Tout d'abord merci pour ta réponse ; j'avais en effet regarder cette librairie mais je n'avais pas vu un exemple comme le tiens ; je pensais donc bêtement que ce n'était pas possible !

Je n'en demandais pas autant pour la partie de ton code mais c'est super gentil ; je n'ai plus qu'a adapter. Je vais tester çà dans l'heure qui suit ; car c'est dommage mais le jsFiddle ne fonctionne pas Smiley ohwell je crois donc les doights pour que çà fonctionne ^^ .

Je reviendrais dans la journée pour vous en dire plus.
Bonjour à tous,

Je viens de télécharger JSPDF ; et j'obtiens un message d'erreur :
Uncaught TypeError: Object #<Object> has no method 'fromHTML' 


JS
<script type="text/javascript" src="../assets/js/jsPDF/jspdf.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
//impression du résultat
        var doc = new jsPDF();
        var specialElementHandlers = {
            '#editor': function (element, renderer) {
                return true;
            }
        };

        $('#print_result').click(function () {
            doc.fromHTML($('#result_reporting').html(), 15, 15, {
                'width': 170,
                    'elementHandlers': specialElementHandlers
            });
            doc.save('../export/export_stat_reporting_regie_.pdf');
        });
});
</script>

Modifié par mini-truc (29 Oct 2013 - 14:32)
tazzkiller a écrit :
as tu un lien en ligne ?



Bonjour, malheureusement non ; je suis sur une application en interne Smiley ohwell .
Bonjour à tous,

Me revoilà sur le sujet ; j'ai laissé mijoter çà le temps que je termine d'autres choses en cours ; mais cette fois-ci çà deviens urgent Smiley ohwell .

J'ai donc suivi le conseil cité plus haut ; j'utilise la librairie JSPDF que j'appelle en début de page (html > body > div#content ) :
<script type="text/javascript" src="../assets/js/jsPDF/jspdf.js"></script>


J'appelle et instancie la classe (html > body > div#content ; juste aprés le code précédent) :
<script type="text/javascript">
    $(document).ready(function(){        
        var doc = new jsPDF();
        var specialElementHandlers = {
            '#editor': function (element, renderer) {
                return true;
            }
        };
    });
</script>


La génération du PDF se déclenche au clic d'un bouton (just prés l'instanciation cité plus haut) :
$('#result_reporting').delegate('#export_pdf', 'click', function(){
            doc.fromHTML($('#result_reporting').html(), 15, 15, {
                'width': 170,
                    'elementHandlers': specialElementHandlers
            });
            doc.save('../assets/uploads/export/export_stat_reporting_regie_<?php echo date('Y_m_d_H_i_s'); ?>.pdf');
        });


Lorsque je clique sur mon bouton, l’événement se déclenche bien mais j'obtiens une erreur dans ma console :
Uncaught TypeError: Object #<Object> has no method 'fromHTML' 


J'ai certainement dû oublier un bout de la librairie ? J'ai téléchargé le zip complet de JSPDF ; je l'ai décompressé et envoyé dans son intégralité sur mon serveur (emplacement indiqué plus haut). J'ai contrôlé le lien vers la libraire : ../assets/js/jsPDF/jspdf.js ; il charge correctement le script.

Je n'appelle que ce script là ; y'a t'il d'autres scripts qui doivent être appelé obligatoirement pour que 'fromHTML' fonctionne correctement ?

Merci à tous pour votre aide.
tu appelles bien la librairie jquery dans le head ? si oui essai de passer plutôt par
.on('click',  function(){ } );

et tua s bien rajouté ca aussi dans ton html :
<div id="editor"></div>

Modifié par tazzkiller (07 Nov 2013 - 17:10)
tazzkiller a écrit :
tu appelles bien la librairie jquery dans le head ?


Tout d'abord merci TazzKiller.

Non, je l'appelle dans directement dans le script concerné ; car un seul va utiliser cette librairie ; c'est dommage de la charger pour les autres.

Je vais tenter de la passer dans le head et si çà ne fonctionne toujours pas je vais essaie "on()".
Je viens de tout tester ; j'ai déplacé l'appel de la librairie dans mon header ; grâce à çà je n'ai plus de message d'erreur 'has no method'.

Cependant il ne se passe rien ; j'ai mis un alert dans ma fonction ; il s'affiche avec le delegate mais pas avec le on.

J'ai regardé en FTP je n'ai aucun pdf de créé et surtout aucune erreur en console Smiley ohwell .
Modifié par mini-truc (08 Nov 2013 - 16:31)
tazzkiller a écrit :
et tu as bien mis la div#editor pour la génération ?


Merci je crois que tu viens de m'ouvrir les yeux OO ! Je crois que le #editor correspond au #result_reporting ! Je vais faire quelques tests et je reviens avec un code complet !
Je viens de remplacer #editor par #result_reporting et j'ai de nouveau l'erreur :

Uncaught TypeError: Object #<Object> has no method 'fromHTML' 


Sur la ligne :

doc.fromHTML($('#result_reporting').html(), 15, 15, {


Je pense qu'en faisant mes manip pour changer de place la librairie j'ai du faire un ctrl+z foireux Smiley decu et que du coup je n'avais plus le messages d'erreur.

Je remet mon code au complet :


//impression du résultat
        var doc = new jsPDF();
        var specialElementHandlers = {
            '#result_reporting': function (element, renderer) {
                return true;
            }
        };

        $('#result_reporting').delegate('#export_pdf','click', function(){
            alert('export pdf');
        
            doc.fromHTML($('#result_reporting').html(), 15, 15, {
                'width': 170,
                    'elementHandlers': specialElementHandlers
            });
            doc.save('../assets/uploads/export/export_stat_reporting_regie_<?php echo date('Y_m_d_H_i_s'); ?>.pdf');
        });


Sachant que mon bouton #export_pdf et générer aprés une requête ajax tout comme mon contenu à l'intérieur de #result_reporting (tableaux et graphiques).

Une nouvelle idée ?
déjà tu as un soucis ta variable specialElementHandlers (#result_reporting) ne peux pas être le même que

doc.fromHTML($('#result_reporting').html()


et quel version de jquery utilise tu ? tu as d'autre librairie du style mootools ou prototype qui sont appelé dans la page aussi ?

ha oui et ton doc.save doit seulement contenir le nom du fichier et pas un chemin complet il me semble ...
Modifié par tazzkiller (12 Nov 2013 - 16:24)
Pour le même nom au niveau de la balise je me suis posée la question justement ; j'ai donc utilisé une balise plus haute pour :

doc.fromHTML($('#reporting').html(), 15, 15, {


et la balise #result_reporting ici :

var specialElementHandlers = {
            '#result_reporting':


specialElementHandlers est censé être mon bloc à "imprimer" ?

Ma version de librairie Jquery est : jquery-1.9.1.min.js
J'utilise également ui : jquery-ui-1.10.1.custom.min.js
Et beaucoup d'autre librairie Jquery tel que : jquery.jqplot.min.js (et quelques unes de ses sous lib)

Je n'utilise pas d'autres framework javascript.

Je viens également d'enlever le chemin complet dans le save() par avance.
Bonjour Smiley biggrin ,

J'ai testé la librairie jsPDF mais en utilisant le jsPDF.js qu'il y a sur gitUb.
Et j'ai remarqué que ce n'est pas le même que celui que tu utilise sur jsfiddle, car mon code marche seulement avec le fichier que tu a inclus mais pas avec celui qui est fournis sur gitUb.

Fin bon l'a n'est pas le problème ^^

Ce que je voudrai savoir c'est comment générer le pdf sur n'importe quel élément qui peut y avoir dans la div. Genre en plus du texte, les images etc... car là sa marche qu'avec du texte.