Bu kısa ve basit kılavuzu izleyerek verilerinizi kolaylıkla dönüştürün.

Bir geliştirici olarak, üzerinde çalışıyor olabileceğiniz farklı projelerde her gün yeni zorluklarla karşılaşmaya açıksınız. Web uygulamaları bazen iş veya teknik gereksinimlere bağlı olarak farklı hedeflere ulaşmak için bazı ekstra görevleri yerine getirmek zorunda kalabilir.

Bir API'den veri toplamanız ve bunu PDF, XML, DOCX veya XLSX gibi farklı bir biçimde işlemeniz gerekebilir.

Bu kılavuzda, bir API yanıtından alınan JSON verilerini Angular uygulamanızda iyi organize edilmiş bir Excel elektronik tablosuna nasıl dönüştüreceğinizi öğreneceksiniz.

XLSX Kitaplığı Nedir?

Xlsx kitaplığı, JSON verilerini bir API yanıtından düzgün bir Excel elektronik tablosuna dönüştürmek isteyen Angular geliştiricileri için etkili bir kaynaktır. Bu modülün kullanımı sayesinde, geliştiriciler JSON verilerini hızlı bir şekilde indirebilir ve değiştirebilir.

Ekibiniz için raporlar oluşturmak veya verileri yeni yollarla sunmak için Xlsx kitaplığını kullanabilirsiniz. JavaScript uygulamalarında verilerinizi yönetmenin hızlı ve kolay bir yolunu istiyorsanız, bu iyi bir seçenektir.

instagram viewer

Açısal Bir Uygulamayla XLSX Kitaplığını Yapılandırma

Angular uygulamanızda Xlsx kitaplığına başlamadan önce, makinenizde bir Node.js ve Angular geliştirme ortamının kurulu olması önemlidir. Node.js yüklendiğinde, Angular çalıştırılarak kurulumu kolaydır npm kurulum -g @açısal/cli bir terminalde.

Çalıştırarak yeni bir Açısal proje oluşturun yeni [açısal-uygulama-adınız] terminalde. Ardından, aşağıda görüldüğü gibi proje dizinine gidin:

Çalıştırarak yerel bir geliştirme sunucusu da başlatabilirsiniz. servis --oAngular uygulamanızı ve onda yapılan değişiklikleri tarayıcıda canlı olarak görüntülemenizi sağlar.

Bir Açısal uygulama kurduktan sonra, Xlsx Kitaplığını yüklemek, basitçe çalıştırarak tamamlayabileceğiniz basit bir işlemdir. npm xlsx'i kur -- kaydet. Bu komut, Xlsx kitaplığını kullanmak için gereken bağımlılıkları kuracaktır.

JSON Verilerini Açısal Olarak XLSX Formatına Dönüştürme

Angular CLI ile, çalıştırarak yeni bir servis oluşturabilirsiniz. hizmet oluşturma [hizmet adı] terminalde komut. Örneğin bu durumda ihtiyacınız olan Excel hizmetini kullanarak oluşturabilirsiniz. hizmet oluşturma ExcelService.

Bu üretmek komut hizmet dosyasını oluşturacaktır: ExcelService.hizmet.ts, içinde kaynak/uygulama projenin dizini. Dosya varsayılan olarak şöyle görünür:

içe aktarmak { Enjekte edilebilir } itibaren"@açısal/çekirdek"; 
@enjekte edilebilir({ Sağlanan: 'kök' }) 
ihracatsınıfExcelHizmet Hizmeti{
inşaatçı() { } 
}

Bu Excel Hizmeti dosyası, verileri Excel biçimine dışa aktarma işlevini işleyecektir. güncelle ExcelService.service.ts dosyası aşağıdaki kod gibi görünecek:

içe aktarmak { Enjekte edilebilir } itibaren"@açısal/çekirdek"; 
içe aktarmak * gibi XLSX itibaren'xlsx'; 
sabit EXCEL_EXTENSION = ".xlsx"; //excel dosya uzantısı


@enjekte edilebilir({ Sağlanan: 'kök' }) 


ihracatsınıfExcelHizmet Hizmeti{ 
inşaatçı () { }


halkexportToExcel(öğe: herhangi biri, dosyaAdı: dize): geçersiz{
// çalışma kitabı oluştur ve çalışma sayfasını ekle
sabit ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (öğe);
sabit çalışma kitabı: XLSX.WorkBook = XLSX.utils.book_new(); 
// Dosyaya kaydet
 XLSX.utils.book_append_sheet (çalışma kitabı, ws, "Sayfa1");
 XLSX.writeFile (çalışma kitabı, ${fileName}${EXCEL_EXTENSION}); 
 }
}

Yukarıdaki kodda, Xlsx kütüphane ve sabit bir değişken oluşturmak, EXCEL_EXTENSION Excel dosya uzantısını saklamak için.

bu exportToExcel yöntem iki parametre kabul eder: eleman Ve dosya adı. element parametresi, Excel dosyasına aktarılacak verileri temsil ederken, dosya adı parametre Excel dosyasının adıdır.

Verileri Excel dosyasına aktarmak için, kullanarak bir çalışma sayfası oluşturun. json_to_sheet Xlsx kitaplığının yöntemi. Ayrıca kitaplığı kullanarak bir çalışma kitabı oluşturun. kitap_yeni yöntem.

Ardından, çalışma sayfasını aşağıdakilerle çalışma kitabına ekleyin: kitap_ek_sayfası yöntemini kullanarak bir dosyaya kaydedin ve dosya yaz.

Daha önce, JSON verilerini indirme ve bir Excel sayfasına dönüştürme sürecini kolaylaştırmak için bir Excel hizmeti oluşturdunuz. Bu hizmeti kullanmak için yapmanız gerekenler ilgili Açısal bileşeni oluşturun ve hizmet dosyasını içine aktarın.

içe aktarmak { Excel Hizmeti } itibaren'./excel.hizmet';

Ardından, bileşenin yapıcısına şu şekilde enjekte etmeniz gerekir:

inşaatçı(özel excelService: ExcelService) { 
... 
}

O zaman işlevi uygulamaya devam edebilirsiniz (ihracatExcel) nerede kullanacağınız exportToExcel JSON'u Excel'e aktarma yöntemi. Aşağıdaki kod bunun nasıl yapılacağını gösterir.

dışa aktarmaExcel(): geçersiz { 
sabit fileToExport = Bu.apiJsonResponseData.map((öğeler: herhangi) => { 
geri dönmek {
"Kullanıcı kimliği": öğeler?.userId,
"İD": öğeler?.id,
"Başlık": öğeler?.başlık,
"Vücut": öğeler?.vücut
 } 
 });
Bu.excel Hizmeti.exportToExcel(
 fileToExport,
'ExcelDosyanız-' + yeniTarih().getTime() + ".xlsx"
 );
}

Yukarıdaki kodda, ihracatExcel çağırma yöntemi exportToExcel yöntemi Excel Hizmeti. yeni değişken, fileToExport, dışa aktarılacak verileri depolar. bu apiJsonResponseData dizi, API yanıtından elde edilen JSON verilerini içerir.

Daha sonra, exportToExcel yöntemi excelHizmet alır Dosya Dışa Aktarma ve tercih ettiğiniz dosya adı. Benzersiz olduğundan emin olmak için geçerli zaman damgasını dosya adına nasıl ekleyebileceğinize dikkat edin. Bu yöntem, JSON verilerini dönüştürecek ve daha sonra Excel'de önizleyebileceğiniz bir XLSX dosyasına aktaracaktır.

Bu işlev artık Angular uygulamanızın herhangi bir bölümünde kullanılabilir ve onu bir olay işleyicisi olarak kolayca ekleyebilirsiniz. tıklamak olay veya gereksinimlerinize göre başka herhangi bir uygun şekilde kullanın.

Aşağıdaki resimde bu işlevin örnek bir kullanımını görebilirsiniz. Harici bir API'den gelen JSON verileri, bir düğmeyle sayfada işlenir. Verileri Excel'e Aktar:

tıkladığınızda Verileri Excel'e Aktar düğmesine bastığınızda, tarayıcınız Excel dosyasını indirecektir. Sen ne zaman XLSX dosyasını açın, çıktı elektronik tablo dosyası şöyle görünür:

Xlsx kitaplığı, JSON'u Excel biçimine dönüştürmekten çok daha fazlasını yapabilir. Sağlam bir kitaplık sunar ve iş hayatında karşılaşabileceğiniz çeşitli dosya biçimlerini destekler. Kontrol et Xlsx kitaplığının npm üzerindeki belgeleri hakkında daha fazla bilgi edinmek için.

Açısal Olarak JSON'dan Excel Elektronik Tablolarına Veri Dönüştürme

Web uygulamanızda Excel elektronik tablolarını kolayca değiştirmek için Xlsx kitaplığını kullanabilirsiniz. Burada gerçekleştirdiğiniz adımlar, JSON verilerini bir API'den iyi organize edilmiş bir Excel elektronik tablosuna dönüştürmenize olanak tanır. Ayrıca kitaplıktaki diğer işlevleri kullanarak Excel verilerini tekrar JSON'a dönüştürebilirsiniz.

Bu kitaplığı kullanmanın iyi bir yolu, bir API'den haftalık veya aylık raporlar oluşturan ve bunları Excel verileri olarak düzenleyen bir uygulama oluşturmaktır.