Téléchargez un div dans une page HTML au format PDF en utilisant javascript

91

J'ai un contenu div avec l'identifiant comme "contenu". Dans le contenu div, j'ai quelques graphiques et quelques tableaux. Je veux télécharger ce div sous forme de pdf lorsque l'utilisateur clique sur le bouton de téléchargement. Existe-t-il un moyen de le faire en utilisant javascript ou jQuery?

javascript  jquery 
— Midhun Mathew
source
1
code.google.com/p/jspdf est la meilleure bibliothèque que je connaisse qui puisse faire cela.
— AlvinArulselvan
Comment puis-je utiliser jsPDF pour télécharger un contenu dans un div spécifique? d'après ce que je vois dans les exemples de leur site, cela ne peut pas être fait.
— Midhun Mathew

Réponses:

112

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');
});
— ilyes kooli
source
25
J'ai un problème. Le css que j'ai ajouté ici n'est pas appliqué dans le fichier pdf. J'ai aussi quelques graphiques .. ceux qui ne viennent pas dans le pdf. Que dois-je faire pour les obtenir?
— Midhun Mathew
14
jsPDF ne formate pas correctement les tableaux non plus, il interprète simplement td / th comme display: block;
— Dave le
2
En utilisant le code ci-dessus, nous ne pouvons créer un pdf qu'une seule fois. Mais pour la deuxième fois, cela ne fonctionne pas. Pour le faire fonctionner, vérifiez cette réponse par @ kristof-feys, Nous devons déclarer la docvariable à l'intérieur de la fonction de clic.
— Mahendran Sakkarai
4
C'est bien, juste dommage que le css ne soit pas rendu: /
— Nicholas
1
J'ai fait face à un problème d'encodage
— ema
19

Le contenu à l'intérieur d'un <div class='html-content'>....</div>peut être téléchargé au format pdf avec des styles utilisant jspdf & html2canvas .

Vous devez faire référence aux deux bibliothèques js, 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

Puis appelez la fonction ci-dessous, 

//Create PDf from HTML...
function CreatePDFfromHTML() {
    var HTML_Width = $(".html-content").width();
    var HTML_Height = $(".html-content").height();
    var top_left_margin = 15;
    var PDF_Width = HTML_Width + (top_left_margin * 2);
    var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas($(".html-content")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        }
        pdf.save("Your_PDF_Name.pdf");
        $(".html-content").hide();
    });
}

Réf: génération de pdf à partir de canevas html et jspdf .

Peut-être que cela aidera quelqu'un.

— Vishnu S
source
4
Cela a très bien fonctionné pour moi, merci. Il préserve tout le style mais il a certaines limitations (crée le PDF en tant qu'image afin qu'il ne puisse pas être recherché; semble également être légèrement flou).
— jramm
comment définir un saut de page si la moitié du contenu ne tient pas sur une page?
— SHEKHAR SHETE
Cela a très bien fonctionné pour moi. Le seul problème était que certaines de mes icônes SVG n'étaient pas rendues!
— Felipe N Moura
2

Votre solution nécessite une méthode ajax pour transmettre le html à un serveur d'arrière-plan qui dispose d'une fonction html vers pdf, puis renvoyer la sortie PDF générée au navigateur.

Commencez par configurer le code côté client, nous allons configurer le code jquery comme 

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

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

 

— DevZer0
source
Que voulez-vous dire par "a une installation htmltopdf"?
— Midhun Mathew
est-ce que je peux faire référence à la même URL ou dois-je la changer?
— Midhun Mathew
Vous auriez besoin d'une URL légèrement différente pour pouvoir différencier les deux contenus
— DevZer0
comment cette URL devrait-elle être? Pouvez-vous donner un exemple??
— Midhun Mathew
2
Vous serez foutu si le CSS est lié car votre programme principal ne saura pas où trouver les styles à moins qu'il ne puisse saisir le fichier CSS et appliquer les styles à partir du fichier.
— TheRealChx101
1

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 faites cela dépend de la langue que vous utilisez (.net, php, etc.). Vous pouvez transmettre le contenu du div à la fonction qui gère la conversion, ce qui renverrait un pdf à l'utilisateur.

— reggaemahn
source
-1

Oui, il est possible de capturer des div sous forme de 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 un span.

Donc, vous aurez besoin de l' application + clé et du SDK gratuit . Son utilisation est la suivante:

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 l'identifiant des fonctionnalités, 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.htmlpar votre URL cible et #featurepar votre sélecteur CSS.

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

Il existe d'autres configurations et personnalisations que vous pouvez faire pour le mécanisme div-screenshot, veuillez les vérifier ici

— Johnny
source
2
Je pense que vous n'obtenez que 1000 captures gratuites et 100 "grattages" gratuits avec grabz.it. Ce n'est donc pas une solution permanente à moins que vous ne soyez prêt à payer pour cela.
— BrettC
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.