ExcelをJavaScriptにインポートする方法-フロントエンドQ&A-php.cn

ExcelをJavaScriptにインポートする方法

PHPz

リリース： 2023-04-24 09:19:25

オリジナル

2097 人が閲覧しました

Excel はデータ処理を行うときに非常によく使用されるツールですが、通常はコンピューター上でのみ使用できます。 WebページでExcelデータを利用・表示するには、ExcelファイルをJavaScriptにインポートして操作・表示することができます。この記事ではExcelをJavaScriptにインポートする方法を紹介します。

1. Excel のデータ型

まず、Excel のデータ型を理解する必要があります。 Excel には次のデータ型があります:

ブール値: TRUE と FALSE (1 と 0 も使用可能)。
値: 小数や負の数を含む任意の数値。
日付と時刻: Excel は特定の形式を使用して日付と時刻の情報を表示します。
文字列: 任意のテキスト。数字や特殊文字を含めることができます。

2. Excel ファイルを JSON 形式に変換する

Excel テーブルを JavaScript にインポートする最も一般的な方法は、JavaScript でテーブルを JSON 形式に変換することです。以下は Excel テーブルの例です:

#名前年齢職業##ジョンメアリーマイクリサ上記の表を JSON 形式に変換すると、コードは次のようになります:


25	エンジニア
30	先生
35	弁護士
40	Doctor

[
  {"姓名": "John", "年龄": 25, "职业": "工程师"},
  {"姓名": "Mary", "年龄": 30, "职业": "教师"},
  {"姓名": "Mike", "年龄": 35, "职业": "律师"},
  {"姓名": "Lisa", "年龄": 40, "职业": "医生"}
]

ログイン後にコピー

したがって、ライブラリを使用して、 ExcelファイルをJSON形式のオブジェクトに変換します。 SheetJS や Papa Parse など、そのようなライブラリはたくさんあります。ここではSheetJSを使用します。

3. SheetJS ライブラリを使用して Excel を JavaScript にインポートする

SheetJS ライブラリを使用するには、まず関連する JS ファイルを HTML ファイルに導入する必要があります:

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.1/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver/FileSaver.min.js"></script>

ログイン後にコピー

次に、Excel ファイルを JSON 形式に変換するコードを記述する必要があります。

var oReq = new XMLHttpRequest();
oReq.open("GET", "data.xlsx", true);  // data.xlsx为Excel文件名
oReq.responseType = "arraybuffer";  // 二进制数据流
oReq.onload = function(e) {
  var arraybuffer = oReq.response;
  var data = new Uint8Array(arraybuffer);
  var workbook = XLSX.read(data,{type:"array"});  // 读取Excel文件
  var first_sheet_name = workbook.SheetNames[0];  // 获取第一个sheet的名称
  var worksheet = workbook.Sheets[first_sheet_name];  // 获取第一个sheet对象
  var result = XLSX.utils.sheet_to_json(worksheet);  // 将sheet对象转换为JSON格式
};
oReq.send();

ログイン後にコピー

この時点で、Excel データを JavaScript に正常にインポートし、JSON 形式に変換しました。次に、データを操作して表示できます。

4. Excel データの操作と表示

JSON 形式の Excel データを使用して、さまざまな操作や表示を行うことができます。たとえば、テーブルを作成します。簡単な例を次に示します。

HTML コード:

<table id="excel_table" border="1"></table>

ログイン後にコピー

JavaScript コード:

var table = document.getElementById('excel_table');
for (var i = 0; i < result.length; i++) {
  var row = table.insertRow(i);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = result[i].姓名;
  cell2.innerHTML = result[i].年龄;
  cell3.innerHTML = result[i].职业;
}

ログイン後にコピー

上記のコードは、Excel データを HTML テーブルに挿入します。

さらに、HighCharts、D3.js などのさまざまな JavaScript チャートライブラリを使用してデータを表示することもできます。

5. 結論

上記の方法により、Excel データを JavaScript にインポートして操作および表示することが簡単にできます。これにより、データ処理の効率が向上するだけでなく、データの表示と対話が向上します。

以上がExcelをJavaScriptにインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。