Vue: Bir Kılavuz Kullanarak Excel XLSX'i İçe ve Dışa Aktarma

"Harika görünüyor ama Excel'den içe aktarmayı ekleyebilir misiniz?"

Uzun süredir yazılım geliştiriyorsanız, muhtemelen bu soruyu bir yöneticiden birden fazla kez duymuşsunuzdur. Teknik bilgisi olmayan bir kalabalığa, Excel'in içe/dışa aktarılmasını istemek çok da önemli bir şey gibi gelmiyor. Ne kadar zor olabilir değil mi?

Ancak çoğu zaman bu soru geliştiricilerin kalplerine korku salıyor. Çoğu platformda Excel dosyalarıyla çalışmak çok fazla çalışma gerektirir. Tarihsel olarak bu, internette iki kat doğruydu. Bir web uygulamasında Excel verileriyle çalışmak biraz şu xkcd çizgi romanına benziyor: "Kolay ile neredeyse imkansız arasındaki farkı açıklamak zor olabilir." Excel'den içe aktarma ve Excel'den dışa aktarmayla kendi tarayıcı içi e-tablonuzu oluşturmak, beş yıl sürecek ve çözülmesi bir araştırma ekibine ait bir sorun gibi geliyor.

Bu değişiyor. Artık tamamen işlevsel bir e-tabloyu web uygulamanıza bırakmanıza olanak tanıyan anahtar teslim kitaplıklarımız var. SpreadJS bunlardan biri. Mevcut bir Vue uygulamasını (bir Vuex mağazasını kullanan gerçek dünya uygulaması) nasıl alıp SpreadJS kullanarak nasıl geliştireceğimize bakacağız.

Makalenin geri kalanında HTML, CSS ve JavaScript'i zaten anladığınızı varsayarız. Ayrıca, web kullanıcı arayüzü oluşturmaya yönelik Vue.js aşamalı JavaScript çerçevesine ilişkin çalışma bilgisine sahip olduğunuzu da varsayar. Durum yönetimi için Vuex'i kullandıysanız yardımcı olacaktır, ancak kullanmadıysanız endişelenmeyin. Sezgisel ve anlaşılması kolaydır ve eğer Vue'yu kullandıysanız, yalnızca kodu okuyarak neler olduğunu anlayabilirsiniz.

Bu blogda, aşağıdaki adımları izleyerek Excel İçe Aktarma ve Dışa Aktarmayı Vue Uygulamanıza nasıl ekleyeceğinizi ele alacağız:

1. Vue Uygulama Yapısı
2. Vue Uygulamanıza SpreadJS'yi Ekleyin
3. Excel Dışa Aktarma Ekle
4. Excel İçe Aktarma Ekle
5. Vue Uygulamanızı Test Edin

Vue Uygulaması

Üzerinde çalışacağımız Vue uygulaması, birkaç özet paneli ve bir veri tablosu içeren basit bir satış kontrol panelidir. Bu, "fena değil" kategorisine giren türden bir uygulamadır:

Her ne kadar sadece bir demo olsa da, tam olarak kurumsal web geliştiricilerinin oluşturması gereken türden bir uygulamadır. Aynı zamanda bizden genellikle Excel işlevselliği eklememiz istenen türden bir uygulama olduğundan bu makalenin geri kalanı için mükemmel bir örnek olacaktır.

Bu uygulamanın kodunu burada bulabilirsiniz.

Sıfırdan bir Vue uygulamasının nasıl oluşturulacağını görmek istiyorsanız bu hızlı başlangıç kılavuzuna göz atın.

Aşamayı ayarlamak için kontrol paneli, Vue ile yapılmış tek sayfalık bir uygulamadır. En yeni ve en iyi Vue en iyi uygulamalarını kullanır: tek dosyalı bileşenler ve bir Vuex veri deposu. Ayrıca CSS bileşenleri ve ızgara sistemi için Bootstrap kullanıyor.

Bootstrap eskisi kadar popüler değil ama gerçekte Bootstrap hala her yerde; özellikle de Excel desteğine genellikle ihtiyaç duyulan kurumsal web uygulamalarında. Pek çok yeni kurumsal web uygulamasının 2030'da hala Bootstrap kullanacağına bahse gireriz.

E-tablo özellikli uygulamalarınızda Bulma veya Tachyon'ları kullanmayı tercih ediyorsanız, hemen devam edin! SpreadJS her ikisiyle de iyi çalışacaktır.

Vue Uygulama Yapısı

Kodun nasıl yapılandırıldığına bir göz atalım. Hem Vuex mağazamız hem de Vue uygulamamız main.js'de tanımlanmıştır. Tamamı bileşenler klasöründe bulunan birkaç tek dosyalı Vue bileşenimiz var.

Vuex mağazamıza bakarsanız aşağıdakileri göreceksiniz:

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

Mağazamızın başlangıç durumu, içe aktardığımız bir dizi sahte veri olan sonSales değerine ayarlanmıştır. Ayrıca, güncel satışları değiştirildiğinde güncellemeyi sağlayan bir fonksiyonumuz da var.

Bir dakika bekle. Yalnızca tek bir veri setimiz varsa, üç grafiği ve bir tabloyu nasıl oluşturacağız? Neler olduğunu görmek için Dashboard.vue bileşenini açın. İçinde, Vuex mağazasındaki verilere dayanarak çeşitli hesaplanmış özelliklerin oluşturulduğunu göreceksiniz:

 <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>

Şimdi daha mantıklı! Tek veri seti, kontrol panelimiz için tüm sayıları ve tabloları oluşturmak için ihtiyacımız olan her şeyi içerir. Veriler reaktif bir Vuex mağazasında olduğundan, veriler güncellenirse tüm kontrol paneli panelleri otomatik olarak güncellenecektir.

Bu tepkisellik bir sonraki bölümde sıkıcı eski statik tablomuzu düzenlenebilir bir elektronik tabloyla değiştirdiğimizde kullanışlı olacaktır.

Vue Uygulamanıza SpreadJS Ekleme

İşte eğlencenin başladığı yer! Kontrol panelimiz var ancak o hantal eski HTML tablosunu ortadan kaldırmak istiyoruz. Bu yüzden bazı şeyleri biraz değiştirmemiz gerekecek. Harika bir başlangıç noktamız var ancak SpreadJS'yi geliştirme modunda lisans olmadan kullanabilmek için uygulamamızı yerel olarak çalıştırmalıyız.

Nihai sonucu görmek için bitmiş kodu indirebilirsiniz .

Orijinal projeyi SpreadJS olmadan açarak başlayın. Bir terminal açın, depoyu klonladığınız dizine gidin ve 'npm install' komutunu çalıştırın. Bu, uygulamayı çalıştırmak için gereken bağımlılıkları yükler. Bağımlılık kurulumu tamamlandığında, güncellenen uygulamayı çalışırken görmek için 'npm serve' komutunu çalıştırın. Kullanılan kütüphaneleri özel olarak içe aktarmak istiyorsanız bu komutu kullanabilirsiniz:

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

Eski uygulamamızı yeni ve geliştirilmiş sürümüne yükseltmek için yapmamız gereken değişiklikleri gözden geçirelim. Satış tablomuzu bir e-tablo ile değiştireceğimiz için sayfayı mevcut SalesTable.vue bileşenimize koyacağız ancak önce eski tablomuzdan kurtulmamız gerekecek. Bittiğinde SalesTable şablonumuz şöyle görünecek:

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

Tabloyu çıkardıktan sonra masa panelimizi hazırladık ve bir e-tablo bekliyoruz, hadi bir tane ekleyelim! SpreadJS sayfasını ekledikten sonra şablonumuz şöyle görünecek:

 <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>

Anlaşılması gereken çok şey var, o yüzden neler olduğunu anlamak için bunların üzerinden geçelim.

İlk olarak, gc-spread-sheets öğesini kullanarak ve bunu bileşenimizin iki özelliğine bağlayarak bir elektronik tablo oluştururuz: hostClass ve workbookInit.

Elektronik tablonun içinde gc-worksheet öğesiyle yeni bir çalışma sayfası oluşturuyoruz ve bunu bileşenimizin tableData ve autoGenerateColumns özelliklerine bağlıyoruz. TableData'nın, düz HTML tablomuzu oluşturmak için kullandığımız tableData ile tamamen aynı olduğunu unutmayın. Verilerimizi hiçbir değişiklik gerektirmeden olduğu gibi SpreadJS'ye koyabiliriz!

Son olarak çalışma sayfasının içinde SpreadJS'ye verilerimizi nasıl görüntüleyeceğini söyleyen sütunları tanımlıyoruz. dataField özelliği bize bu sütunun temel veri kümesinin hangi özelliğini göstermesi gerektiğini söyler ve başlıkText, SpreadJS'ye kullanılacak güzel biçimlendirilmiş bir sütun adı verir. Her sütun için bağlamaların geri kalanı basittir. SpreadJS belgeleri, bir gc sütununa iletebileceğiniz her şeyin tam bir listesini içerir.

Peki, şablonumuz hazır olduğunda tüm bunların işe yaraması için ne kadar koda ihtiyaç duyulacak? Neyse ki pek bir şey yok! İşte SalesTable.vue bileşenimizin yeni komut dosyası kodu:

 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'nun basitliği nedeniyle bu işlemi gerçekleştirmek için çok az kod gerekir. Burada aşina olmadığınız bir şey varsa, Vue belgelerinin 'Ayrıntılı Bileşenler' bölümünde Vue bileşenleri ayrıntılı olarak açıklanmaktadır. Değişen tek şey birkaç içe aktarma, bazı veri özellikleri ve birkaç yöntemdir. Veri özellikleri tanıdık gelmelidir; bunları az önce şablonda gördük. Bunlar, SpreadJS e-tablomuzdaki bileşenlere bağladığımız yapılandırma seçenekleridir.

WorkbookInit yöntemi, sayfa başlatıldığında SpreadJS'nin çağırdığı bir geri çağırmadır. Bu yöntemde SheetJS elektronik tablo nesnemizi bileşenimize örnek değişken olarak kaydediyoruz, böylece gerekirse onunla doğrudan etkileşim kurabiliyoruz. Ayrıca, SpreadJS örneğinde değerler değiştiğinde verileri otomatik olarak güncellemek için ValueChanged olayına bir bağlama işlevi ekledik.

Son bir değişiklik: Elektronik tablo stilinin kendisine yardımcı olması için bileşenimize kapsamlı bir stil veriyoruz. Bunu daha önce hostClass'ı gc-spread-sheets öğesine aktardığımızda görmüştük. HostClass 'elektronik tablo' olarak ayarlandığından, elektronik tablo adında bir CSS sınıfı oluşturacağız:

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

Bu noktada başka bir değişiklik yapmazsak ve Dashboard’umuzu yüklersek aşağıdaki gibi görünecektir:

Ama durun, dahası da var!

Veri setinde herhangi bir değişiklik yapmadan tablo verilerimizi e-tabloya nasıl aktardığımızı hatırlıyor musunuz? Artık verilerimiz bir e-tabloda olduğuna göre onu düzenleyebiliriz.

6 numaralı satışın değerini 35.000 $'dan 3.500 $'a değiştirirsek ne olur? Sayfaya girip değeri düzenlersek şuna benzeyen bir kontrol paneli elde ederiz:

Vay! Ne oldu?

SpreadJS sayfasını güncelledik ve Vuex mağazamız otomatik olarak güncellendi.

Görünüşe göre Angela muhteşem bir satış ayından vasat bir satış ayına geçti. Bunun için özür dilerim Angela!

Artık bir yöneticinin memnun olacağı gelişmiş bir kontrol panelimiz var. Verileri değiştirebilir ve kontrol paneli güncellemesini gözlerinin önünde izleyebilirler, ancak Excel dosyalarını içe ve dışa aktarma özelliğini ekleyerek daha da iyisini yapabiliriz. Daha sonra bunu nasıl yapacağımızı öğreneceğiz.

Excel Dışa Aktarma Ekleme

Sayfamıza Excel dışa aktarımını eklemek kolaydır. Öncelikle kontrol panelimize bir dışa aktarma düğmesi ekleyelim. Bunu, SalesTable.vue dosyasındaki tablo panelimizin alt kısmına, gc-spread-sheets kapanış etiketinin hemen sonrasına yerleştireceğiz:

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

Gördüğünüz gibi butonumuz, ExportSheet adında bir tıklama işleyicisi bekliyor. Birazdan ekleyeceğiz, ancak önce NPM paketinden file-saver adlı bir işlevi içe aktaracağız:

 import { saveAs } from 'file-saver';

Sonra, bileşenimizin metodlar nesnesine importSheet'i ekleyelim:

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

Kodun yaptığı şu: Öncelikle Satış Veri Sayfamıza bir referans alıyoruz. Elektronik tablomuzdaki tek sayfa olduğundan, 0 dizininde bulunur ve ona getSheet'i çağırarak erişiriz. Sayfayla doğrudan etkileşim kurmamız gerekirse, bu işlevin başka bir yerinde kullanılabilir.

Daha sonra SpreadJS'in ExcelIO kütüphanesini başlatıyoruz, sayfamızı JSON'a dönüştürüyoruz ve SpreadJS'den onu kaydetmesini istiyoruz. İşte! Elektronik tablo özellikli Vue uygulamamızdan bir Excel dosyasını dışa aktardık!

Sayfanın toJSON çağrısına iki serileştirme seçeneği aktardığımızı unutmayın: includeBindingSource ve ColumnHeadersAsFrozenRows. Bu seçenekler birlikte sayfaya bağladığımız verilerin doğru şekilde dışa aktarılmasını ve sayfanın sütun başlıklarımızı içermesini sağlar. Yani, dışa aktarılan Excel dosyasına bakıldığında her sütun anlaşılacaktır.

Excel İçe Aktarma Ekleme

Daha sonra, Excel dosyalarını içe aktarma özelliğini eklemenin zamanı geldi.

Dışa aktarma düğmemizin hemen altına aşağıdaki işaretleme parçasını ekleyeceğiz:

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

Gördüğünüz gibi standart bir HTML dosya seçici kullanacağız ve bir dosya seçildiğinde fileChange adlı bir bileşen yöntemini tetikleyeceğiz.

Artık şablonu eklediğimize göre, değişiklik eylemcisini bileşenimizin metodlar nesnesine ekleyelim:

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

Bir Excel dosyasını içe aktarmak, tersi hariç, onu dışa aktarmayla hemen hemen aynıdır. Bir dosya seçildikten sonra ExcelIO'dan onu içe aktarmasını istiyoruz. İşlem tamamlandığında sayfa bilgilerini bir JavaScript nesnesi olarak geri çağırma işlevine aktarır. Daha sonra, ihtiyaç duyduğumuz verileri çıkarmak için içe aktarılan verileri özel bir işlevden geçiriyoruz ve ardından Vuex mağazasına geri gönderiyoruz.

Genellikle bir dosyayı içe aktarmak, ExcelIO açık yöntemini çağırmak ancak çalışma kitabının "fromJSON" yöntemini kullanmak kadar basittir. Bu durumda, yalnızca içe aktarılan dosyadaki verileri ayrıştırmak ve mağazayı güncellemek istiyoruz, bu da daha sonra SpreadJS'yi güncelleyecektir.

Src/util.util.js dosyasında bulacağınız extractSheetData işlevimizde, ExcelIO tarafından döndürülen JavaScript nesnesinden veri çektiğimizi ve onu Vuex'teki verinin şekline uyacak şekilde yeniden yapılandırdığımızı göreceksiniz. mağaza.

İçe aktarma işlevimiz, içe aktarılan sayfadaki verilerin orijinal veri setimizle aynı sütunlara sahip olacağını varsayar. Birisi bu gereksinimi karşılamayan bir e-tablo yüklerse uygulamamız bunu gerçekleştiremez. Bu, çoğu iş kolu uygulamasında kabul edilebilir bir sınırlamadır. Kontrol panelimiz belirli bir veri türünü görüntüleyecek şekilde tasarlandığından, kullanıcılardan uygulamanın beklediği biçimde veri sağlamalarını istemek mantıklı olacaktır.

Veri çıkarma işlemi tamamlandığında Vuex mağazasında commit'i çağırır ve güncellenmiş satış işlemi verilerini göndeririz. SpreadJS sayfası ve kontrol paneli panelleri daha sonra yeni verileri yansıtacak şekilde kendilerini günceller. Aslında, içe aktarma için değiştirilen bir değere karşı farklı bir mutasyon işlevi kullanabiliriz, böylece bunu main.js dosyasına "IMPORT_RECENT_SALES" olarak ekleyebiliriz:

 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 Uygulamanızı Test Etme

Artık kodu gördüğünüze göre, Vue uygulamamızda Excel'i içe ve dışa aktarmayı test edelim.

'Excel'e Aktar' düğmesini tıklayarak başlayın. Web tarayıcınız daha sonra kontrol panelimizin elektronik tablosunda gördüğümüz tüm verileri içeren bir Excel elektronik tablosunu indirecektir.

Sayfayı Excel'de açın ve birkaç satır veri ekleyin. Yeni ülkeleri veya yeni satış elemanlarını kullanmanızda bir sakınca yoktur; tüm kontrol paneli bileşenlerimiz bunun üstesinden gelebilir. Sütun sırasını veya adlarını değiştirmemeye dikkat edin. İşiniz bittiğinde Son Satışlar panelinin altındaki 'Dosya Seç' düğmesini tıklayın. Az önce düzenlediğiniz Excel dosyasını seçin.

Dosyayı seçtiğinizde güncellenen kontrol paneli bileşenlerini göreceksiniz.

Çözüm

Yapılmıştı! Sıradan bir Vue kontrol paneli uygulamasını aldık ve ona canlı bir elektronik tablo ekledik. Artık sayfadaki verileri düzenleyebilir ve kontrol paneli güncellememizin tamamını izleyebiliriz. Geliştirilmiş kontrol panelimiz ayrıca Excel dosyalarını içe ve dışa aktarabilir.

Vue, Vuex ve SpreadJS birbirini iyi tamamlıyor. Vue'nun kolay şablon oluşturma ve veri bağlama özelliği, Vuex'in reaktif veri deposu ve SpreadJS'nin etkileşimli elektronik tabloları ile karmaşık kurumsal JavaScript uygulamaları saatler içinde oluşturulabilir.

Her ne kadar harika görünse de, SpreadJS'in yapabileceklerinin henüz yüzeyini çizmiş durumdayız. SpreadJS'in sizin için neler yapabileceğini daha iyi anlamak için SpreadJS'nin farklı özelliklerinin tam demolarını, açıklamaları ve bu özellikleri gösteren canlı kodu içeren SpreadJS Demolarına bakın. SpreadJS'yi kendi uygulamalarınızda kullanmaya daha derinlemesine dalmak istiyorsanız, SpreadJS Belgeleri ihtiyacınız olan bilgileri içerir.

Bu JavaScript Elektronik Tablo Bileşeni hakkında daha fazla bilgi edinin: