Javascript Excel Import

SERDAL AYDOĞMUŞ 27/05/2024

0 154 1 dakika okuma süresi

Excel dosyalarını okumak ve değiştirmek için bir yol sağlayan SheetJS modülünü kullanarak Excel verilerini içe aktarabilirsiniz.

Excel dosya verilerini bir JavaScript uygulamasına aktarmak için SheetJS’nin nasıl kullanılacağına ilişkin bir örneği burada bulabilirsiniz:

SheetJS kitaplığını npm (Node Package Manager) kullanarak kuruyoruz;

npm install xlsx

giriş sayfamızı ve içe aktarmayı tetiklemek için sayfamızı oluşturuyoruz. index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Import Excel Data</title>
</head>
<body>
    <input type="file" id="input" />
    <button onclick="importExcel()">Import</button>
    <table id="output"></table>

    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

import işlemi için bir javascript fonksiyonu oluşturuyoruz. index.js

function importExcel() {
    const input = document.getElementById('input');
    const file = input.files[0];

    const reader = new FileReader();
    reader.readAsArrayBuffer(file);

    reader.onload = function() {
        const data = new Uint8Array(reader.result);
        const workbook = XLSX.read(data, {type: 'array'});

        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const rows = XLSX.utils.sheet_to_json(sheet, {header: 1});

        const output = document.getElementById('output');
        output.innerHTML = '';

        for (let i = 0; i < rows.length; i++) {
            const row = document.createElement('tr');
            for (let j = 0; j < rows[i].length; j++) {
                const cell = document.createElement('td');
                cell.textContent = rows[i][j];
                row.appendChild(cell);
            }
            output.appendChild(row);
        }
    };
}

Bu örnekte, önce giriş alanından seçilen dosyayı alıyoruz, ardından dosyayı bir dizi arabelleği olarak okumak için FileReader API’sini kullanıyoruz. Ardından dizi arabelleğini, bir çalışma kitabı nesnesi döndüren SheetJS kitaplığının XLSX.read işlevine iletiyoruz. İlk sayfayı çalışma kitabından çıkartıyoruz ve XLSX.utils.sheet_to_json işlevini kullanarak bir JSON nesnesine dönüştürüyoruz.

Son olarak, yeni bir HTML tablo öğesi oluşturuyoruz ve onu Excel dosyasındaki verilerle dolduruyoruz. JSON nesnesindeki her satır bir HTML tr öğesine ve satırdaki her hücre bir td öğesine dönüştürülür.

Not: Bu kod, istemci tarafı JavaScript içindir ve sunucu tarafında Node.js kullanıyorsanız farklı bir yaklaşım kullanmanız gerekebilir.

Kolay gelsin.

Serdal Aydoğmuş
https://www.saydogmus.com/

Etiketler