Rozmiar pliku pdf zbyt duży utworzony za pomocą jspdf

Question

Używam jspdf do tworzenia plików PDF wewnątrz przeglądarki. Mam wiele wykresów zawierających svg jako dane wykresu. Aby dodać dane do pliku pdf, konwertuję plik SVG na png przy użyciu obszaru roboczego, a następnie danych Base64 przy użyciu metody canvas.toDataURL. Po tym wszystkim wielkość konwersji pliku utworzonego przez jspdf jest ogromna (około 50 MB). Poniżej znajduje się kod dla div danych wykresu i kanwy.

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

Poniżej wymiary SVG obciążenia wykresu.

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

Poniżej znajduje się kod do konwersji powyższych danych SVG wykresu i dodanie do pliku 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; 

jest to kod dla funkcji 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); 

Używam PNG, więc parametr imagequality nie może być używany.

Czy ktoś może mi pomóc zmniejszyć rozmiar pliku?

Answer 1

Należy użyć kompresji obrazów w plikach PDF, które generujesz. Spróbuj użyć Deflate.js i adler32cs.js i użyj parametru compress w obu funkcjach jsPDF i addImage, których używasz. Dla np

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

upewnij się ustawić ostatni parametr jako „prawdziwy” odnoszą się do: https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146

Przejdź przez nią i można wyraźnie zobaczyć, że ostatni parametr jest umożliwienie kompresji.

używać również:

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

zamiast

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

można wybrać pomiędzy None, szybki, średni i SLOW, cokolwiek najbardziej Ci odpowiada.

Answer 2

Czy próbowałeś już canvg? Nie jest bardzo prawdopodobne, że zmniejszy to rozmiar pliku, ale przynajmniej możesz spróbować.

Zobacz fragment w this reply.

Answer 3

Jeśli dodać kilka zdjęć na jednym dokumencie, należy

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

nie

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

inaczej pierwszy obraz zastąpi wszystkie inne.