Est-il possible d'enregistrer une page HTML au format PDF en utilisant JavaScript ou jquery ?
En détail :
J'ai généré une page HTML qui contient un tableau. Elle comporte un bouton "Enregistrer en PDF". Si l'utilisateur clique sur ce bouton, la page HTML doit être convertie en fichier PDF.
Est-ce possible en utilisant JavaScript ou jquery ?
C'est peut-être une réponse tardive mais c'est la meilleure qui soit : https://github.com/eKoopmans/html2pdf
Implémentation purement javascript. Vous permet de spécifier un seul élément par ID et de le convertir.
C'est ce que j'ai utilisé, même si j'ai eu du mal à placer les sauts de page au bon endroit. J'ai dû ajouter des divs supplémentaires avec à l'intérieur, et ajoutez X padding-top (X = numéro de page) à l'élément que j'avais précédemment mis en page, puisque le contenu de chaque page commencerait de plus en plus haut. Je ne sais pas si c'était un conflit de bootstrap ou autre. Voici le code que j'ai ajouté, dans une fonction à exécuter juste avant d'appeler html2pdf : elements = document.getElementsByClassName("newBox"); for (var i = 0; i < elements.length; i++) {elements[i].style.paddingTop = elements[i].style.paddingTop = i + "px";};
Mais html2pdf brise mes éléments d'interface utilisateur tabulaires (construits à l'aide de la grille CSS) à des endroits bizarres.
Oui Utiliser jspdf Pour créer un fichier pdf.
Vous pouvez ensuite le transformer en une URI de données et injecter un lien de téléchargement dans le DOM.
Vous devrez cependant écrire vous-même la conversion HTML vers pdf.
Utilisez simplement des versions imprimables de votre page et laissez l'utilisateur choisir comment il souhaite l'imprimer.
Editar: Apparemment, il a un soutien minimal
La réponse est donc d'écrire votre propre rédacteur de PDF ou de demander à un rédacteur de PDF existant de le faire pour vous (sur le serveur).
Jspdf semblent intéressants, mais les démos ne fonctionnent pas dans Firefox 5.0 ni dans IE !
Jspdf a un support minimal pour les fonctionnalités, il ne supporte même pas les graphiques. Mais à moins que le système de style et le rendu ne soient présents, il n'est fondamentalement utile que pour les petites notes. Sinon, vous devrez écrire un rendu HTML complet en JS également (ou tricher et utiliser canvas avec drawElement, qui n'est supporté que dans firefox si je me souviens bien). Javascript n'est vraiment pas fait pour cette ligne de codage si vous voulez mon avis. Peut-être que l'appel à un service web externe est le moyen le plus simple.
JavaScript (en tant que langage) est entièrement à la hauteur. JavaScript fonctionnant avec les restrictions des modèles de sécurité et des API des navigateurs l'est moins.
Oui, c'est très facile à faire avec javascript. J'espère que ce code vous sera utile.
Vous aurez besoin du Bibliothèque 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');
});
// This code is collected but useful, click below to jsfiddle link.
</script>
J'ai utilisé jsPDF y dom-to-image pour exporter du HTML en PDF.
J'en parle ici comme d'une référence à qui s'inquiète.
$('#downloadPDF').click(function () {
domtoimage.toPng(document.getElementById('content2'))
.then(function (blob) {
var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
pdf.save("test.pdf");
});
});Démonstration : https://jsfiddle.net/viethien/md03wb21/27/
Si je passe en mode réactif et télécharge le pdf, la page du pdf ne s'affiche pas correctement. Existe-t-il un moyen d'obtenir le même résultat qu'en mode bureau lorsque je télécharge en mode réactif ?
Vous pouvez utiliser Phantomjs. Télécharger aquí et utiliser l'exemple suivant pour tester la fonction de conversion html->pdf https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js
Exemple de code :
phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf
@Dynamic non, c'est un navigateur sans tête que vous pouvez contrôler via javascript. Vous pouvez lui dire d'imprimer une page web en PDF via javascript mais l'implémentation n'est pas javascript. Cependant, je l'ai utilisé pour ce scénario exact en l'intégrant dans une application qui consomme une file d'attente de pages à imprimer, et j'utilise javascript pour ajouter des entrées à la file d'attente. De la même manière, vous pourriez l'intégrer dans un service. Pour contrôler la façon dont les choses sont imprimées, vous êtes soumis aux mêmes limitations que pour l'impression de chrome (par exemple, css et js pour créer une vue adaptée à l'impression).
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
3 votes
Pour autant que je sache, Javascript ne peut pas créer de documents pdf.
2 votes
De nos jours, beaucoup de gens peuvent imprimer en PDF. On peut donc dire que cette fonctionnalité n'est pas nécessaire.
4 votes
Le PDF est un langage basé sur le texte. Vous auriez du mal à trouver un langage de programmation à partir duquel vous ne pourriez pas le générer.
1 votes
Une réponse possible ici : stackoverflow.com/questions/12108806/