Est-il possible d'enregistrer la page HTML en PDF à l'aide de JavaScript ou jquery?

Est-il possible d'enregistrer la page HTML en PDF à l'aide de JavaScript ou jquery?

En Détail:

J'ai généré une Page HTML qui contient un tableau . Il a un bouton "enregistrer en tant que PDF". Si l'utilisateur clique sur ce bouton alors que le HTML de la page a convertir en fichier PDF.

Est-il possible à l'aide de JavaScript ou jquery?

  • Tant que je sais, Javascript ne peut pas créer des documents pdf.
  • Beaucoup de gens peuvent imprimer en Pdf ces jours-ci. De sorte que la fonctionnalité est sans doute pas nécessaire.
  • Le format PDF est un texte en fonction de la langue. Vous auriez du mal à trouver un langage de programmation, vous ne pouviez pas le générer à partir de.
  • réponse possible ici: stackoverflow.com/questions/12108806/...
InformationsquelleAutor ram | 2011-08-01
  1. 25

    Oui, Utilisez jspdf Pour créer un fichier pdf.

    Ensuite, vous pouvez transformer en données URI et d'injecter un lien de téléchargement dans le DOM

    Vous aurez toutefois besoin d'écrire le code HTML vers pdf conversion vous-même.

    Suffit d'utiliser des versions imprimables de votre page et de laisser à l'utilisateur de choisir comment il veut imprimer la page.

    Edit:, Apparemment, il a un minimum de soutien

    Donc la réponse est d'écrire votre propre PDF writer ou obtenir un fichier PDF existant écrivain pour le faire pour vous (sur le serveur).

    • jspdf l'air intéressant, mais les démos ne fonctionne pas dans Firefox 5.0, ni IE!
    • jspdf a un minimum de soutien pour les caractéristiques, il ne marche pas même la carte graphique. Mais, à moins que le système de style et le rendu des choses est là - il est simplement utile pour les petites notes. Sinon, vous devrez écrire un ensemble de convertisseur HTML en JS aussi bien (ou tricher et utiliser de la toile avec drawElement, qui est seulement pris en charge dans firefox je crois me souvenir). Javascript est vraiment pas pour cette ligne de codage, si vous me demandez. Peut-être appel externe webservice est le moyen le plus facile.
    • JavaScript (comme la langue) est entièrement à elle. Le code JavaScript s'exécutant avec les restrictions de sécurité du navigateur modèles et les Api de moins.
    • Je suis sûr que quelqu'un pourrait construire une maison à partir des allumettes ou des cure-dents, mais à la fin de la journée - un entièrement soufflé pdf compilateur avec le soutien pour la couture, le graphisme, l'intégration des polices, styles et entièrement fonctionnel des tables de recherche est hors de question. Jetez un oeil à la source pour l'jspdf - il prend en charge uniquement les plus simples balises et pas de recherche de dictionnaires. Entièrement soufflé pdf compilateur est difficile de le faire en C++ ou Delphi même, un pur JS mise en œuvre serait suicidaire. Il y a des entreprises qui travaillent depuis des années la vente de leurs pdf compilateurs (voir gnostice par exemple). Ce n'est pas un "one liner".
    • Oui, il le fait d'avoir peu de soutien. Vous pouvez toujours écrire un PDF writer js si vous le souhaitez. Ce n'est pas une tâche facile, cependant. Un pur JS mise en œuvre est tout aussi suicidaire que C++ ou Delphi. Ne prétends pas le JS est un citoyen de seconde classe.
    • Bonjour, pourriez-vous s'il vous plaît vérifier cette question stackoverflow.com/questions/44670557/.... J'ai le même problème

    InformationsquelleAutor Raynos
  2. 12

    Ya très facile à faire avec du javascript. Espérons que ce code est utile pour vous.

    Vous aurez besoin de la JSpdf bibliothèque.

    <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>

    jsfiddle lien ici

    • image pas imprimer en pdf 🙁 vous avez une solution ??
    • Il ne prend pas en charge multipages, ni de styles css correctement.
    • Ne prend pas en charge les tableaux 🙁 Aimé l'approche
    • C'est poubelle
    InformationsquelleAutor Blackjoker
  3. 6

    Voici comment j'allais le faire, c'est une idée pas à l'épreuve des balles de conception, vous devez le modifier

    • L'utilisateur clique sur le enregistrer en tant que PDF bouton
    • Le serveur est envoyé un appel à l'aide d'ajax
    • Le serveur répond avec une URL pour les fichiers PDF générés en utilisant le HTML, j'ai utilisé Apache FOP très succssfully
    • Le js de la manipulation de l'ajax réponse ne un lieu.href pointer l'URL de l'envoyer par JS et dès que l'URL de charges, il envoie le fichier à l'aide du contenu de la disposition de l'en-tête en tant que pièce jointe de forcer l'utilisateur à télécharger le fichier.
    InformationsquelleAutor Kumar
  4. 5

    Vous pouvez utiliser Phantomjs. Télécharger ici et utilisez l'exemple suivant pour tester le code html->pdf de conversion 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
    • Pouvez-vous utiliser avec javascript au lieu d'un utilitaire en ligne de commande?
    • non, c'est un navigateur sans lequel vous pouvez contrôler à l'aide de javascript. Vous pouvez dire à imprimer une page web au format PDF via le javascript, mais la mise en œuvre n'est pas le javascript. Toutefois, l'a utilisé pour ce scénario exact en l'enveloppant dans une application qui utilise une file d'attente de pages à imprimer, et j'utilise javascript pour ajouter des entrées à la file d'attente. De même, on peut l'envelopper dans un service. Pour contrôler la façon dont les choses se imprimée si vous êtes sous le même limitation que chrome d'impression (par exemple, le css et le js pour créer une impression convivial vue)
    InformationsquelleAutor singh1469
  5. 4

    Cela pourrait être une réponse tardive mais c'est le meilleur autour de:
    https://github.com/eKoopmans/html2pdf

    Javascript Pure mise en œuvre.
    Vous permet de spécifier un seul élément par son ID et le convertir.

    InformationsquelleAutor Billcountry Mwaniki
  6. 4

    J'ai utilisé jsPDF et dom-to-image bibliothèque pour exporter au format HTML au format PDF.

    Je poste ici à titre de référence à qui concernent.

    $('#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émo: https://jsfiddle.net/viethien/md03wb21/27/

    InformationsquelleAutor Hien Nguyen
  7. 2

    En bref: non.
    Le premier problème est l'accès au système de fichiers, qui dans la plupart des navigateurs est pas activé par défaut pour des raisons de sécurité. Les navigateurs modernes soutiennent parfois minimaliste de stockage sous la forme d'une base de données, ou vous pouvez demander à l'utilisateur afin de permettre l'accès au fichier.

    Si vous avez accès au système de fichiers puis de le sauvegarder au format HTML n'est pas si difficile (voir le fichier d'objet dans le JS, documentation) - mais le PDF n'est pas si facile. Le format PDF est un très avancée du format du fichier que l'on est vraiment mal adapté pour le Javascript. Il vous oblige à écrire des informations dans les types de données non pris en charge directement par Javascript, telles que les mots et les quads. Vous devez également définir à l'avance une recherche dans le dictionnaire du système qui doivent être enregistrées dans le fichier. Je suis sûr que quelqu'un pourrait le faire fonctionner, mais l'effort et le temps serait mieux dépensé à l'apprentissage du C++ ou Delphi.

    L'exportation au format HTML ne devrait cependant être possible que si l'utilisateur vous donne non accès restreint

    • Pourquoi le C++ et Delphi inheritantly mieux à la création d'un PDF writer?
    • Parce que ces langues étaient buildt de faire des avancées du logiciel. Javascript ne l'était pas. Javascript n'a jamais été terminé, c'est pourquoi le prototype de système est suspendue. L'auteur avait prévu d'ajouter un HL pour avec de vraies classes et plus de types - mais il n'a pas eu le temps. Donc, il a publié "tel quel". Il ne prend pas en charge les pointeurs, brut de l'allocation de mémoire est douloureux, il ne prend pas en charge certains natifs, les types de données que vous trouverez dans d'autres langues, il ne supporte pas emballé structures (struct en C, Record en Pascal) ... la liste est sans fin. J'aime JS, mais c'est un navigateur jouet, pas une vraie langue.
    • Il y a quelques basé sur Java écrivains là-bas, et si vous regardez la taille du code source, il devrait être assez évident qu'il serait encore plus sous le Javascript, mais le point crucial est: le IO formatage et les tables de recherche. Je suis sûr que quelqu'un pourrait le faire, mais il serait extrêmement lent et de coeur, une perte de temps. Et comment allez-vous intégrer des données de police? Vous ne peut pas même obtenir le fichier à partir de l'OS, sans parler de le convertir (ce qui est une bibliothèque en elle-même) et l'incorporer. Pourquoi construire une maison de matchs quand vous pouvez, construire une maison normale?
    • "mais c'est un navigateur jouet, pas un vrai langage." C'est comme de dire que le Régime n'est pas une vraie langue. "il devrait être assez évident qu'il serait encore plus sous Javascrip", non. Java est gravement plus de commentaires JavaScript. Il devrait être d'environ 2/3 plus court que la version de Java. "mais c'est extrêmement lent et, en gros," Par est extrêmement lent, tu veux dire 3/4x plus lent que le C++ ? Pouvons-nous arrêter le traitement js comme un citoyen de deuxième classe. Merci.
    • Aussi. Si vous allez écrire du code que les interfaces avec les systèmes en C++, puis c'est assez logique que vous devez faire correspondre les structures de données nécessaires produites par ces langues (le fichier PDF de la structure, par exemple). Et c'est là que JS est dans trubble. Essayez de décalage de bits 64bits ... tu ne peux pas. Parce que le décalage de bits sous le JS est limitée à 32bits n'importe quel nombre vous avez initialement affecté à une variable. J'aime JS, mais ce n'est pas une vraie langue. Désolé. Et btw.. cela n'a rien à voir avec vous ou moi, personnellement. Il ne marche pas vous faire mieux ou pire que moi.
    • L'automne dernier, j'ai eu à livrer une application iPhone. Depuis qu'il avait à l'interface directement avec notre serveur personnalisé - cela signifiait que je ne pourrais pas utiliser de Javascript. Eh bien, je me suis assis et ai appris le C# et monotouch pour cette tâche particulière. Mon prochain projet sera toutefois pur javascript. Ce n'est pas un cas de "A par rapport à B", mais plutôt "quel est le langage le mieux adapté pour une tâche particulière". J'en ai vu des choses incroyables fait avec JS et j'ai vraiment l'amour de codage javascript. Tout dépend du projet que de l'utilitaire que vous devez utiliser.
    • Je suis d'accord avec vous, là, JavaScript a des limitations dans l'accès à des données binaires (qui sont en cours de correction) et c'est un cauchemar absolu à l'interface avec les choses extérieures en JS. Votre juste diaboliser trop 😉
    • Quelle que soit votre opinion personnelle, Jon, pourriez-vous arrêter de faire l'affirmation que "le Javascript n'est pas une vraie langue," parce que c'est BS. Javascript est un outil extrêmement puissant de la langue qui est optimisé pour un autre objet que d'un faible niveau de langage compilé comme le C ou le C++. Il y a des choses que vous pouvez faire en JS que vous ne pouvez pas le faire en C ou C++, mais ce que cela signifie, C et C++ ne sont pas de "vraies" langues? Non, juste qu'ils sont destinés pour des choses différentes. JS est tout aussi réel d'un langage de programmation comme tout autre turing-complet de la langue.

    InformationsquelleAutor Jon Lennart Aasenden
  8. 2

    JS:

    $('#cmd2').click(function() {
  	var options = {
		//'width': 800,
  	};
  	var pdf = new jsPDF('p', 'pt', 'a4');
  	pdf.addHTML($("#content2"), -1, 220, options, function() {
    	pdf.save('admit_card.pdf');
  	});
});

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<div id="content2" style="background: #fff;border-bottom: 1px solid #ffffff;">
<div class="tokenDet" style="padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;">
<div class="title" style="text-align: center;border-bottom: 1px solid #000;margin-bottom: 15px;">
<h2>Entrance Exam Hall Ticket</h2>
</div>
<div class="parentdiv" style="display: inline-block;width: 100%;position: relative;">
<div class="innerdiv" style="width: 80%;float: left;">
<div class="restDet">
<div class="div">
<div class="label" style="width: 30%;float: left;">
<strong>Name</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>Santanu Patra</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>D.O.B.</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>17th April, 1995</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Address</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>P.S. Srijan Corporate Park, Saltlake, Sector 5, Kolkata-91</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Contact Number</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>9874563210</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Email Id</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>[email protected]</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Parent(s) Name</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>S. Patra</span><br /><span>7896541230</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Exam Center</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>Institute of Engineering & Management</span>
</div>
<div class="label" style="width: 30%;float: left;">
<strong>Hall Number</strong>
</div>
<div class="data" style="width: 70%;display: inline-block;">
<span>COM-32</span>
</div>
</div>
</div>
</div>
<div class="sideDiv" style="width: 20%;float: left;">
<div class="atts" style="float: left;width: 100%;">
<div class="photo" style="width: 115px;height: 150px;float: right;">
<img src="images/candidateImg.gif" style="width: 100%;"/>
</div>
<div class="sign" style="position: absolute;bottom: 0;right: 0;border-top: 1px dashed #000;left: 80%;text-align: right;">
<small>Self Attested</small>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-info" id="cmd2">Download Token</button>

    • Le code ci-dessus ne fonctionne pas avec tous les navigateurs que j'ai testé. Rien ne se passe lorsque vous cliquez sur "Télécharger Jeton" et pas les erreurs sont enregistrées. Pouvez vous s'il vous plaît vérifier.
    InformationsquelleAutor Santanu
  9. 1

    Il y a un autre très évident et facile de convertir le HTML en PDf à l'aide de JavaScript: utilisation de l'API en ligne pour cela. Cela fonctionne très bien si vous n'avez pas besoin de faire la conversion lorsque l'utilisateur est hors-ligne.

    FreeHtmlToPdf.com est une option qui a une belle API. Je suis sûr que vous pouvez trouver des alternatives (comme PdfMage qui a évidemment sa propre API, mais ne partage pas son protocole).

    Pour FreeHtmlToPdf API, vous auriez quelque chose comme ceci:

    var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "http://freehtmltopdf.com");
var hiddenField = document.createElement("input");
hiddenField.setAttribute("name", "html");
hiddenField.setAttribute("value", "<html><body>Hi there!</body></html>");
form.appendChild(hiddenField);
hiddenField = document.createElement("input");
hiddenField.setAttribute("name", "baseurl");
hiddenField.setAttribute("value", "http://localhost");
form.appendChild(hiddenField);
hiddenField = document.createElement("input");
hiddenField.setAttribute("name", "convert");
hiddenField.setAttribute("value", "");
form.appendChild(hiddenField);
document.body.appendChild(form);
form.submit();
    • Freehtmltopdf.com ne semble pas être en place plus longtemps
    InformationsquelleAutor Andre Borges
  10. 1

    Oui. Par exemple, vous pouvez utiliser la solution par https://grabz.it.

    Il a une API Javascript qui peut être utilisé de différentes façons pour saisir et manipuler la capture d'écran. Afin de l'utiliser dans votre application, vous devez d'abord obtenir un application de la clé et le secret et télécharger le gratuit SDK Javascript.

    Donc, nous allons voir un exemple simple d'utilisation:

    //first include the grabzit.min.js library in the web page
<script src="grabzit.min.js"></script>
//include the code below to add the screenshot to the body tag    
<script>
//use secret key to sign in. replace the url.
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com").Create();
</script>

    Puis il suffit d'attendre un peu de temps avant que l'image s'affiche automatiquement en bas de la page, sans avoir à recharger la page.

    C'est le plus simple. Pour plus d'exemples de manipulation de l'image, de l'attachement des captures d'écran à des éléments et etc vérifier la la documentation.

    InformationsquelleAutor Johnny
  11. 1

    Il est beaucoup plus facile et fiable pour convertir html en pdf côté serveur. Nous sommes à l'aide de Google Marionnettiste. Il est bien entretenu avec des wrappers pour n'importe quel serveur de côté la langue de votre choix. Marionnettiste utilise sans tête de Chrome de générer des captures d'écran et/ou des fichiers PDF. Il va vous faire économiser BEAUCOUP de maux de tête, surtout si vous avez besoin de générer des fichiers PDF complexes avec des tableaux, des images, des graphiques, des pages multiples et donc

    https://developers.google.com/web/tools/puppeteer/

    InformationsquelleAutor Matej Janovčík
  12. -6

    Je pense que Non, car le JavaScript ne peut pas écrire sur le disque
    vous devez envoyer la page au serveur et de générer le fichier pdf, puis le client téléchargera

    InformationsquelleAutor Khalid Omar