ExcelデータをWebページにインポートする方法

jExcelを使用してExcelデータをページに読み込む

以下の手順を使用すると、jExcelライブラリを利用してExcelファイルのデータをHTMLページに表示できます。

必要なライブラリの準備

  • jexcel.js および jsuites.js：jExcelの主要なライブラリファイル
  • xlsx.js および jszip.js：Excelファイルの読み込みに必要

HTML構造

<html>
<head>
    <meta charset="utf-8" />
    <title>Excelデータの表示</title>
    <link href="css/jexcel.css" rel="stylesheet" />
    <link href="css/jsuites.css" rel="stylesheet" />
    <script src="js/jexcel.js"></script>
    <script src="js/jsuites.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>
    <script src="https://bossanova.uk/jspreadsheet/v3/xlsx.js"></script>
</head>
<body>
    <form id="form1">
        <div id="spreadsheet1"></div>
    </form>
</body>
</html>

Excelファイルからデータを読み込み

指定したExcelファイルを読み込み、データをページに表示します。

document.addEventListener("DOMContentLoaded", function () {
    jexcel.fromSpreadsheet('/temp/sample.xlsx', function (result) {
        if (!result || !result.length) {
            console.error('データの読み込みに失敗しました');
        } else {
            if (result.length === 1) {
                jspreadsheet(document.getElementById('spreadsheet1'), result[0]);
            } else {
                jexcel.createTabs(document.getElementById('spreadsheet1'), result);
            }
        }
    });
});

ファイル選択によるデータの動的読み込み

ユーザーがアップロードしたExcelファイルを読み込み、データを即座に表示します。

HTMLの構成

<input type="file" id="fileInput" hidden />
<label for="fileInput" class="custom-button">ファイルを選択</label>
<div id="spreadsheet2"></div>

JavaScriptの実装

document.getElementById('fileInput').addEventListener('change', function (e) {
    const file = e.target.files[0];
    const validTypes = ['xlsx', 'xls'];

    if (!file) {
        alert('ファイルが選択されていません');
        return;
    }

    const fileType = file.name.split('.').pop().toLowerCase();
    if (!validTypes.includes(fileType)) {
        alert('Excelファイル（.xlsx または .xls）のみ選択可能です');
        return;
    }

    const reader = new FileReader();
    reader.onload = function (event) {
        const data = event.target.result;
        const workbook = XLS.read(data, { type: 'binary' });
        const sheetNames = workbook.SheetNames;
        const jsonData = [];

        sheetNames.forEach(function (sheetName) {
            const sheet = workbook.Sheets[sheetName];
            const json = XLS.utils.sheet_to_json(sheet);
            jsonData.push(...json);
        });

        jspreadsheet(document.getElementById('spreadsheet2'), {
            data: jsonData,
            columns: [
                { type: 'text', width: 100 },
                { type: 'text', width: 120 },
                { type: 'text', width: 120 },
                { type: 'text', width: 120 },
                { type: 'text', width: 120 },
                { type: 'text', width: 120 },
                { type: 'text', width: 120 },
                { type: 'text', width: 120 },
                { type: 'text', width: 120 }
            ]
        });
    };

    reader.readAsBinaryString(file);
});

スタイルのカスタマイズ

ボタンの見た目をカスタマイズして、より直感的なUIを提供します。

.custom-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #009688;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    margin: 10px 0;
}

タグ: jExcel XLSX.js JSZip Excelデータ処理 javascript

5月18日 18:59 投稿

ホットタグ

©2026 異端開発室