Vue ব্যবহার করে এক্সেল XLSX আমদানি এবং রপ্তানি করা: একটি গাইড

"এটি দুর্দান্ত দেখাচ্ছে, কিন্তু আপনি কি শুধু এক্সেল আমদানি যোগ করতে পারেন?"

আপনি যদি দীর্ঘ সময়ের জন্য সফ্টওয়্যার তৈরি করে থাকেন তবে আপনি সম্ভবত একজন পরিচালকের কাছ থেকে একাধিকবার এই প্রশ্নটি শুনেছেন। একটি অ-প্রযুক্তিগত ভিড়ের কাছে, এক্সেল আমদানি/রপ্তানির জন্য জিজ্ঞাসা করা একটি বড় চুক্তির মতো শোনাচ্ছে না। এটা কত কঠিন হতে পারে, তাই না?

তবে প্রায়শই, এই প্রশ্নটি বিকাশকারীদের হৃদয়ে ভয় জাগিয়ে তোলে। বেশিরভাগ প্ল্যাটফর্মে, এক্সেল ফাইলগুলির সাথে কাজ করার জন্য প্রচুর পরিশ্রমের প্রয়োজন হয়। ঐতিহাসিকভাবে, এটি ওয়েবে দ্বিগুণ সত্য হয়েছে। একটি ওয়েব অ্যাপে এক্সেল ডেটা নিয়ে কাজ করা কিছুটা এই xkcd কমিকের মতো অনুভূত হয়েছে: "সহজ এবং কার্যত অসম্ভবের মধ্যে পার্থক্য ব্যাখ্যা করা কঠিন হতে পারে।" Excel আমদানি এবং Excel এক্সপোর্টের সাথে আপনার নিজস্ব ইন-ব্রাউজার স্প্রেডশীট তৈরি করা একটি সমস্যার মতো মনে হয় যা সমাধান করতে পাঁচ বছর সময় লাগবে এবং একটি গবেষণা দল।

যে পরিবর্তন হচ্ছে. আমাদের কাছে এখন টার্নকি লাইব্রেরি রয়েছে যা আপনাকে আপনার ওয়েব অ্যাপে একটি সম্পূর্ণ কার্যকরী স্প্রেডশীট ফেলে দিতে দেয়। স্প্রেডজেএস তাদের মধ্যে একটি। আমরা দেখব কিভাবে একটি বিদ্যমান Vue অ্যাপ - একটি Vuex স্টোর ব্যবহার করে একটি বাস্তব-বিশ্বের অ্যাপ - এবং SpreadJS ব্যবহার করে এটিকে উন্নত করা যায়।

নিবন্ধের বাকি অংশটি অনুমান করে যে আপনি ইতিমধ্যেই HTML, CSS এবং JavaScript বুঝতে পেরেছেন। এটি অনুমান করে যে ওয়েব UI তৈরি করার জন্য আপনার কাছে Vue.js প্রগতিশীল জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের কাজের জ্ঞান রয়েছে। আপনি রাষ্ট্র পরিচালনার জন্য Vuex ব্যবহার করলে এটি সাহায্য করবে, কিন্তু যদি না থাকে তবে চিন্তা করবেন না। এটি স্বজ্ঞাত এবং বোঝা সহজ, এবং আপনি যদি Vue ব্যবহার করে থাকেন তবে কোডটি পড়ে কী ঘটছে তা বের করতে সক্ষম হবেন।

এই ব্লগে, আমরা এই পদক্ষেপগুলি অনুসরণ করে কীভাবে আপনার Vue অ্যাপে এক্সেল আমদানি এবং রপ্তানি যুক্ত করতে পারি তা কভার করব:

1. Vue অ্যাপ্লিকেশন কাঠামো
2. আপনার Vue অ্যাপে SpreadJS যোগ করুন
3. এক্সেল এক্সপোর্ট যোগ করুন
4. এক্সেল আমদানি যোগ করুন
5. আপনার Vue অ্যাপ পরীক্ষা করুন

Vue অ্যাপ

আমরা যে Vue অ্যাপে কাজ করব তা হল কয়েকটি সারাংশ প্যানেল এবং ডেটার টেবিল সহ একটি সরল বিক্রয় ড্যাশবোর্ড। এটি এমন একটি অ্যাপ যা "খারাপ নয়" বিভাগে পড়ে:

যদিও এটি শুধুমাত্র একটি ডেমো, এটি ঠিক সেই ধরনের অ্যাপ যা এন্টারপ্রাইজ ওয়েব ডেভেলপারদের তৈরি করতে হয়। এটিও ঠিক সেই ধরনের অ্যাপ যা আমাদেরকে সাধারণত এক্সেল কার্যকারিতা যোগ করতে বলা হয়, তাই এই নিবন্ধের বাকি অংশের জন্য এটি একটি নিখুঁত উদাহরণ হবে।

এই অ্যাপ্লিকেশনের জন্য কোড এখানে পাওয়া যাবে.

আপনি যদি স্ক্র্যাচ থেকে একটি Vue অ্যাপ্লিকেশন তৈরি করতে চান তবে এই দ্রুত শুরু নির্দেশিকাটি দেখুন।

স্টেজ সেট করার জন্য, ড্যাশবোর্ড হল একটি একক-পৃষ্ঠার অ্যাপ্লিকেশন যা Vue দিয়ে তৈরি। এটি সর্বশেষ এবং সর্বশ্রেষ্ঠ Vue সেরা অনুশীলনগুলি ব্যবহার করে: একক-ফাইল উপাদান এবং একটি Vuex ডেটা স্টোর। এটি তার CSS উপাদান এবং গ্রিড সিস্টেমের জন্য বুটস্ট্র্যাপ ব্যবহার করছে।

বুটস্ট্র্যাপ আগের মতো জনপ্রিয় নয়, কিন্তু বাস্তবে, বুটস্ট্র্যাপ এখনও সর্বত্রই রয়েছে – বিশেষ করে এন্টারপ্রাইজ ওয়েব অ্যাপগুলিতে যেখানে সাধারণত এক্সেল সমর্থন প্রয়োজন হয়৷ আমরা বাজি ধরতে চাই যে প্রচুর নতুন এন্টারপ্রাইজ ওয়েব অ্যাপ এখনও 2030 সালে বুটস্ট্র্যাপ ব্যবহার করবে।

আপনি যদি আপনার স্প্রেডশীট-সক্ষম অ্যাপ্লিকেশানগুলিতে বুলমা বা ট্যাকিয়ন ব্যবহার করতে চান, তাহলে ঠিক এগিয়ে যান! স্প্রেডজেএস তাদের উভয়ের সাথে ভাল কাজ করবে।

Vue অ্যাপ্লিকেশন কাঠামো

চলুন দেখে নেওয়া যাক কিভাবে কোড গঠন করা হয়। আমাদের Vuex স্টোর এবং Vue অ্যাপ্লিকেশন উভয়ই main.js এ সংজ্ঞায়িত করা হয়েছে। আমাদের বেশ কয়েকটি একক-ফাইল Vue উপাদান রয়েছে, সবগুলি উপাদান ফোল্ডারে অবস্থিত।

আপনি যদি আমাদের Vuex স্টোরটি দেখেন তবে আপনি নিম্নলিখিতগুলি দেখতে পাবেন:

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

আমাদের দোকানের প্রারম্ভিক অবস্থা সাম্প্রতিক বিক্রয়ের মান নির্ধারণ করা হয়েছে, আমাদের আমদানি করা ডামি ডেটার একটি সেট৷ আমাদের কাছে এমন একটি ফাংশনও রয়েছে যা সাম্প্রতিক বিক্রয়গুলি পরিবর্তন করা হলে আপডেট করা পরিচালনা করে।

একটি মিনিট অপেক্ষা করুন। যদি আমাদের কাছে শুধুমাত্র এক সেট ডেটা থাকে, তাহলে আমরা কীভাবে তিনটি চার্ট এবং একটি টেবিল তৈরি করছি? কী ঘটছে তা দেখতে, 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 যোগ করা হচ্ছে

মজা শুরু হয় এখানে! আমাদের ড্যাশবোর্ড আছে, কিন্তু আমরা সেই ক্লাঙ্কি পুরানো এইচটিএমএল টেবিলটি মুছে ফেলতে চাই। সুতরাং, আমাদের কিছু পরিবর্তন করতে হবে। আমাদের একটি দুর্দান্ত সূচনা পয়েন্ট রয়েছে, তবে লাইসেন্স ছাড়াই স্প্রেডজেএস ডেভেলপমেন্ট মোডে ব্যবহার করার জন্য আমাদের অবশ্যই স্থানীয়ভাবে আমাদের অ্যাপ চালাতে হবে।

চূড়ান্ত ফলাফল দেখতে আপনি সমাপ্ত কোড ডাউনলোড করতে পারেন।

স্প্রেডজেএস ছাড়াই মূল প্রকল্পটি খোলার মাধ্যমে শুরু করুন। একটি টার্মিনাল খুলুন, যে ডিরেক্টরিতে আপনি সংগ্রহস্থল ক্লোন করেছেন সেখানে নেভিগেট করুন এবং 'npm install' চালান। এটি অ্যাপ্লিকেশন চালানোর জন্য প্রয়োজনীয় নির্ভরতা ইনস্টল করে। নির্ভরতা ইনস্টলেশন শেষ হলে, আপডেট করা অ্যাপটি কার্যকর দেখতে 'npm serve' চালান। আপনি যদি বিশেষভাবে ব্যবহৃত লাইব্রেরিগুলি আমদানি করতে চান তবে আপনি এই কমান্ডটি ব্যবহার করতে পারেন:

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

আমাদের পুরানো অ্যাপটিকে এর নতুন এবং উন্নত সংস্করণে আপগ্রেড করতে আমাদের যে পরিবর্তনগুলি করতে হবে চলুন চলুন। যেহেতু আমরা একটি স্প্রেডশীট দিয়ে আমাদের বিক্রয় টেবিল প্রতিস্থাপন করতে যাচ্ছি, তাই আমরা শীটটিকে আমাদের বিদ্যমান SalesTable.vue কম্পোনেন্টে রাখব, কিন্তু প্রথমে আমাদের পুরানো টেবিল থেকে মুক্তি পেতে হবে। একবার এটি চলে গেলে, আমাদের বিক্রয় টেবিল টেমপ্লেটটি দেখতে এইরকম হবে:

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

টেবিলটি মুছে ফেলার পরে, আমরা আমাদের টেবিল প্যানেল প্রস্তুত করেছি এবং একটি স্প্রেডশীটের জন্য অপেক্ষা করছি, তাই আসুন একটি যোগ করি! একটি SpreadJS শীট যোগ করার পরে, আমাদের টেমপ্লেটটি এইরকম দেখাবে:

 <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-ওয়ার্কশীট উপাদানের সাথে একটি নতুন ওয়ার্কশীট তৈরি করি এবং এটিকে আমাদের কম্পোনেন্টের টেবিলডেটা এবং অটোজেনারেট কলাম বৈশিষ্ট্যের সাথে আবদ্ধ করি। মনে রাখবেন যে টেবিলডেটা ঠিক একই টেবিলডেটা যা আমরা আমাদের প্লেইন HTML টেবিল তৈরি করতে ব্যবহার করি। আমরা আমাদের ডেটা স্প্রেডজেএস-এ রাখতে পারি যেমন- কোনো পরিবর্তনের প্রয়োজন নেই!

অবশেষে, ওয়ার্কশীটের ভিতরে, আমরা কলামগুলিকে সংজ্ঞায়িত করি যা স্প্রেডজেএসকে আমাদের ডেটা কীভাবে প্রদর্শন করতে হয় তা বলে। dataField প্রপার্টি আমাদের বলে যে এই কলামের অন্তর্নিহিত ডেটাসেটের কোন প্রপার্টি প্রদর্শন করা উচিত এবং হেডার টেক্সট SpreadJS কে ব্যবহার করার জন্য একটি সুন্দর ফর্ম্যাট করা কলাম নাম দেয়। প্রতিটি কলামের জন্য বাকি বাইন্ডিংগুলি সোজা। স্প্রেডজেএস ডকুমেন্টেশনে আপনি একটি জিসি-কলামে পাস করতে পারেন এমন সমস্ত কিছুর একটি সম্পূর্ণ তালিকা রয়েছে।

সুতরাং, আমাদের টেমপ্লেটের সাথে, এই সমস্ত কাজ করার জন্য কত কোডের প্রয়োজন হবে? সৌভাগ্যবশত, অনেক কিছু না! এখানে আমাদের 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 উপাদানগুলিকে বিশদভাবে ব্যাখ্যা করে। শুধুমাত্র যে জিনিসগুলি পরিবর্তিত হয়েছে তা হল কয়েকটি আমদানি, কিছু ডেটা বৈশিষ্ট্য এবং কয়েকটি পদ্ধতি। তথ্য বৈশিষ্ট্য পরিচিত দেখা উচিত; আমরা কিছুক্ষণ আগে টেমপ্লেটে তাদের দেখেছি। সেগুলি হল কনফিগারেশন বিকল্প যা আমরা আমাদের স্প্রেডজেএস স্প্রেডশীটের উপাদানগুলির সাথে আবদ্ধ করছি।

workbookInit পদ্ধতি হল একটি কলব্যাক যা SpreadJS কল করে যখন শীটটি আরম্ভ করা হয়। এই পদ্ধতিতে, আমরা আমাদের কম্পোনেন্টে আমাদের শীটজেএস স্প্রেডশিট অবজেক্টকে ইনস্ট্যান্স ভেরিয়েবল হিসাবে সংরক্ষণ করি যাতে প্রয়োজনে আমরা সরাসরি এটির সাথে যোগাযোগ করতে পারি। আমরা যখনই স্প্রেডজেএস উদাহরণে মান পরিবর্তন করা হয় তখন স্বয়ংক্রিয়ভাবে ডেটা আপডেট করার জন্য ValueChanged ইভেন্টের জন্য একটি বাঁধাই ফাংশন যোগ করেছি।

একটি শেষ পরিবর্তন: স্প্রেডশীট শৈলীকে সাহায্য করার জন্য আমরা আমাদের উপাদানকে একটি স্কোপড স্টাইল দিই। আমরা এটি আগে দেখেছিলাম যখন আমরা hostClass কে gc-spread-sheets এলিমেন্টে পাস করি। যেহেতু হোস্টক্লাস 'স্প্রেডশীট' এ সেট করা হয়েছে, তাই আমরা স্প্রেডশীট নামে একটি 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>

আপনি দেখতে পাচ্ছেন, আমাদের বোতামটি এক্সপোর্টশিট নামে একটি ক্লিক হ্যান্ডলারের প্রত্যাশা করছে। আমরা এক মুহূর্তের মধ্যে এটি যোগ করব, কিন্তু প্রথমে, আমরা ফাইল-সেভার নামে একটি NPM প্যাকেজ থেকে একটি ফাংশন আমদানি করব:

 import { saveAs } from 'file-saver';

এর পরে, আমাদের কম্পোনেন্টের মেথড অবজেক্টে এক্সপোর্টশিট যোগ করা যাক:

 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 কল করে এটি অ্যাক্সেস করি। এটি ফাংশনের অন্য কোথাও ব্যবহার করা যেতে পারে যদি আমাদের শীটের সাথে সরাসরি যোগাযোগ করতে হয়।

তারপরে আমরা স্প্রেডজেএস-এর এক্সেলআইও লাইব্রেরি ইনস্ট্যান্টিয়েট করি, আমাদের শীটকে JSON-এ রূপান্তর করি এবং স্প্রেডজেএসকে এটি সংরক্ষণ করতে বলি। ভয়লা ! আমরা আমাদের স্প্রেডশীট-সক্ষম Vue অ্যাপ থেকে একটি এক্সেল ফাইল রপ্তানি করেছি!

মনে রাখবেন যে আমরা শীটের toJSON কলে দুটি সিরিয়ালাইজেশন বিকল্প পাস করছি: বাইন্ডিংসোর্স এবং কলামহেডারসফ্রোজেনরো অন্তর্ভুক্ত করুন। একসাথে, এই বিকল্পগুলি নিশ্চিত করে যে আমরা শীটে আবদ্ধ ডেটা সঠিকভাবে রপ্তানি করা হয়েছে এবং শীটে আমাদের কলাম শিরোনাম রয়েছে। সুতরাং, এক্সপোর্ট করা এক্সেল ফাইলটি দেখলে প্রতিটি কলাম বুঝতে পারবে।

এক্সেল আমদানি যোগ করা হচ্ছে

এর পরে, এক্সেল ফাইলগুলি আমদানি করার ক্ষমতা যুক্ত করার সময় এসেছে৷

আমাদের এক্সপোর্ট বোতামের ঠিক নীচে, আমরা নিম্নলিখিত বিট মার্কআপ যোগ করতে যাচ্ছি:

 <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) }); } }

একটি এক্সেল ফাইল আমদানি করা অনেকটা এটি রপ্তানি করার মতোই, বিপরীত ছাড়া। একটি ফাইল নির্বাচন করার পরে, আমরা ExcelIO কে এটি আমদানি করতে বলি। হয়ে গেলে, এটি জাভাস্ক্রিপ্ট অবজেক্ট হিসাবে একটি কলব্যাক ফাংশনে শীট তথ্য প্রেরণ করে। এর পরে, আমরা আমদানি করা ডেটাকে একটি কাস্টম ফাংশনের মাধ্যমে পাস করি যাতে এটি থেকে আমাদের প্রয়োজনীয় ডেটা বের করে নেওয়া হয় এবং তারপর এটিকে Vuex স্টোরে ফেরত পাঠাই।

সাধারণত, একটি ফাইল আমদানি করা সেই ExcelIO ওপেন মেথডকে কল করার মতো সহজ কিন্তু ওয়ার্কবুক "fromJSON" পদ্ধতি ব্যবহার করে। এই ক্ষেত্রে, আমরা শুধু আমদানি করা ফাইল থেকে ডেটা পার্স করতে চাই এবং স্টোর আপডেট করতে চাই, যা তারপর SpreadJS আপডেট করবে।

আমাদের extractSheetData ফাংশনে, যা আপনি src/util.util.js ফাইলে পাবেন, আপনি দেখতে পাবেন যে আমরা ExcelIO দ্বারা প্রত্যাবর্তিত জাভাস্ক্রিপ্ট অবজেক্ট থেকে ডেটা বের করে নিয়েছি এবং আমাদের 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-এর ইন্টারেক্টিভ স্প্রেডশীটগুলির সাহায্যে, জটিল এন্টারপ্রাইজ জাভাস্ক্রিপ্ট অ্যাপগুলি ঘন্টার মধ্যে তৈরি করা যেতে পারে।

এটি যতটা দুর্দান্ত বলে মনে হতে পারে, আমরা স্প্রেডজেএস যা করতে পারে তার উপরিভাগ খুব কমই স্ক্র্যাচ করেছি। স্প্রেডজেএস আপনার জন্য কী করতে পারে তা আরও ভালভাবে বোঝার জন্য, স্প্রেডজেএস ডেমো দেখুন, যেটিতে স্প্রেডজেএস-এর বিভিন্ন বৈশিষ্ট্যের সম্পূর্ণ ডেমো, ব্যাখ্যা এবং সেই বৈশিষ্ট্যগুলি প্রদর্শনকারী লাইভ কোড অন্তর্ভুক্ত রয়েছে। আপনি যদি আপনার নিজের অ্যাপে স্প্রেডজেএস ব্যবহার করে আরও গভীরে যেতে চান তবে স্প্রেডজেএস ডকুমেন্টেশনে আপনার প্রয়োজনীয় তথ্য রয়েছে।

এই জাভাস্ক্রিপ্ট স্প্রেডশীট উপাদান সম্পর্কে আরও জানুন: