wake-up-neo.net

Wie konvertiert man eine HTML-Seite in PDF dann runterladen

Dies ist meine mit HTML und CSS gestaltete Webseite:

 

Wie kann ich dieselbe Webseite als PDF herunterladen? Ich habe viele Lösungen ausprobiert, bekomme aber nur Inhalte in der Datei PDF, jedoch nicht im CSS-Stil.

Irgendwelche Lösungen?

javascriptjquerycsshtml5pdf-generation
5
ajay

Wie in diesem Beitrag beschrieben, können Sie dazu die Bibliothek jsPDF verwenden.

Stellen Sie sicher, dass Sie jQuery und jsPDF in Ihre Datei aufnehmen.

Holen Sie sich auch html2canvasJS , um die Dokumentelemente in Canvas zu konvertieren, um das CSS zu korrigieren.

JS:

let doc = new jsPDF('p','pt','a4');

doc.addHTML(document.body,function() {
    doc.save('html.pdf');
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

<div id="content">
  <h1 style="color:red">Hello World</h1>
  <p>this is a PDF</p>
</div>

Demo:JSFiddle

Sie können den Download auch mit einem Button auslösen ( Details finden Sie im ersten Beitrag )

15
Ivan

  1. Laden Sie die neueste Version von jsPDF herunter.

  2. Fügen Sie Ihrem Projekt die folgenden Skripts hinzu:

    • jspdf.js 
    • jspdf.plugin.from_html.js 
    • jspdf.plugin.split_text_to_size.js 
    • jspdf.plugin.standard_fonts_metrics.js 
1
Kirit