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萬條數據等不同方面進行了介紹，希望對大家有所幫助。