wake-up-neo.com

Pdf-Dateigröße zu groß mit Jspdf erstellt

Ich verwende jspdf, um PDF im Browser zu erstellen. Ich habe mehrere Diagramme mit SVG als Diagrammdaten. Für das Hinzufügen von Daten zu PDF konvertiere ich svg in png mithilfe der Zeichenfläche und dann Base64-Daten mit der canvas.toDataURL-Methode. Nach all diesen Konvertierungen ist die Größe der von jspdf erstellten Datei sehr groß (ca. 50 MB) . Nachfolgend finden Sie den Code zum div der Diagrammdaten und der Zeichenfläche.

newdiv = document.createElement("div");
newdiv.className = "big_Con_graph big_Con_graph0";
newdiv.style.height = "0px";
newdiv.id = "big_Con_graph" + id;

unten finden Sie die Abmessungen für die SVG-Diagrammlast.

document.getElementById("big_Con_graph" + id).style.display = "block";
var big_chartReference = FusionCharts("big_myChartId"+id);
if(big_chartReference != null){
    big_chartReference.dispose();
}
var big_width = "1088";
var big_height = "604";

im Folgenden finden Sie den Code zum Konvertieren der obigen SVG-Diagrammdaten und zum Hinzufügen zu PDF.

var elem_graph = $($('.big_Con_graph,big_Con_graph0')[count]).clone(true);
svgString = $(elem_graph).find("span").html();
var img = document.createElement('img');
var DOMURL = self.URL || self.webkitURL || self;
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = pdfAfterImageLoad(img,pdf,imgLoadSequence,DOMURL,totalReports,reportName);
img.src = url;

dies ist der Code für die PDFAfterImageLoad-Funktion:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);

Ich verwende png, daher kann der Parameter imagequality nicht verwendet werden.

Kann mir jemand helfen, die Dateigröße zu verringern?

11
Asha Koshti

Sie müssen die Bilder in den von Ihnen generierten PDF-Dateien komprimieren. Versuchen Sie es mit Deflate.js und adler32cs.js und verwenden Sie den compress-Parameter in den von Ihnen verwendeten jsPDF- und addImage-Funktionen. Für zB: 

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

stellen Sie sicher, dass Sie den letzten Parameter als "true" festgelegt haben. Siehe: https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146

Gehen Sie es durch und Sie können deutlich sehen, dass der letzte Parameter die Komprimierung aktiviert.

Auch verwenden :

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');

anstatt

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);

sie können zwischen NONE, FAST, MEDIUM und SLOW wählen, je nachdem, was Ihnen am besten passt.

28
hkm93

Wenn Sie einem Dokument mehrere Bilder hinzufügen, verwenden Sie

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270, undefined,'FAST');

nicht

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');

andernfalls wird das erste Bild alle anderen ersetzen.

10
Andrew Hudik

Haben Sie canvg ausprobiert? Es ist nicht sehr wahrscheinlich, dass dadurch die Dateigröße verringert wird, aber Sie können es zumindest versuchen.

Sehen Sie einen Ausschnitt in diese Antwort .

0
YakovL

In meinem Fall funktionierte nicht mit compress-Parameter. Also habe ich das aktuelle Bild selbst mit der folgenden Funktion angepasst:

function resizeBase64Img(base64, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("<img/>").attr("src", "data:image/gif;base64," + base64).load(function() {
        context.scale(width/this.width,  height/this.height);
        context.drawImage(this, 0, 0); 
        deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));               
    });
    return deferred.promise();    
}

Und nenne es wie folgt:

//select my image in base64
var imageStr64 = "/9j/4RiDRXhpZgAATU0AKgA...";
//resize image, add image and create the pdf
resizeBase64Img(imageStr64, 1000, 1000).then(function(newImg){
    doc.addImage($(newImg).attr('src'), 15, 90, 180,180);
    doc.save('mypdf.pdf');
});

Sie können mit 'width' und 'height' Parametern in der resizeBase64Img-Funktion spielen, um schwere PDFs mit besserer oder schlechterer Bildqualität zu erzeugen.

0
mikemaal