web-dev-qa-db-fra.com

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

J'ai un contenu div avec l'ID comme "contenu". Dans le contenu, j'ai des graphiques et des tableaux. Je veux télécharger cette div en pdf lorsque l'utilisateur clique sur le bouton de téléchargement. Y a-t-il un moyen de faire cela en utilisant javascript ou jQuery?

javascriptjquery
73
Midhun Mathew

Vous pouvez le faire en utilisant jsPDF

HTML: 

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

    <p>A paragraph</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');
});
99
ilyes kooli

Votre solution nécessite une méthode ajax pour transmettre le code HTML à un serveur dorsal doté d’une fonction html à pdf, puis renvoyer la sortie pdf générée au navigateur.

Tout d’abord, pour configurer le code côté client, nous allons configurer le code jquery comme suit:

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

Puis intercepter 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;

2
DevZer0

JQuery n’existe pas, mais vous pouvez utiliser des plugins tels que http://www.webresourcesdepot.com/create-pdf-files-with-javascript-jspdf/

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

1
Baseleus

Autant que je sache, il n’existe pas de fonction jquery native pour cela. La meilleure option serait de traiter la conversion sur le serveur. Cela dépend de la langue que vous utilisez (.net, php, etc.). Vous pouvez transmettre le contenu de la div à la fonction qui gère la conversion, ce qui renverrait un pdf à l'utilisateur.

1
reggaemahn

Oui, il est possible de capturer un fichier div au format 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'une div ou une étendue.

Donc, vous en aurez besoin et app + clé et le libre SDK . Son utilisation est la suivante:

Disons que vous avez un code 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, vous devez:

//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 image d’écran sera créée au même endroit que la balise script, qui contiendra tout le contenu de la fonction div et rien d’autre.

Il existe d’autres configurations et personnalisations que vous pouvez appliquer au mécanisme div-screenshot, veuillez les vérifier ici

0
Johnny