Télécharger un div dans une page HTML comme pdf en utilisant javascript

Question

J'ai une division de contenu dont l'identifiant est "content". Dans cette div de contenu, j'ai des graphiques et des tableaux. Je veux télécharger cette division au format PDF lorsque l'utilisateur clique sur le bouton de téléchargement. Y a-t-il un moyen de le faire en utilisant javascript ou jQuery ?

Answer 1

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

Answer 2

Contenu à l'intérieur d'un <div class='html-content'>....</div> peuvent être téléchargés en pdf avec les styles en utilisant jspdf & html2canvas .

Vous devez référencer les 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>

Ensuite, 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 html canvas et jspdf .

Peut-être que cela aidera quelqu'un.

Answer 3

Votre solution nécessite une méthode ajax pour transmettre le html à un serveur dorsal qui dispose d'une fonction de conversion du html en pdf, puis de renvoyer la sortie pdf générée au navigateur.

Pour commencer à configurer le code côté client, nous allons configurer le code jquery de la manière suivante

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

Puis intercepter les données de la génération html2pdf script (quelque part sur internet).
convert_to_pdf.php (donné en tant qu'url dans le code JQUERY) ressemble à ceci -

<?php
    $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;
?>

Answer 4

A priori, il n'existe pas de fonction native de Jquery qui permette de faire cela. La meilleure option serait de traiter la conversion sur le serveur. La façon de procéder dépend du langage que vous utilisez (.net, php, etc.). Vous pouvez passer le contenu du div à la fonction qui gère la conversion, qui renverra un pdf à l'utilisateur.

Answer 5

Oui, il est possible de capturer des div en PDF en JS. Vous pouvez consulter la solution fournie par https://grabz.it . Ils disposent d'une API JavaScript agréable et propre qui vous permettra de capturer le contenu d'un élément HTML unique tel qu'un div ou un span.

Donc, pour l'utiliser, il vous faut et app+key et le libre SDK . 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 caractéristiques, 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 avec votre url cible et #feature selon votre sélecteur CSS.

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

Il y a d'autres configurations et personnalisations que vous pouvez faire pour le mécanisme de div-screenshot, veuillez les vérifier. aquí