Laden Sie ein Div in einer HTML-Seite als PDF mit Javascript herunter

Ich habe ein Inhaltsdiv mit der ID als "Inhalt". Im Inhaltsbereich habe ich einige Grafiken und einige Tabellen. Ich möchte dieses div als pdf herunterladen, wenn der Benutzer auf den Download-Button klickt. Gibt es eine Möglichkeit, dies mit Javascript oder jQuery zu tun?

Sie können dies mit jsPDF tun

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

Inhalte in a <div class='html-content'>....</div>können als PDF mit Stilen unter Verwendung von jspdf & html2canvas heruntergeladen werden .

Sie müssen beide js-Bibliotheken referenzieren.

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

Dann rufen Sie die folgende Funktion auf:

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

Ref: PDF-Generierung von HTML-Canvas und JSPDF .

Vielleicht hilft das jemandem.

Ihre Lösung erfordert eine Ajax-Methode, um den HTML-Code an einen Back-End-Server mit einer HTML-PDF-Funktion zu übergeben und die generierte PDF-Ausgabe an den Browser zurückzugeben.

Zuerst richten wir den clientseitigen Code ein, dann richten wir den jquery-Code als ein

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

Fangen Sie dann die Daten aus dem Generierungsskript html2pdf wie folgt ab

   $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 gibt es keine native jquery-Funktion, die dies tut. Die beste Option wäre, die Konvertierung auf dem Server zu verarbeiten. Wie Sie dies tun, hängt davon ab, welche Sprache Sie verwenden (.net, PHP usw.). Sie können den Inhalt des div an die Funktion übergeben, die die Konvertierung übernimmt, wodurch ein PDF an den Benutzer zurückgegeben wird.

Ja, es ist möglich, div als PDFs in JS zu erfassen. Sie können die von https://grabz.it bereitgestellte Lösung überprüfen . Sie haben eine schöne und saubere JavaScript-API, mit der Sie den Inhalt eines einzelnen HTML-Elements wie div oder span erfassen können.

Also, du benutzt es, du brauchst und App + Schlüssel und das kostenlose SDK . Die Verwendung ist wie folgt:

Angenommen, Sie haben einen HTML-Code:

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

Um zu erfassen, was sich unter der Funktions-ID befindet, müssen Sie:

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

Sie müssen die http://www.example.com/my-page.htmldurch Ihre Ziel-URL und #featuregemäß Ihrer CSS-Auswahl ersetzen .

Das ist alles. Wenn die Seite geladen wird, wird an derselben Stelle wie das Skript-Tag ein Bild-Screenshot erstellt, der den gesamten Inhalt der Funktionen div und nichts anderes enthält.

Weitere Konfigurationen und Anpassungen, die Sie am Div-Screenshot-Mechanismus vornehmen können, finden Sie hier