JS解析Excel表格|极客笔记

JS解析Excel表格

在前端开发中，经常会遇到需要处理Excel表格数据的情况。本文将介绍如何使用JavaScript解析Excel表格，并将数据展示在页面上。

1. 准备工作

在进行Excel表格解析之前，我们需要先引入一个第三方库XLSX来帮助我们处理Excel文件。可以通过CDN引入该库，也可以使用npm安装。

在HTML文件中引入XLSX库：

<script src="https://cdn.jsdelivr.net/npm/xlsx@0.16.8/dist/xlsx.full.min.js"></script>

2. 读取Excel文件

首先创建一个<input type="file">元素，用于用户选择Excel文件并上传。然后通过JavaScript监听文件上传事件，读取Excel文件内容。

<input type="file" id="fileInput">

<script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
        var file = event.target.files[0];
        var reader = new FileReader();

        reader.onload = function(e) {
            var data = new Uint8Array(e.target.result);
            var workbook = XLSX.read(data, {type: 'array'});
            var sheetName = workbook.SheetNames[0];
            var sheet = workbook.Sheets[sheetName];
            var excelData = XLSX.utils.sheet_to_json(sheet, {header: 1});
            console.log(excelData);
        };

        reader.readAsArrayBuffer(file);
    });
</script>

上述代码中，我们监听了文件上传的change事件，并在事件处理函数中读取Excel文件内容。通过XLSX.read方法来解析Excel文件，然后通过XLSX.utils.sheet_to_json方法将解析的数据转换为JSON格式。

3. 显示Excel数据

接下来，我们将解析的Excel数据展示在页面上。可以通过表格的形式展示，也可以根据业务需求自定义展示方式。

<div id="excelTable"></div>

<script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
        var file = event.target.files[0];
        var reader = new FileReader();

        reader.onload = function(e) {
            var data = new Uint8Array(e.target.result);
            var workbook = XLSX.read(data, {type: 'array'});
            var sheetName = workbook.SheetNames[0];
            var sheet = workbook.Sheets[sheetName];
            var excelData = XLSX.utils.sheet_to_json(sheet, {header: 1});
            displayExcelData(excelData);
        };

        reader.readAsArrayBuffer(file);
    });

    function displayExcelData(data) {
        var table = '<table border="1">';
        for (var i = 0; i < data.length; i++) {
            table += '<tr>';
            for (var j = 0; j < data[i].length; j++) {
                table += '<td>' + data[i][j] + '</td>';
            }
            table += '</tr>';
        }
        table += '</table>';

        document.getElementById('excelTable').innerHTML = table;
    }
</script>

在displayExcelData函数中，我们将解析的Excel数据按行列的形式展示在表格中。这样用户就可以直观地看到Excel文件中的数据。