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

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?

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

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.

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;

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.

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