it-swarm.com.de

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

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

73
Midhun Mathew

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

Für Ihre Lösung ist eine Ajax-Methode erforderlich, um den HTML-Code an einen Back-End-Server mit HTML-to-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 wie folgt ein

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

Fangen Sie dann die Daten aus dem HTML2PDF-Generierungsskript 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;

2
DevZer0

Es gibt keinen solchen Mechanismus in jQuery, aber Sie können Plugins wie http://www.webresourcesdepot.com/create-pdf-files-with-javascript-jspdf/ verwenden

Überprüfen Sie auch diesen Beitrag Ist es möglich, PDF mit jQuery zu generieren?

1
Baseleus

AFAIK gibt es keine native JQuery-Funktion, die dies tut. Die beste Option wäre, die Konvertierung auf dem Server durchzuführen. 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 durchführt, wodurch ein PDF an den Benutzer zurückgegeben wird.

1
reggaemahn

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 nette und saubere JavaScript-API, mit der Sie den Inhalt eines einzelnen HTML-Elements wie eines Div oder Span erfassen können.

Also, du wirst es brauchen und app + key 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 den http://www.example.com/my-page.html Durch Ihre Ziel-URL und #feature Gemäß Ihrer CSS-Auswahl ersetzen.

Das ist alles. Wenn die Seite nun geladen wird, wird ein Screenshot am selben Ort wie das Skript-Tag erstellt, das den gesamten Inhalt der Funktionen div und sonst nichts enthält.

Das sind andere Konfigurationen und Anpassungen, die Sie am Div-Screenshot-Mechanismus vornehmen können. Schauen Sie sich diese an hier

0
Johnny