2016-06-07 15 views
9

का उपयोग करके बहुत बड़ा बनाया गया है, मैं ब्राउज़र के अंदर पीडीएफ बनाने के लिए 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 पैरामीटर नहीं किया जा सकता।

क्या कोई मुझे फ़ाइल आकार को कम करने में मदद कर सकता है?

+0

क्या आप base64 में कनवर्ट करते हैं क्योंकि jspdf को इसकी आवश्यकता होती है? – YakovL

+0

मेरे पास बटन के क्लिक करके मेरे अंत में संग्रहीत छवि नहीं है, मुझे एसवीजी डेटा मिल रहा है और इसे कैनवास द्वारा पीएनजी में परिवर्तित कर रहा है, इसलिए पूरी प्रक्रिया को बेस 64 डेटा की आवश्यकता है। मैं क्लाइंट स्टोरेज पर सभी ग्राफ डेटा स्टोर नहीं कर सकता। –

+0

मैं देखता हूं। और आप jpeg के बजाय png का उपयोग क्यों कर रहे हैं? गुणवत्ता संशोधक के साथ जेपीईजी का उपयोग करने में मदद मिलेगी (https: // डेवलपर देखें।mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) – YakovL

उत्तर

16

आपको जेनरेट करने वाले पीडीएफ में छवियों को संपीड़ित करने की आवश्यकता है। Deflate.js और adler32cs.js का उपयोग करने का प्रयास करें और जेएसपीडीएफ दोनों में संपीड़न पैरामीटर का उपयोग करें और आप जिस इमेज फ़ंक्शंस का उपयोग कर रहे हैं उसे जोड़ें। उदाहरण के लिए:

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); 
आप, कोई नहीं, तेज, मध्यम और धीमी गति से बीच चयन कर सकते जो भी आप सबसे अच्छा सूट।

+0

यह काम करता है। मुझे jspdf addimag का उपयोग करके नीचे एक सीमा रेखा मिल रही है। उस पंक्ति को कैसे हटाएं – Lini

+0

वैसे भी क्षैतिज रेखा कागज पर मुद्रित नहीं है। – Lini

+0

मैं एक कस्टम ग्राफ से पीडीएफ बना रहा हूँ। मैं जेएसपीडीएफ का उपयोग कर पीडीएफ उत्पन्न करने में सक्षम हूं। लेकिन वेब पेज से ग्राफ और फ़ॉन्ट रंग का रंग पीडीएफ पर प्रतिलिपि बना रहा है। (ग्राफ-छाया प्रभाव ग्राफ से गायब है और ग्राफ धुंधला दिख रहा है)। मेरे द्वारा यह कैसे किया जा सकता है।? –

0

क्या आपने canvg को आजमाया है? यह बहुत संभावना नहीं है कि यह फाइलसाइज कम करेगा, लेकिन कम से कम आप कोशिश कर सकते हैं।

this reply में एक स्निपेट देखें।

+0

हाँ मैं पहले से ही आईई और सफारी ब्राउज़र के लिए कैनव्यू का उपयोग कर रहा हूं। लेकिन यह किसी फ़ाइल आकार में कमी से संबंधित है। –

6

आप एक दस्तावेज़ में कई छवियों को जोड़ रहे हैं, तो

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

नहीं

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

का उपयोग अन्यथा पहली छवि अन्य सभी विकल्प होगा।

+0

हाँ..यह सिर्फ उदाहरण दिया गया था, पीडीएफ.एड इमेज (पीएनजी, 'पीएनजी', बाएंमार्गिन, 120, 485, 270, अपरिभाषित, 'फास्ट'); उस अपरिभाषित में, आपको छवि को जोड़ने पर हर बार अलग-अलग नाम निर्दिष्ट करना होगा। प्रति एपीआई यह उपनाम नाम है। जिसे प्रति छवि अद्वितीय होना चाहिए। –

+0

उपर्युक्त उदाहरण कहने के लिए बस कूदकर मेरे 4 एमबी पीडीएफ (11 पेज, प्रति पेज 10 चार्ट के साथ) 977kb तक कम हो गया। इस टिप के लिए बहुत बहुत धन्यवाद! – JasonMHirst

संबंधित मुद्दे