Scarica un div in una pagina HTML come pdf usando javascript

Ho un div di contenuto con l'ID come "contenuto". Nel div contenuto ho alcuni grafici e alcune tabelle. Voglio scaricare quel div come pdf quando l'utente fa clic sul pulsante di download. C'è un modo per farlo usando javascript o jQuery?

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

Il contenuto all'interno di un <div class='html-content'>....</div>può essere scaricato come pdf con stili usando jspdf e html2canvas .

Devi fare riferimento a entrambe le librerie 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>

Quindi chiama la funzione di seguito,

//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();
    });
}

Rif: generazione di pdf da html canvas e jspdf .

Forse questo aiuterà qualcuno.

La tua soluzione richiede un metodo ajax per passare l'html a un server back-end che ha una funzione html in pdf e quindi restituire l'output pdf generato al browser.

Prima di configurare il codice lato client, configureremo il codice jquery come

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

Quindi intercetta i dati dallo script di generazione html2pdf come segue

   $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 non esiste una funzione jquery nativa che lo faccia. L'opzione migliore sarebbe elaborare la conversione sul server. Il modo in cui lo fai dipende dalla lingua che stai utilizzando (.net, php ecc.). Puoi passare il contenuto del div alla funzione che gestisce la conversione, che restituirà un pdf all'utente.

Sì, è possibile acquisire div come PDF in JS. Puoi controllare la soluzione fornita da https://grabz.it . Hanno un'API JavaScript carina e pulita che ti consentirà di catturare il contenuto di un singolo elemento HTML come un div o uno span.

Quindi, lo utilizzerai ti serviranno e l' app + key e l' SDK gratuito . L'utilizzo di esso è il seguente:

Supponiamo che tu abbia 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>

Per acquisire ciò che si trova sotto l'ID funzionalità dovrai:

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

Devi sostituire il http://www.example.com/my-page.htmlcon il tuo URL di destinazione e #featureper il tuo selettore CSS.

È tutto. Ora, quando la pagina viene caricata, uno screenshot dell'immagine verrà ora creato nella stessa posizione del tag script, che conterrà tutto il contenuto delle funzioni div e nient'altro.

Ci sono altre configurazioni e personalizzazioni che puoi fare per il meccanismo div-screenshot, per favore controllale qui