纯JS实现的读取excel文件内容功能示例【支持所有浏览器】

下面是详细讲解“纯JS实现的读取excel文件内容功能示例【支持所有浏览器】”的完整攻略。

1. 准备工作

在使用JS读取excel文件之前，需要先引入一些第三方库，下面是这些库的名称和链接：

• SheetJS - 一个纯JS实现的excel文件读写库，支持xlsx、csv、ods等多种格式。
• FileSaver.js - 一个提供了文件保存功能的JS库，用于将读取到的excel文件保存到本地。

在页面引入这两个JS库之后，就可以开始编写JS代码读取excel文件了。

2. 读取excel文件

读取excel文件的核心代码如下：

<input type="file" id="fileInput" onchange="loadExcelFile(event)">
<script>
    function loadExcelFile(event) {
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.onload = function(event) {
            var data = new Uint8Array(event.target.result);
            var workbook = XLSX.read(data, {type: 'array'});
            var sheetName = workbook.SheetNames[0];
            var worksheet = workbook.Sheets[sheetName];
            var excelData = XLSX.utils.sheet_to_json(worksheet, {header:1});
            // 处理excelData

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

其中，loadExcelFile函数是当input选择文件后触发的回调函数，每次选择文件时都会调用该函数，函数的参数event中包含了当前选中的文件。接下来的代码中，FileReader对象负责将文件读取为二进制数组，XLSX.read函数将二进制数组转换为Workbook对象，workbook.SheetNames[0]获取excel文件中第一个sheet的名称，workbook.Sheets[sheetName]获取该sheet的具体内容，并利用XLSX.utils.sheet_to_json函数将其转换为JSON格式的数据，保存在excelData变量中，之后可以在该函数中对excelData进行处理。

3. 处理读取到的excel数据

在读取到excel文件的数据之后，需要对其进行解析和处理才能使用。例如，如果需要将excel数据显示在页面上，可以使用以下代码：

<table id="excelTable"></table>

<script>
    function loadExcelFile(event) {
        // ...
        var headerTable = document.createElement('table');
        var headerRow = worksheet['A1'].v.split(',');
        var headerHtml = '';
        for (var i = 0; i < headerRow.length; i++) {
            headerHtml += '<th>' + headerRow[i] + '</th>';
        }
        headerTable.innerHTML = '<tr>' + headerHtml + '</tr>';
        var excelTable = document.querySelector('#excelTable');
        excelTable.innerHTML = '';
        excelTable.appendChild(headerTable);
        for (var i = 2; i < excelData.length; i++) {
            var rowTable = document.createElement('table');
            var rowHtml = '';
            for (var j = 0; j < excelData[i].length; j++) {
                rowHtml += '<td>' + excelData[i][j] + '</td>';
            }
            rowTable.innerHTML = '<tr>' + rowHtml + '</tr>';
            excelTable.appendChild(rowTable);
        }
    }
</script>

其中，#excelTable是一个空的table元素，用于显示excel数据。代码中首先通过worksheet['A1'].v获取数据中的表头信息，然后依次将表头信息和数据生成HTML元素，最后将其添加到table元素中即可。如果需要将excel数据保存到本地文件中，可以使用以下代码：

<input type="button" id="saveExcelBtn" value="保存excel文件" onclick="saveExcelFile()">

<script>
    function saveExcelFile() {
        var filename = 'myExcelFile.xlsx';
        var worksheet = XLSX.utils.json_to_sheet(jsonData);
        var workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
        var wbout = XLSX.write(workbook, {bookType:'xlsx', bookSST:false, type: 'binary'});
        function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }
        saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), filename);
    }
</script>

其中，jsonData是需要保存为excel文件的JSON格式数据，workbook和worksheet是SheetJS提供的接口，用于将数据转换为excel文件格式，最终通过FileSaver.js库的saveAs函数将数据保存到本地文件中。

以上就是“纯JS实现的读取excel文件内容功能示例【支持所有浏览器】”的完整攻略，希望可以对你有所帮助！