Размер файла Pdf слишком большой, созданный с помощью jspdf

Question

Я использую jspdf для создания PDF внутри браузера. У меня есть несколько диаграмм, имеющих svg как данные диаграммы. Для добавления данных в pdf я конвертирую svg в png, используя canvas, а затем Base64 Data, используя метод canvas.toDataURL. После всего этого размера конверсий файл, созданный jspdf, огромен (около 50 МБ). Ниже приведен код для данных диаграммы и холста.

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

ниже размеры для 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"; 

Ниже приведен код преобразования приведенных выше данных SVG и добавления в 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; 

это код функции 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); 

Я использую PNG, поэтому параметр IMAGEQUALITY не может быть использован.

Может ли кто-нибудь помочь мне уменьшить размер файла?

Answer 1

Вам необходимо использовать сжатие изображений в создаваемых PDF-файлах. Попробуйте использовать Deflate.js и adler32cs.js и используйте параметр сжатия как в jsPDF, так и в функциях addImage, которые вы используете. Для например:

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

убедитесь, что вы установите последний параметр как «истина» относится к: https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146

Пройдите через него, и вы можете ясно видеть, что последний параметр обеспечивает сжатие.

использовать также:

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

вместо

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

вы можете выбрать между NONE, БЫСТРО, MEDIUM и SLOW, в зависимости от того подходит вам лучше всего.

Answer 2

Вы попробовали canvg? Не очень вероятно, что это уменьшит размер файла, но, по крайней мере, вы можете попробовать.

См. Фрагмент в this reply.

Answer 3

Если добавить несколько изображений в одном документе, используйте

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

не

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

иначе первое изображение заменит все другие.