JS读取Excel详解

一、js读取excel文件

要读取excel文件，需要用到FileReader对象。FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件，使用FileReader可以把本地文件通过二进制流的方式读取出来，然后进行相应的操作。

<input type="file" id="file" onchange="loadFile()"/>

function loadFile() {
    var file = document.querySelector('#file').files[0];
    var reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = function(e) {
        var data = e.target.result;
        // 对读取出来的二进制数据进行操作
    }
}

二、js读取excel 20万数据

读取excel文件时，如果文件比较大，会有性能上的问题，特别是在处理20万条数据这样巨大的数据量时，会让页面变得非常卡顿，因为浏览器在读取和处理大量数据时需要耗费大量内存和时间。

因此，可以使用分块读取的方法，将大文件分成多块，每次只读取其中的一块，可以有效地提高程序运行性能，同时避免内存溢出问题。

var reader = new FileReader();
var CHUNK_SIZE = 1024 * 1024; // 每次读取1MB数据
var offset = 0;
var file = document.getElementById('file').files[0];

// 读取文件
function readBlob() {
    if (offset >= file.size) {
        return;
    }
    var slice = file.slice(offset, offset + CHUNK_SIZE);
    reader.readAsArrayBuffer(slice);
}

// 当读取完成时触发
reader.onload = function(e) {
    var data = new Uint8Array(reader.result); // 读取的数据存放在result属性中
    offset += data.byteLength;
    readBlob();
}

readBlob();

三、js读取excel数据

使用js读取excel文件时，可以利用第三方库xlsx.js，这是一个开源的JavaScript库，支持读取和写入Office Open XML Spreadsheet格式的电子表格文件。xlsx.js可以将excel文件读成JSON对象或HTML表格。

使用方法如下：

// 引入xlsx.js库
<script src="./xlsx.full.min.js"></script>

// 读取excel文件
var file = document.querySelector('#file').files[0];
var reader = new FileReader();
reader.onload = function(event) {
    var data = event.target.result;
    var workbook = XLSX.read(data, {type: 'binary'});
    // 读取第一个工作表的所有数据
    var sheet1 = workbook.Sheets[workbook.SheetNames[0]];
    var rows = XLSX.utils.sheet_to_row_object_array(sheet1);
    // 处理读取出来的数据
};
reader.readAsBinaryString(file);

四、js读取excel中的样式

当读取excel文件中的样式时，需要用到SheetJS Style Library，这是一个SheetJS的附加库，可读取并解析Excel电子表格中的样式信息。

使用方法如下：

// 引入xlsx.js库和sheetjs-style库
<script src="./xlsx.full.min.js"></script>
<script src="./sheetjs-style.js"></script>

// 读取excel文件
var file = document.querySelector('#file').files[0];
var reader = new FileReader();
reader.onload = function(event) {
    var data = event.target.result;
    var workbook = XLSX.read(data, {type: 'binary', cellStyles: true});
    // 读取第一个工作表的所有数据
    var sheet1 = workbook.Sheets[workbook.SheetNames[0]];
    var rows = XLSX.utils.sheet_to_json(sheet1, {header:1, range:1});
    var styles = sheet_to_json(sheet1, {header:1, range:1, style:true});
    // 处理读取出来的数据和样式
};
reader.readAsBinaryString(file);

五、js读取excel表格

当需要读取一个excel文件中的表格时，需要用到SheetJS Table Library，这是SheetJS的另一个附加库，可以在电子表格中创建透视表和交叉表格。

使用方法如下：

// 引入xlsx.js库和sheetjs-table库
<script src="./xlsx.full.min.js"></script>
<script src="./sheetjs-table.js"></script>

// 读取excel文件
var file = document.querySelector('#file').files[0];
var reader = new FileReader();
reader.onload = function(event) {
    var data = event.target.result;
    var workbook = XLSX.read(data, {type: 'binary', cellStyles: true});
    // 读取第一个工作表的所有数据
    var sheet1 = workbook.Sheets[workbook.SheetNames[0]];
    var rows = XLSX.utils.sheet_to_json(sheet1, {header:1, range:1});
    // 创建table对象
    var table = new Table(rows);
    // 添加到DOM中
    var tableElem = document.createElement('table');
    tableElem.innerHTML = table.html();
    document.querySelector('#table-container').appendChild(tableElem);
};
reader.readAsBinaryString(file);

六、js读取excel表的代码

在SheetJS库中，有一个utility部分可以展示如何读取excel文件和表格。比如读取excel文件：

/* require XLSX */
var XLSX = require('xlsx');
var workbook = XLSX.readFile('test.xlsx');
/* DO SOMETHING WITH workbook HERE */

读取excel表：

/* require XLSX */
var XLSX = require('xlsx');
var workbook = XLSX.readFile('test.xlsx');
var sheet_name_list = workbook.SheetNames;
sheet_name_list.forEach(function(y) {
  var worksheet = workbook.Sheets[y];
  /* DO SOMETHING WITH worksheet HERE */
});

七、js读取excel日期

当读取excel文件中的日期时，需要进行日期格式转换。SheetJS库中提供了日期格式化函数，可以将字符串格式的日期转换成日期对象。

/* require XLSX */
var XLSX = require('xlsx');
var workbook = XLSX.readFile('test.xlsx');
var sheet_name_list = workbook.SheetNames;
sheet_name_list.forEach(function(y) {
  var worksheet = workbook.Sheets[y];
  var headers = {};
  var data = [];
  for(var z in worksheet) {
    if(z[0] === '!') continue;
    // 将日期转换成日期对象
    var date = XLSX.SSF.parse_date_code(worksheet[z].v);
    /* DO SOMETHING WITH date HERE */
  }
});

八、js读取excel文件chrome

如果使用Chrome浏览器读取excel文件时，可能会遭遇下面的错误：

Uncaught DOMException: Failed to execute 'readAsBinaryString' on 'FileReader': The object is already busy reading Blobs.

这是因为Chrome浏览器的FileReader对象不支持重复读取相同的文件，因此需要进行特殊处理，每次读取前都需要重置FileReader对象。

var reader = new FileReader();
var file = document.getElementById('file').files[0];

// 重置FileReader对象
function resetReader() {
    reader.onload = null;
    reader.abort();
    reader = new FileReader();
}

// 读取文件
function readFile() {
    resetReader();
    reader.readAsBinaryString(file);
    reader.onload = function(event) {
        var data = event.target.result;
        // 处理读取出来的数据
    }
}

九、js读取excel文件xls

以上介绍的都是读取xlsx格式的excel文件，如果要读取xls格式的excel文件，需要用到第三方库xls.js。

使用方法如下：

// 引入xls.js库
<script src="./xls.js"></script>

// 读取xls格式的excel文件
var file = document.querySelector('#file').files[0];
var reader = new FileReader();
reader.onload = function(event) {
    var data = new Uint8Array(event.target.result);
    var workbook = XLS.read(data, {type: 'array'}); // 读取xls文件
    // 处理读取出来的数据
};
reader.readAsArrayBuffer(file);

以上是我对js读取excel的详细阐述，从读取excel文件到读取excel表格、日期、样式和处理20万条数据等不同方面进行了介绍，希望对大家有所帮助。