Dimensioni del file Pdf troppo grandi create usando jspdf

Question

Sto usando jspdf per creare PDF all'interno del browser. Sto avendo più grafici che hanno svg come dati del grafico. Per aggiungere dati a pdf sto convertendo svg in png usando canvas e quindi Base64 Data usando il metodo canvas.toDataURL. Dopo tutte queste conversioni, la dimensione del file creato da jspdf è enorme (circa 50 MB). Di seguito è riportato il codice per div dei dati del grafico e dell'area di disegno.

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

sotto è le dimensioni del carico grafico 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"; 

ora sotto è il codice per la conversione dei dati SVG del grafico sopra e l'aggiunta al 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; 

Questo è il codice per la funzione 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); 

Sto usando png, quindi il parametro QUALITIMM non possono essere utilizzati.

Qualcuno può aiutarmi a ridurre le dimensioni del file?

Answer 1

È necessario utilizzare comprimere le immagini nei PDF che si stanno generando. Prova a usare Deflate.js e adler32cs.js e usa il parametro compress in entrambe le funzioni jsPDF e addImage che stai utilizzando. Per esempio:

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

assicurarsi di impostare l'ultimo parametro come 'vero' si riferiscono a: https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146

passare attraverso di essa e si può vedere chiaramente che l'ultimo parametro serve ad abilitare la compressione.

Anche utilizzare:

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

invece di

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

è possibile scegliere tra NONE, FAST, MEDIUM e lento, a seconda di quale vi si addice meglio.

Answer 2

Hai provato canvg? Non è molto probabile che riduca la dimensione del file, ma almeno puoi provare.

Vedere uno snippet in this reply.

Answer 3

Se si aggiungono diverse immagini di un documento, utilizzare

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

non

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

altrimenti la prima immagine sostituirà tutti gli altri.