का उपयोग करके बहुत बड़ा बनाया गया है, मैं ब्राउज़र के अंदर पीडीएफ बनाने के लिए jspdf का उपयोग कर रहा हूं। मेरे पास चार्ट डेटा के रूप में svg वाले एकाधिक चार्ट हैं। पीडीएफ में डेटा जोड़ने के लिए मैं कैनवास का उपयोग कर एसवीजी को पीएनजी में परिवर्तित कर रहा हूं और फिर विधि का उपयोग कर बेस 64 डेटा बदल रहा हूं। Jspdf द्वारा बनाई गई फ़ाइल के इस रूपांतरण के आकार के बाद विशाल (लगभग 50 एमबी) है। नीचे चार्ट डेटा और कैनवास के div के लिए कोड है। नीचेपीडीएफ फ़ाइल आकार jspdf
newdiv = document.createElement("div");
newdiv.className = "big_Con_graph big_Con_graph0";
newdiv.style.height = "0px";
newdiv.id = "big_Con_graph" + id;
एसवीजी चार्ट लोड के लिए आयाम है।
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";
अब नीचे ग्राफ एसवीजी डेटा के रूपांतरण और पीडीएफ में जोड़ने के लिए कोड है।
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 पैरामीटर नहीं किया जा सकता।
क्या कोई मुझे फ़ाइल आकार को कम करने में मदद कर सकता है?
क्या आप base64 में कनवर्ट करते हैं क्योंकि jspdf को इसकी आवश्यकता होती है? – YakovL
मेरे पास बटन के क्लिक करके मेरे अंत में संग्रहीत छवि नहीं है, मुझे एसवीजी डेटा मिल रहा है और इसे कैनवास द्वारा पीएनजी में परिवर्तित कर रहा है, इसलिए पूरी प्रक्रिया को बेस 64 डेटा की आवश्यकता है। मैं क्लाइंट स्टोरेज पर सभी ग्राफ डेटा स्टोर नहीं कर सकता। –
मैं देखता हूं। और आप jpeg के बजाय png का उपयोग क्यों कर रहे हैं? गुणवत्ता संशोधक के साथ जेपीईजी का उपयोग करने में मदद मिलेगी (https: // डेवलपर देखें।mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) – YakovL