Convert Webseite in ein PDF mit Stilen

Question

Ich möchte eine Webseite in PDF konvertieren, einschließlich aller Stile, die ich hinzugefügt habe. Ich habe jspdf.js und html2Canvas verwendet. Aber ich habe nur ein unscharfes Bild im PDF-Format. Ich habe nach vielen JavaScript-Codes gesucht, aber keine richtige gefunden.

Script ich geschrieben habe, ist:

function getPDF() { 
 
    html2canvas(document.body, { 
 
    onrendered: function(canvas) { 
 
     var img = canvas.toDataURL("Image/jpeg"); 
 
     //window.open(img); 
 
     var doc = new jsPDF({ 
 
     unit: 'px', 
 
     format: 'a4' 
 
     }); 
 
     doc.addImage(img, 'JPEG', 0, 0, 440, 627); 
 
     doc.save("download"); 
 

 
    } 
 
    }); 
 
}

Danke!

Answer 1

Es kann ein paar Dinge geben, die dazu beitragen.

Ihre Encoderoptionen für die canvas.toDataURL fehlen, Sie erhalten also die Standardwerte. Die Standardeinstellungen können ein Bild mit niedriger Qualität erzeugen. Versuchen Sie, diese für höchste Qualität JPEG-Bild:

var img = canvas.toDataURL("Image/jpeg", 1.0); 

Sie auch versuchen könnten, Ihre jsPDF Objekt mit Messungen zu schaffen, anstatt Pixel:

var pdf = new jsPDF("p", "mm", "a4"); // jsPDF(orientation, units, format) 

Und wenn Sie das Bild hinzufügen, verkleinere sie auf die Dimensionen der Seite:

pdf.addImage(imgData, 'JPEG', 10, 10, 190, 277); // 190x277 mm @ (10,10)mm 

Sehen Sie, wenn das Ihnen eine bessere Bildqualität gibt.