Pdf-Datei Größe zu groß erstellt mit jspdf

Ich bin mit jspdf für die Erstellung von PDF innerhalb des Browsers. Ich habe mehrere Diagramme mit svg als Grafik-Daten. Für das hinzufügen von Daten zu pdf ich bin die Konvertierung von svg zu png mit Leinwand und dann Base64-Daten mit canvas.toDataURL Methode. Nach all diesen Umbauten die Größe der Datei, die erstellt wird, indem jspdf ist riesig (etwa 50 MB).
Unten ist der code für die div-chart-Daten und Leinwand.

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

unten ist die Abmessungen für die SVG-Grafik zu laden.

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

nun unten ist der code für die Konvertierung der obigen Grafik SVG-Daten und das hinzufügen von 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 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 bin mit png, also imagequality parameter kann nicht verwendet werden.

Kann mir jemand helfen, verringern Sie die Größe der Datei?

Tun Sie umwandeln in base64-weil jspdf erfordert, dass?
habe ich nicht dem Bild gespeichert, auf mein Ende, indem Sie die Taste i m erste svg-Daten und deren Konvertierung in png durch die Leinwand,so dass der gesamte Prozess erfordert base64-Daten.auch ich kann nicht speichern Sie alle graph-Daten an den client-Speicher.
Ich sehe. Und warum verwenden Sie png statt jpeg? Verwendung von jpeg mit Qualität modifier geholfen hätte (siehe developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/...)
ja, aber jpeg gibt schlechte Qualität, genauso wie bei der Qualität parameter auch.auch ich möchte die zoom-in und zoom-out mit pdf ist nicht möglich, mit dem jpeg-Format.
Was sind die Dimensionen dieses Bild? Können Sie uns zeigen, was das Bild enthält/funktioniert es gelten für jedes Bild, das Sie hinzufügen? Können Sie zeigen Sie uns den code, den Sie verwenden, um es jspdf? (und die onload-callback verwendet wird, in die falsche Richtung, sollte eine Funktions-Referenz; jetzt ist es ein Anruf mit dem Ergebnis, dass für onload).
Vielen Dank für das update. Es immer noch ein bisschen unklar, was die pdfAfterImageLoad tut. Und wie ich oben erwähnte, ist es falsch verwendet. Es ist nun aufgerufen und das Ergebnis (das kann keiner) ist festgelegt, wie die handler-Funktion onload. Auch, wenn das Bild nicht geladen in der Zeit der Methode drawImage wird scheitern unten. Die Zeichenoperationen müssen drin sein (oder aufgerufen) wird der onload-handler-Funktion.
habe ich angehängt, die den code für pdfafter Bild laden, da es einfach das Bild auf pdf.nichts anderes
Ich Schätze, Sie haben image/jpeg und test möglich und geeignete Qualitäts-parameter!

InformationsquelleAutor Asha Koshti | 2016-06-07

40

Müssen Sie komprimieren Sie die Bilder in der PDF, die Sie generieren. Versuchen Sie es mit Deflate.js und adler32cs.js und die Nutzung der compress parameter in beiden jsPDF und addImage Funktionen, die Sie verwenden. Für zB :
```
var doc = new jsPDF('p', 'pt','a4',true);
```
stellen Sie sicher, dass Sie den letzten parameter als 'wahr' bezeichnen : https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146

Durch Sie gehen, und Sie können deutlich sehen, dass der Letzte parameter ist für die Aktivierung der Komprimierung.

Auch :
```
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');
```
statt
```
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);
```
können Sie wählen zwischen KEINE, SCHNELLE, MITTLERE und LANGSAME, je nachdem, was Ihnen am besten passt.
- dieser funktioniert. Bin immer eine Grenze an der unteren Linie - mit jspdf addimag. so entfernen Sie diese Zeile
- sowieso die horizontale Linie nicht auf das Papier gedruckt.
- Ich bin die Erstellung von pdf aus einem benutzerdefinierten Diagramm. Ich bin in der Lage zu generieren, die pdf-Datei mit der jspdf. Aber die Farbe der Grafik und die Farbe der Schrift von der Seite zu replizieren, die auf der pdf-Datei. (box-shadow Effekt fehlt von graph und Diagramm ist auf der Suche Unschärfe). Wie kann ich es beheben.?
- kann dir den link mit der jsfiddle.also ich kann guide Sie mit der Lösung..eigentlich svg, die charts generiert, die das problem schafft.wir eliminieren müssen einige tag-oder es zu korrigieren,
- Ok. Sicher, ich werde versuchen zu jsfiddle es. Ich werde herausfinden, wie es in jsfiddle.
- warum hat es nicht funktioniert für chrome? obwohl es vorher funktioniert ohne Komprimierung pdf-Lösung, wie Sie sagte.
- Aber es funktioniert jetzt für den IE
- Ihr herzlich willkommen ^_^
InformationsquelleAutor hkm93
14

Wenn Sie fügen Sie mehrere Bilder zu einem Dokument, verwenden Sie
```
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270, undefined,'FAST');
```
nicht
```
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');
```
sonst das erste Bild ersetzt alle anderen.
- ja..es war nur Beispiel,, pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270, undefined,'FAST'); in diesem nicht definiert haben,müssen Sie verschiedene Namen jedes mal, wenn Sie fügen Sie das Bild.wie pro API-es ist der Alias-name.die einzigartige pro Bild.
- Nur springen auf, um zu sagen, dass das obige Beispiel auch reduzierte meine 4Mb PDF (11 Seiten mit 10 Diagrammen pro Seite) nach unten zu 977kb. Vielen Dank für diesen Tipp!
InformationsquelleAutor Andrew Hudik
0

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

Sehen Sie ein snippet in diese Antwort.
- ja, ich bin schon mit canvg für die IE-und safari-Browsern.aber seine im Zusammenhang mit jeder Datei Größe verringern.
InformationsquelleAutor YakovL

In meinem Fall nicht mit komprimieren parameter. So, ich verkleinert das aktuelle Bild auf meinem eigenen mit der folgenden Funktion:

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

Können Sie spielen mit 'width' und 'height' - Parameter in resizeBase64Img Funktion zur Erzeugung von schweren pdf mit besser oder schlechteste Bildqualität.

InformationsquelleAutor mikemaal

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.