JavaScript ile Exel dosyası nasıl okunur?
JavaScript ile Exel dosyası okumanın birden çok yöntemi olabilir. Fakat bilinmelidir ki JavaScript bu yazının yazıldığı tarihte maalesef ki doğrudan Exel dosyasını okuyamamaktadır. Exel dosyasını okumak için farklı bazı kütüphalere ihtiyaç duymaktayız. Bunlar `xlsx` ve `exceljs` gibi oldukça popüler olan bazı Exel okuma kütüphanleridir.
Biz bugünkü yazımızda `xlsx` kütüphanesini kullanarak nasıl tarayıcı ortamında Exel dosyasını okuyabiliriz bunu nasıl JSON veya JS nesnesi formatına dönüştürebiliriz sorusuna cevap arayacağız.
İlk olarak projemizin içerisine CDN linki üzerinden XLSX paketini alıyoruz.
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.3/xlsx.full.min.js"></script>Gerekli olan kütüphanemizi dahil ettiğimize göre artık işlemlere başlıyabiliriz. İlk olarak erişim sağlamak istediğimiz Exel dosyasına erişim sağlıyoruz.
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(event.target)
let file = formData.get('file')
console.log(file)
})
/* Dosyayı nasıl seçtiğinizin bir önemi yok.
İster aşağıdaki gibi form yapısının submit olayı ile isterse farklı bir şekilde erişim sağlayın.
Eğer tarayıcının "console" alanında çıktı olarak şu yazım tarzını görebiliyorsanız
"File {name: 'fdsafdsa.xlsx', lastModified: 1715168935544, lastModifiedDate: Wed May 08 2024 14:48:55 GMT+0300 (GMT+03:00), webkitRelativePath: '', size: 8472, …}"
herhangi bir sıkıntı yok demektedir */
Dosyanızı binbir farklı şekilde erişim sağlayabilirsiniz. Önemli olan çıktının yukarıdaki gibi console.log() yapıldığında yukarıdaki şekilde çıktı vermesidir. Daha sonrasında ise işlemlerimize dosyayı "Binary" şeklinde okuyoruz. Dosya okunduğunda ise onload olayı gerçekleşmiş oluyor ve içerisindeki olayı "event" parametresi ile yakalıyoruz.
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(event.target)
let file = formData.get('file')
// JS'in dosya okuma yapısı
let fileReader = new FileReader();
fileReader.readAsBinaryString(data)
// Dosya yüklendiğinde olayı yakalıyoruz.
fileReader.onload = (event)=>{
// Okunan değeri event.target.result içerisinden alıyoruz.
let newData = event.target.result;
// XLSX ile binary okuma işlemi yapıyoruz.
let workbook = XLSX.read(newData, {type:"binary"});
// Okunan değeri döngü ile istediğimiz formata getiriyoruz.
workbook.SheetNames.forEach(sheet=>{
let rowObject = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);
console.log(rowObject)
console.log(JSON.stringify(rowObject))
})
}
})
Ve çıktı olarak ekrana basılan rowObject nesnesi bir bir JS nesnesi, bir altındaki JSON.stringify(rowObject) değeri ise bir JSON nesnesi olmuş olacaktır. Karmaşık gibi görüldüğüne bakmayın aslında oldukça basittir. Sadece yukarıdaki adımları dikkati bir şekilde gerçeleştirin.