web-dev-qa-db-fra.com

La taille du fichier PDF est trop grande, elle a été créée avec jspdf.

J'utilise jspdf pour créer PDF dans le navigateur. Je vais avoir plusieurs cartes ayant svg comme données de graphique. Pour ajouter des données au format PDF, je convertis svg en png avec canvas, puis Base64 Data avec la méthode canvas.toDataURL. Après toutes ces conversions, la taille du fichier créé par jspdf est énorme (environ 50 Mo) . Ci-dessous se trouve le code pour div des données de graphique et de la zone de dessin.

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

vous trouverez ci-dessous les dimensions de la charge du graphique SVG.

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

vous trouverez ci-dessous le code de conversion des données SVG du graphique ci-dessus et d’ajout au format 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;

voici le code de la fonction PDFAfterImageLoad:

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

J'utilise png, le paramètre imagequality ne peut donc pas être utilisé.

Quelqu'un peut-il m'aider à réduire la taille du fichier?

javascripthtml5-canvasbase64jspdffusioncharts
11
Asha Koshti

Vous devez compresser les images dans les PDF que vous générez. Essayez d’utiliser Deflate.js et adler32cs.js et utilisez le paramètre compress dans les fonctions jsPDF et addImage que vous utilisez. Par exemple: 

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

assurez-vous de définir le dernier paramètre sur 'true' reportez-vous à: https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146

Parcourez-le et vous verrez clairement que le dernier paramètre sert à activer la compression.

Utiliser aussi :

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

au lieu de

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

vous pouvez choisir entre AUCUN, RAPIDE, MOYEN et LENT, selon ce qui vous convient le mieux.

28
hkm93

Si vous ajoutez plusieurs images à un même document, utilisez

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

ne pas

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

sinon la première image se substituera à toutes les autres.

10
Andrew Hudik

Avez-vous essayé canvg? Il est peu probable que cela réduise la taille du fichier, mais au moins, vous pouvez essayer.

Voir un extrait dans cette réponse .

0
YakovL

Dans mon cas, ne fonctionne pas avec le paramètre de compression. J'ai donc redimensionné moi-même l'image en cours avec la fonction suivante:

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();    
}

Et appelez-le comme suit:

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

Vous pouvez jouer avec les paramètres 'width' et 'height' dans la fonction resizeBase64Img afin de générer un pdf lourd avec une qualité d'image supérieure ou inférieure.

0
mikemaal