Vue का उपयोग करके Excel XLSX को आयात और निर्यात करना: एक मार्गदर्शिका

"यह बहुत अच्छा लग रहा है, लेकिन क्या आप एक्सेल आयात जोड़ सकते हैं?"

अगर आपने लंबे समय तक सॉफ़्टवेयर विकसित किया है, तो आपने शायद एक से ज़्यादा बार किसी मैनेजर से यह सवाल सुना होगा। गैर-तकनीकी लोगों के लिए, एक्सेल आयात/निर्यात के लिए पूछना कोई बड़ी बात नहीं लगती। यह कितना मुश्किल हो सकता है, है न?

लेकिन अक्सर, यह सवाल डेवलपर्स के दिलों में डर पैदा कर देता है। ज़्यादातर प्लेटफ़ॉर्म पर, एक्सेल फ़ाइलों के साथ काम करने के लिए बहुत ज़्यादा काम करना पड़ता है। ऐतिहासिक रूप से, यह वेब पर दोगुना सच रहा है। वेब ऐप में एक्सेल डेटा के साथ काम करना कुछ हद तक इस xkcd कॉमिक जैसा लगता है: "आसान और लगभग असंभव के बीच का अंतर समझाना मुश्किल हो सकता है।" एक्सेल आयात और एक्सेल निर्यात के साथ अपनी खुद की इन-ब्राउज़र स्प्रेडशीट बनाना एक ऐसी समस्या लगती है जिसे हल करने में पाँच साल और एक शोध टीम लगेगी।

यह बदल रहा है। अब हमारे पास टर्नकी लाइब्रेरी हैं जो आपको अपने वेब ऐप में पूरी तरह से काम करने वाली स्प्रेडशीट डालने देती हैं। SpreadJS उनमें से एक है। हम देखेंगे कि मौजूदा Vue ऐप - Vuex स्टोर का उपयोग करने वाला एक वास्तविक दुनिया का ऐप - कैसे लें और SpreadJS का उपयोग करके इसे बेहतर बनाएँ।

लेख का बाकी हिस्सा यह मानता है कि आप पहले से ही HTML, CSS और JavaScript को समझते हैं। यह भी मानता है कि आपको वेब UI बनाने के लिए Vue.js प्रगतिशील JavaScript फ़्रेमवर्क का कामकाजी ज्ञान है। यदि आपने स्टेट मैनेजमेंट के लिए Vuex का उपयोग किया है तो यह मददगार होगा, लेकिन यदि आपने नहीं किया है तो चिंता न करें। यह सहज और समझने में आसान है, और यदि आपने Vue का उपयोग किया है तो आप कोड को पढ़कर ही यह पता लगा पाएंगे कि क्या हो रहा है।

इस ब्लॉग में, हम इन चरणों का पालन करके अपने Vue ऐप में Excel आयात और निर्यात जोड़ने का तरीका बताएंगे:

1. व्यू एप्लीकेशन संरचना
2. अपने Vue ऐप में SpreadJS जोड़ें
3. एक्सेल निर्यात जोड़ें
4. एक्सेल आयात जोड़ें
5. अपना Vue ऐप टेस्ट करें

व्यू ऐप

हम जिस Vue ऐप पर काम करेंगे, वह एक सीधा-सादा बिक्री डैशबोर्ड है जिसमें कुछ सारांश पैनल और डेटा की एक तालिका है। यह एक ऐसा ऐप है जो “बुरा नहीं” श्रेणी में आता है:

हालाँकि यह सिर्फ़ एक डेमो है, लेकिन यह बिल्कुल वैसा ही ऐप है जिसे एंटरप्राइज़ वेब डेवलपर्स को बनाना होता है। यह बिल्कुल वैसा ही ऐप है जिसमें हमें आम तौर पर एक्सेल कार्यक्षमता जोड़ने के लिए कहा जाता है, इसलिए यह इस लेख के बाकी हिस्सों के लिए एक आदर्श उदाहरण होगा।

इस एप्लिकेशन का कोड यहां पाया जा सकता है।

यदि आप देखना चाहते हैं कि स्क्रैच से Vue एप्लिकेशन कैसे बनाया जाए, तो इस त्वरित आरंभ गाइड को देखें।

मंच तैयार करने के लिए, डैशबोर्ड Vue के साथ बनाया गया एक सिंगल-पेज एप्लिकेशन है। यह नवीनतम और बेहतरीन Vue सर्वोत्तम प्रथाओं का उपयोग करता है: सिंगल-फ़ाइल घटक और एक Vuex डेटा स्टोर। यह अपने CSS घटकों और ग्रिड सिस्टम के लिए बूटस्ट्रैप का भी उपयोग कर रहा है।

बूटस्ट्रैप अब उतना लोकप्रिय नहीं है जितना पहले हुआ करता था, लेकिन वास्तव में, बूटस्ट्रैप अभी भी हर जगह है - खासकर एंटरप्राइज़ वेब ऐप में जहाँ एक्सेल सपोर्ट की आमतौर पर ज़रूरत होती है। हम शर्त लगा सकते हैं कि 2030 में भी बहुत सारे नए एंटरप्राइज़ वेब ऐप बूटस्ट्रैप का इस्तेमाल करेंगे।

यदि आप अपने स्प्रेडशीट-सक्षम ऐप्स में बुल्मा या टैचियन का उपयोग करना चाहते हैं, तो आगे बढ़ें! स्प्रेडजेएस उनमें से किसी के साथ भी अच्छी तरह से काम करेगा।

व्यू एप्लीकेशन संरचना

आइए देखें कि कोड किस तरह से संरचित है। हमारा Vuex स्टोर और Vue एप्लिकेशन दोनों main.js में परिभाषित हैं। हमारे पास कई सिंगल-फ़ाइल Vue घटक हैं, जो सभी घटक फ़ोल्डर में स्थित हैं।

यदि आप हमारे Vuex स्टोर को देखेंगे, तो आपको निम्नलिखित चीज़ें दिखाई देंगी:

 const store = new Vuex.Store({ state: { recentSales } mutations: { UPDATE_RECENT_SALES(state) { state.recentSales.push([]); state.recentSales.pop(); } } });

हमारे स्टोर की आरंभिक स्थिति recentSales के मान पर सेट है, जो कि हमारे द्वारा आयातित डमी डेटा का एक सेट है। हमारे पास एक फ़ंक्शन भी है जो हाल ही में हुई बिक्री को अपडेट करने का काम संभालता है जब वे बदल जाते हैं।

एक मिनट रुकिए। अगर हमारे पास डेटा का सिर्फ़ एक सेट है, तो हम तीन चार्ट और एक टेबल कैसे बना रहे हैं? यह देखने के लिए कि क्या हो रहा है, Dashboard.vue घटक खोलें। इसमें, आप देखेंगे कि Vuex स्टोर में मौजूद डेटा के आधार पर कई कंप्यूटेड प्रॉपर्टीज़ बनाई जा रही हैं:

 <template> <div style="background-color: #ddd"> <NavBar title="Awesome Dashboard"/> <div class="container"> <div class="row"> <TotalSales :total="totalSales"/> <SalesByCountry :salesData="countrySales"/> <SalesByPerson :salesData="personSales"/> <SalesTable :tableData="salesTableData"/> </div> </div> </div> </template> <script> import NavBar from "./NavBar"; import TotalSales from "./TotalSales"; import SalesByCountry from "./SalesByCountry"; import SalesByPerson from "./SalesByPerson"; import SalesTable from "./SalesTable"; import { groupBySum } from "../util/util"; export default { components: { NavBar, SalesByCountry, SalesByPerson, SalesTable, TotalSales }, computed: { totalSales() { const items = this.$store.state.recentSales; const total = items.reduce((acc, sale) => (acc += sale.value), 0); return parseInt(total); }, chartData() { const items = this.$store.state.recentSales; const groups = groupBySum(items, "country", "value"); return groups; }, personSales() { const items = this.$store.state.recentSales; const groups = groupBySum(items, "soldBy", "value"); return groups; }, salesTableData() { return this.$store.state.recentSales; }, } }; </script>

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

यह प्रतिक्रियाशीलता अगले अनुभाग में उपयोगी होगी जब हम अपनी उबाऊ पुरानी स्थिर तालिका को संपादन योग्य स्प्रेडशीट से बदलेंगे।

अपने Vue ऐप में SpreadJS जोड़ना

यहीं से मज़ा शुरू होता है! हमारे पास हमारा डैशबोर्ड है, लेकिन हम उस पुरानी HTML टेबल को खत्म करना चाहते हैं। इसलिए, हमें चीजों को थोड़ा बदलना होगा। हमारे पास एक शानदार शुरुआत है, लेकिन हमें लाइसेंस के बिना विकास मोड में SpreadJS का उपयोग करने के लिए अपने ऐप को स्थानीय रूप से चलाना होगा।

अंतिम परिणाम देखने के लिए आप तैयार कोड को डाउनलोड कर सकते हैं।

स्प्रेडजेएस के बिना मूल प्रोजेक्ट खोलकर शुरू करें। टर्मिनल खोलें, उस निर्देशिका पर जाएँ जहाँ आपने रिपॉजिटरी को क्लोन किया था, और 'npm install' चलाएँ। यह एप्लिकेशन को चलाने के लिए आवश्यक निर्भरताएँ स्थापित करता है। जब निर्भरता स्थापना समाप्त हो जाती है, तो अपडेट किए गए ऐप को क्रिया में देखने के लिए 'npm serve' चलाएँ। यदि आप विशेष रूप से उपयोग की गई लाइब्रेरीज़ को आयात करना चाहते हैं, तो आप इस कमांड का उपयोग कर सकते हैं:

 npm install @mescius/spread-sheets @mescius/spread-sheets-vue @mescius/spread-excelio file-saver bootstrap

आइए उन बदलावों पर नज़र डालें जो हमें अपने पुराने ऐप को उसके नए और बेहतर वर्शन में अपग्रेड करने के लिए करने होंगे। चूँकि हम अपनी बिक्री तालिका को स्प्रेडशीट से बदलने जा रहे हैं, इसलिए हम शीट को अपने मौजूदा SalesTable.vue घटक में डाल देंगे, लेकिन सबसे पहले, हमें अपनी पुरानी तालिका से छुटकारा पाना होगा। एक बार जब यह चला जाएगा, तो हमारा SalesTable टेम्प्लेट इस तरह दिखेगा:

 <template> <TablePanel title="Recent Sales"> </TablePanel> </template>

टेबल हटाने के बाद, हमारा टेबल पैनल तैयार हो गया है और स्प्रेडशीट का इंतज़ार कर रहा है, तो चलिए एक स्प्रेडशीट जोड़ते हैं! स्प्रेडजेएस शीट जोड़ने के बाद, हमारा टेम्प्लेट इस तरह दिखेगा:

 <template> <TablePanel title="Recent Sales"> <gc-spread-sheets :hostClass='hostClass' @workbookInitialized='workbookInit'> <gc-worksheet :dataSource='tableData' :autoGenerateColumns='autoGenerateColumns'> <gc-column :width='50' :dataField="'id'" :headerText="'ID'" :visible = 'visible' :resizable = 'resizable' > </gc-column> <gc-column :width='300' :dataField="'client'" :headerText="'Client'" :visible = 'visible' :resizable = 'resizable' > </gc-column> <gc-column :width="350" :headerText="'Description'" :dataField="'description'" :visible = 'visible' :resizable = 'resizable' > </gc-column> <gc-column :width="100" :dataField="'value'" :headerText="'Value'" :visible = 'visible' :formatter = 'priceFormatter' :resizable = 'resizable' > </gc-column> <gc-column :width="100" :dataField="'itemCount'" :headerText="'Quantity'" :visible = 'visible' :resizable = 'resizable' > </gc-column> <gc-column :width="100" :dataField="'soldBy'" :headerText="'Sold By'" :visible = 'visible' :resizable = 'resizable' ></gc-column> <gc-column :width="100" :dataField="'country'" :headerText="'Country'" :visible = 'visible' :resizable = 'resizable' ></gc-column> </gc-worksheet> </gc-spread-sheets> </TablePanel> </template>

यह समझने के लिए बहुत कुछ है, इसलिए आइये हम इस पर नजर डालें और समझें कि क्या हो रहा है।

सबसे पहले, हम gc-spread-sheets तत्व का उपयोग करके एक स्प्रेडशीट बनाते हैं और इसे हमारे घटक के दो गुणों से बांधते हैं: hostClass और workbookInit.

स्प्रेडशीट के अंदर, हम gc-worksheet तत्व के साथ एक नई वर्कशीट बनाते हैं और इसे हमारे घटक के tableData और autoGenerateColumns गुणों से जोड़ते हैं। ध्यान दें कि tableData बिल्कुल वही tableData है जिसका उपयोग हमने अपनी सादी HTML तालिका बनाने के लिए किया था। हम अपने डेटा को SpreadJS में बिना किसी बदलाव के वैसे ही डाल सकते हैं!

अंत में, वर्कशीट के अंदर, हम कॉलम परिभाषित करते हैं जो SpreadJS को बताते हैं कि हमारा डेटा कैसे प्रदर्शित करना है। dataField प्रॉपर्टी हमें बताती है कि इस कॉलम को अंतर्निहित डेटासेट की कौन सी प्रॉपर्टी प्रदर्शित करनी चाहिए, और headerText SpreadJS को उपयोग करने के लिए एक अच्छी तरह से स्वरूपित कॉलम नाम देता है। प्रत्येक कॉलम के लिए बाकी बाइंडिंग सीधी हैं। SpreadJS डॉक्यूमेंटेशन में उन सभी चीज़ों की पूरी सूची है जिन्हें आप gc-column में पास कर सकते हैं।

तो, हमारे टेम्पलेट के साथ, यह सब काम करने के लिए कितना कोड चाहिए होगा? सौभाग्य से, बहुत ज़्यादा नहीं! यहाँ हमारे SalesTable.vue घटक का नया स्क्रिप्ट कोड है:

 import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css"; // SpreadJS imports import GC from "@mescius/spread-sheets"; import "@mescius/spread-sheets-vue"; import Excel from "@mescius/spread-excelio"; import TablePanel from "./TablePanel"; export default { components: { TablePanel }, props: ["tableData"], data(){ return { sheetName: 'Sales Data', hostClass:'spreadsheet', autoGenerateColumns:true, width:200, visible:true, resizable:true, priceFormatter:"$ #.00" } }, methods: { workbookInit: function(_spread_) { this._spread = spread; var self = this; spread.bind(GC.Spread.Sheets.Events.ValueChanged, function () { const store = self.$store; var sheet = self._spread.getSheetFromName("Sales Data"); var newSalesData = sheet.getDataSource(); store.commit('UPDATE_RECENT_SALES', newSalesData); }); } } };

Vue की सरलता के कारण, इसे काम करने के लिए बहुत कम कोड की आवश्यकता होती है। यदि यहाँ कुछ ऐसा है जिससे आप अपरिचित हैं, तो Vue दस्तावेज़ के 'घटक गहराई से' अनुभाग में Vue घटकों के बारे में विस्तार से बताया गया है। केवल कुछ आयात, कुछ डेटा गुण और कुछ विधियाँ बदली हैं। डेटा गुण परिचित लगने चाहिए; हमने उन्हें कुछ समय पहले टेम्पलेट में देखा था। वे कॉन्फ़िगरेशन विकल्प हैं जिन्हें हम अपने SpreadJS स्प्रेडशीट में घटकों से बाँध रहे हैं।

वर्कबुकइनिट विधि एक कॉलबैक है जिसे स्प्रेडजेएस तब कॉल करता है जब शीट आरंभ की जाती है। इस विधि में, हम अपने शीटजेएस स्प्रेडशीट ऑब्जेक्ट को अपने घटक पर एक इंस्टेंस वैरिएबल के रूप में सहेजते हैं ताकि हम ज़रूरत पड़ने पर सीधे इसके साथ बातचीत कर सकें। हमने ValueChanged इवेंट के लिए एक बाइंडिंग फ़ंक्शन भी जोड़ा है ताकि जब भी SpreadJS इंस्टेंस में मान बदले जाएँ तो डेटा को स्वचालित रूप से अपडेट किया जा सके।

एक आखिरी बदलाव: हम अपने घटक को स्प्रेडशीट शैली की मदद करने के लिए एक स्कोप्ड शैली देते हैं। हमने इसे पहले देखा था जब हमने gc-spread-sheets तत्व को hostClass पास किया था। चूंकि hostClass को 'spreadsheet' पर सेट किया गया है, इसलिए हम स्प्रेडशीट नामक एक CSS क्लास बनाने जा रहे हैं:

 <style scoped> .spreadsheet { width: 100%; height: 400px; border: 1px solid lightgray; } </style>

इस बिंदु पर, यदि हम कोई अन्य परिवर्तन नहीं करते हैं और अपना डैशबोर्ड लोड करते हैं, तो यह इस तरह दिखाई देगा:

लेकिन रुकिए, अभी और भी कुछ है!

याद रखें कि कैसे हमने डेटा सेट में कोई बदलाव किए बिना अपने टेबल डेटा को स्प्रेडशीट में पास किया था? अब जबकि हमारा डेटा स्प्रेडशीट में है, हम इसे संपादित कर सकते हैं।

अगर हम बिक्री #6 का मूल्य $35,000 से $3500 कर दें तो क्या होगा? अगर हम शीट में जाकर मूल्य को संपादित करते हैं, तो हमें एक डैशबोर्ड मिलता है जो इस तरह दिखता है:

वाह! क्या हुआ?

हमने SpreadJS शीट को अपडेट किया, और इसने स्वचालित रूप से हमारे Vuex स्टोर को अपडेट कर दिया।

ऐसा भी लगता है कि एंजेला का बिक्री महीना शानदार से औसत दर्जे का हो गया है। इसके लिए माफ़ी चाहता हूँ, एंजेला!

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

एक्सेल निर्यात जोड़ना

हमारी शीट में एक्सेल एक्सपोर्ट जोड़ना आसान है। सबसे पहले, आइए अपने डैशबोर्ड में एक एक्सपोर्ट बटन जोड़ें। हम इसे SalesTable.vue फ़ाइल में अपने टेबल पैनल के निचले भाग में, gc-spread-sheets क्लोजिंग टैग के ठीक बाद रखने जा रहे हैं:

 … </gc-spread-sheets> <div class="dashboardRow"> <button class="btn btn-primary dashboardButton" @click="exportSheet"> Export to Excel </button> </div> </TablePanel> </template>

जैसा कि आप देख सकते हैं, हमारा बटन exportSheet नामक एक क्लिक हैंडलर की अपेक्षा कर रहा है। हम इसे कुछ ही देर में जोड़ देंगे, लेकिन पहले, हम फ़ाइल-सेवर नामक NPM पैकेज से एक फ़ंक्शन आयात करेंगे:

 import { saveAs } from 'file-saver';

इसके बाद, आइए exportSheet को हमारे घटक के methods ऑब्जेक्ट में जोड़ें:

 exportSheet: function() { const spread = this._spread; const fileName = "SalesData.xlsx"; //const sheet = spread.getSheet(0); const excelIO = new IO(); const json = JSON.stringify(spread.toJSON({ includeBindingSource: true, columnHeadersAsFrozenRows: true, })); excelIO.save(json, (blob) => { saveAs(blob, fileName); }, function (e) { console.log(e) }); }

कोड क्या कर रहा है, यह इस प्रकार है: सबसे पहले, हमें अपनी बिक्री डेटाशीट का संदर्भ मिलता है। चूंकि यह हमारी स्प्रेडशीट में एकमात्र शीट है, इसलिए यह इंडेक्स 0 पर रहती है, और हम इसे getSheet को कॉल करके एक्सेस करते हैं। यदि हमें शीट के साथ सीधे इंटरैक्ट करने की आवश्यकता हो, तो इसे फ़ंक्शन में कहीं और इस्तेमाल किया जा सकता है।

फिर हम SpreadJS की ExcelIO लाइब्रेरी को इंस्टेंटिएट करते हैं, अपनी शीट को JSON में बदलते हैं, और SpreadJS से इसे सेव करने के लिए कहते हैं। वाह! हमने अपने स्प्रेडशीट-सक्षम Vue ऐप से एक Excel फ़ाइल निर्यात कर ली है!

ध्यान दें कि हम शीट के toJSON कॉल में दो क्रमांकन विकल्प पास कर रहे हैं: includeBindingSource और columnHeadersAsFrozenRows। साथ में, ये विकल्प सुनिश्चित करते हैं कि शीट से जुड़ा हमारा डेटा सही तरीके से निर्यात किया गया है और शीट में हमारे कॉलम हेडर शामिल हैं। इसलिए, निर्यात की गई Excel फ़ाइल को देखने से प्रत्येक कॉलम को समझा जा सकेगा।

एक्सेल आयात जोड़ना

अब, एक्सेल फ़ाइलों को आयात करने की क्षमता जोड़ने का समय है।

हमारे निर्यात बटन के ठीक नीचे, हम निम्नलिखित मार्कअप जोड़ने जा रहे हैं:

 <div> <b>Import Excel File:</b> <div> <input type="file" class="fileSelect" @change='fileChange($event)' /> </div> </div>

जैसा कि आप देख सकते हैं, हम एक मानक HTML फ़ाइल पिकर का उपयोग करेंगे और फ़ाइल का चयन करने पर fileChange नामक घटक विधि को ट्रिगर करेंगे।

अब जबकि हमने टेम्पलेट जोड़ लिया है, तो आइए अपने घटक के मेथड्स ऑब्जेक्ट में परिवर्तन हैंडलर जोड़ें:

 fileChange: function (_e_) { if (this._spread) { const fileDom = e.target || e.srcElement; const excelIO = new Excel.IO(); const spread = this._spread; const store = this.$store; /*const deserializationOptions = { includeBindingSource: true, frozenRowsAsColumnHeaders: true };*/ excelIO.open(fileDom.files[0], (_data_) => { // Used for simply loading the JSON from a file //spread.fromJSON(data, deserializationOptions); var newSalesData = extractSheetData(data); store.commit('IMPORT_RECENT_SALES', newSalesData) }); } }

Excel फ़ाइल को आयात करना उसे निर्यात करने जैसा ही है, सिवाय इसके कि यह उल्टा है। फ़ाइल चुनने के बाद, हम ExcelIO से उसे आयात करने के लिए कहते हैं। जब यह हो जाता है, तो यह शीट की जानकारी को जावास्क्रिप्ट ऑब्जेक्ट के रूप में कॉलबैक फ़ंक्शन में भेजता है। इसके बाद, हम आयातित डेटा को कस्टम फ़ंक्शन के माध्यम से पास करते हैं ताकि हमें उससे आवश्यक डेटा निकाल सकें और फिर उसे Vuex स्टोर में वापस भेज सकें।

आम तौर पर, फ़ाइल आयात करना ExcelIO ओपन विधि को कॉल करने जितना ही सरल है, लेकिन वर्कबुक "fromJSON" विधि का उपयोग करना। इस मामले में, हम केवल आयातित फ़ाइल से डेटा पार्स करना चाहते हैं और स्टोर को अपडेट करना चाहते हैं, जो फिर SpreadJS को अपडेट करेगा।

हमारे extractSheetData फ़ंक्शन में, जो आपको src/util.util.js फ़ाइल में मिलेगा, आप देखेंगे कि हम ExcelIO द्वारा लौटाए गए JavaScript ऑब्जेक्ट से डेटा खींचते हैं और इसे हमारे Vuex स्टोर में डेटा के आकार से मेल खाने के लिए पुनर्गठित करते हैं।

हमारा आयात फ़ंक्शन मानता है कि आयातित शीट में डेटा में हमारे मूल डेटा सेट के समान कॉलम होंगे। यदि कोई व्यक्ति ऐसी स्प्रेडशीट अपलोड करता है जो इस आवश्यकता को पूरा नहीं करती है, तो हमारा ऐप इसे संभाल नहीं पाएगा। यह अधिकांश लाइन-ऑफ़-बिज़नेस ऐप में एक स्वीकार्य सीमा है। चूँकि हमारा डैशबोर्ड एक विशिष्ट डेटा प्रकार प्रदर्शित करने के लिए डिज़ाइन किया गया है, इसलिए उपयोगकर्ताओं से उस प्रारूप में डेटा प्रदान करने के लिए कहना उचित है जो ऐप अपेक्षित करता है।

जब डेटा निष्कर्षण पूरा हो जाता है, तो हम Vuex स्टोर पर कमिट को कॉल करते हैं और अपडेट किए गए बिक्री लेनदेन डेटा को भेजते हैं। स्प्रेडजेएस शीट और डैशबोर्ड पैनल नए डेटा को प्रतिबिंबित करने के लिए खुद को अपडेट करते हैं। हम वास्तव में बदले जा रहे मूल्य के मुकाबले आयात करने के लिए एक अलग म्यूटेशन फ़ंक्शन का उपयोग कर सकते हैं ताकि हम इसे main.js फ़ाइल में “IMPORT_RECENT_SALES” के रूप में जोड़ सकें:

 const store = new Vuex.Store({ state: { recentSales }, mutations: { UPDATE_RECENT_SALES(state) { state.recentSales.push([]); state.recentSales.pop(); }, IMPORT_RECENT_SALES(state, sales) { state.recentSales = sales; } } });

अपने Vue ऐप का परीक्षण करें

अब जब आपने कोड देख लिया है, तो आइए हमारे Vue ऐप में Excel आयात और निर्यात का परीक्षण करें।

'एक्सेल में निर्यात करें' बटन पर क्लिक करके शुरू करें। फिर आपका वेब ब्राउज़र एक एक्सेल स्प्रेडशीट डाउनलोड करेगा जिसमें वह सारा डेटा होगा जो हमने अपने डैशबोर्ड की स्प्रेडशीट में देखा था।

एक्सेल में शीट खोलें, और डेटा की कुछ पंक्तियाँ जोड़ें। यदि आप नए देश या नए सेल्सपर्सन का उपयोग करते हैं तो यह ठीक है; हमारे सभी डैशबोर्ड घटक इसे संभाल सकते हैं। बस सावधान रहें कि कॉलम क्रम या नाम न बदलें। जब आप समाप्त कर लें, तो हाल ही में बिक्री पैनल के नीचे 'फ़ाइल चुनें' बटन पर क्लिक करें। आपके द्वारा अभी संपादित की गई एक्सेल फ़ाइल का चयन करें।

जब आप फ़ाइल का चयन करेंगे, तो आपको अपडेट किए गए डैशबोर्ड घटक दिखाई देंगे.

निष्कर्ष

हमारा काम हो गया! हमने एक साधारण Vue डैशबोर्ड ऐप लिया और उसमें एक लाइव स्प्रेडशीट जोड़ दी। अब हम शीट में डेटा को संपादित कर सकते हैं और अपने पूरे डैशबोर्ड को खुद अपडेट होते हुए देख सकते हैं। हमारा उन्नत डैशबोर्ड एक्सेल फ़ाइलों को आयात और निर्यात करने में भी सक्षम है।

Vue, Vuex और SpreadJS एक दूसरे के पूरक हैं। Vue की आसान टेम्प्लेटिंग और डेटा बाइंडिंग, Vuex के रिएक्टिव डेटा स्टोर और SpreadJS की इंटरैक्टिव स्प्रेडशीट के साथ, जटिल एंटरप्राइज़ जावास्क्रिप्ट ऐप कुछ ही घंटों में बनाए जा सकते हैं।

यह भले ही बहुत बढ़िया लगे, लेकिन हमने SpreadJS की क्षमताओं के बारे में बहुत कम जानकारी दी है। SpreadJS आपके लिए क्या कर सकता है, इसे बेहतर ढंग से समझने के लिए, SpreadJS डेमो देखें, जिसमें SpreadJS की विभिन्न विशेषताओं के पूर्ण डेमो, स्पष्टीकरण और उन विशेषताओं को प्रदर्शित करने वाला लाइव कोड शामिल है। यदि आप अपने स्वयं के ऐप्स में SpreadJS का उपयोग करने के बारे में अधिक जानना चाहते हैं, तो SpreadJS दस्तावेज़ीकरण में वह जानकारी है जिसकी आपको आवश्यकता है।

इस जावास्क्रिप्ट स्प्रेडशीट घटक के बारे में अधिक जानें: