Télécharger un div dans une page HTML en format pdf à l'aide de javascript

Vous pouvez le faire en utilisant jsPDF

DEMO

Exemple d'utilisation:

HTML:

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

JavaScript:

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

DEMO

Votre solution requiert une méthode ajax pour passer le html à un serveur back-end qui dispose d'une installation html à pdf, puis retourner la sortie PDF générée dans le navigateur.

En configurant d'abord le code côté client, nous configurons le code jquery comme

  var options = { "url": "/pdf/generate", "data": "data=" + $("#content").html(), "type": "post", } $.ajax(options) 

Ensuite, interceptez les données du script de génération html2pdf comme suit

  $html = $_POST['data']; $pdf = html2pdf($html); header("Content-Type: application/pdf"); //check this is the proper header for pdf header("Content-Disposition: attachment; filename='some.pdf';"); echo $pdf; 

Il n'y a pas un tel mécanisme dans jQuery, mais vous pouvez utiliser des plugins comme http://www.webresourcesdepot.com/create-pdf-files-with-javascript-jspdf/

Vérifiez également cette publication Est-il possible de générer PDF en utilisant jQuery?

AFAIK il n'y a pas de fonction jquery native qui fait cela. La meilleure option serait de traiter la conversion sur le serveur. La façon dont vous le faites dépend de la langue que vous utilisez (.net, php etc.). Vous pouvez passer le contenu du div à la fonction qui gère la conversion, ce qui renverrait un pdf à l'utilisateur.

Oui, il est possible de capturer div comme PDF dans JS. Vous pouvez vérifier la solution fournie par https://grabz.it . Ils ont une API JavaScript agréable et propre qui vous permettra de capturer le contenu d'un seul élément HTML tel qu'un div ou une portée.

Donc, vous l'utilisez, vous aurez besoin et app + clé et le SDK gratuit. L'utilisation de celui-ci est comme suit:

Disons que vous avez un HTML:

 <div id="features"> <h4>Acme Camera</h4> <label>Price</label>$399<br /> <label>Rating</label>4.5 out of 5 </div> <p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p> 

Pour capturer ce qui se trouve sous les caractéristiques id, vous devrez:

 //add the sdk <script type="text/javascript" src="grabzit.min.js"></script> <script type="text/javascript"> //login with your key and secret. GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html", {"target": "#features", "format": "pdf"}).Create(); </script> 

Vous devez remplacer le http://www.example.com/my-page.html par votre URL cible et #feature par votre sélecteur CSS.

C'est tout. Maintenant, lorsque la page est chargée, une capture d'écran d'image sera maintenant créée au même endroit que la balise de script, qui contiendra tout le contenu des fonctionnalités div et rien d'autre.

Il y a d'autres configurations et personnalisations que vous pouvez faire pour le mécanisme de capture d'écran div, s'il vous plaît vérifiez-les ici