利用純JavaScript實現(xiàn)讀取和導出Excel文件
一、導出 Excel 文件
導出 Excel 文件通常涉及將數(shù)據(jù)轉(zhuǎn)化為 Excel 文件格式(如 .xlsx
或 .xls
)。在純 JavaScript 中,我們可以通過手動生成一個 Excel 文件的格式化內(nèi)容并下載。
1.1 創(chuàng)建 Excel 表格
Excel 文件通常由多個工作表(Sheet)構成,而每個工作表中包含一個表格(Grid)。我們通過生成表格數(shù)據(jù),并利用 Blob
對象生成二進制數(shù)據(jù),最終下載成 Excel 文件。
function exportExcel(data, filename) { const ws_name = "Sheet1"; // 設置工作表的名稱 const wb = { SheetNames: [ws_name], Sheets: {} }; // 將二維數(shù)據(jù)數(shù)組轉(zhuǎn)換為 Excel 格式 const ws_data = []; for (let i = 0; i < data.length; i++) { ws_data.push(data[i]); } // 通過 SheetJS 的標準格式進行生成 const ws = XLSX.utils.aoa_to_sheet(ws_data); wb.Sheets[ws_name] = ws; // 生成文件下載鏈接 const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); const blob = new Blob([wbout], { type: "application/octet-stream" }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = filename || 'export.xlsx'; link.click(); }
1.2 觸發(fā)下載
上面的代碼段生成了一個包含數(shù)據(jù)的 Excel 文件,但沒有直接觸發(fā)下載。通過創(chuàng)建一個臨時的 a
標簽,并利用 Blob 對象來觸發(fā)文件的下載。
const data = [ ["Name", "Age", "City"], ["Alice", 25, "New York"], ["Bob", 30, "San Francisco"], ["Charlie", 35, "London"] ]; exportExcel(data, "people.xlsx");
這段代碼將會生成一個 people.xlsx
文件,并下載到本地。
1.3 小結(jié)
通過簡單的 JavaScript,我們可以輕松地將二維數(shù)據(jù)數(shù)組導出為 Excel 文件。生成文件的關鍵是利用 Blob
對象進行二進制數(shù)據(jù)流的處理,以及通過 a
標簽觸發(fā)文件下載。
二、讀取 Excel 文件
讀取 Excel 文件并解析內(nèi)容相對復雜一些,因為 Excel 文件本質(zhì)上是二進制格式數(shù)據(jù)。雖然沒有第三方庫的幫助,我們也可以通過 FileReader
API 讀取文件,手動解析 Excel 文件中的數(shù)據(jù)。
2.1 讀取 Excel 文件并解析數(shù)據(jù)
可以通過 FileReader
API 讀取文件內(nèi)容,并將其轉(zhuǎn)化為一個可以處理的對象。我們使用 XMLHttpRequest
或 FileReader
讀取文件,然后使用 Blob
來轉(zhuǎn)換二進制數(shù)據(jù)。
function readExcel(file, callback) { const reader = new FileReader(); // 讀取文件內(nèi)容 reader.onload = function (e) { const data = e.target.result; // 使用 FileReader 解析文件的二進制數(shù)據(jù) const binaryData = new Uint8Array(data); const workbook = XLSX.read(binaryData, { type: 'array' }); // 獲取工作表的數(shù)據(jù) const sheet = workbook.Sheets[workbook.SheetNames[0]]; const rows = XLSX.utils.sheet_to_json(sheet, { header: 1 }); // 將工作表內(nèi)容轉(zhuǎn)化為二維數(shù)組 callback(rows); // 傳遞解析結(jié)果 }; reader.readAsArrayBuffer(file); }
2.2 處理 Excel 文件
通過上面的代碼,我們可以將讀取的 Excel 文件解析成二維數(shù)組(每一行數(shù)據(jù)為數(shù)組中的一個子數(shù)組)。然后你可以根據(jù)需求進行數(shù)據(jù)展示、存儲或其他操作。
// 假設文件上傳控件 const input = document.getElementById('file-input'); input.addEventListener('change', function (e) { const file = e.target.files[0]; // 調(diào)用 readExcel 函數(shù) readExcel(file, function (data) { console.log(data); // 輸出解析后的數(shù)據(jù) }); });
這段代碼會通過文件上傳控件讀取用戶選擇的 Excel 文件,并解析出文件中的內(nèi)容。最終,解析的數(shù)據(jù)將通過 callback
回調(diào)傳遞給用戶。
2.3 小結(jié)
通過 FileReader
API 和 XLSX
庫(這里假設使用了相關工具解析 Excel 文件),可以將 Excel 文件內(nèi)容讀取為一個可以操作的 JavaScript 對象或二維數(shù)組。然后,我們就能進行后續(xù)的處理,如渲染、分析或存儲。
三、總結(jié)
本文介紹了如何在沒有第三方庫的情況下,使用純 JavaScript 來實現(xiàn) Excel 文件的導入和導出功能。對于導出 Excel,我們通過構建 Excel 的二進制格式并觸發(fā)下載,達到了不依賴外部庫的目的。而對于讀取 Excel 文件,我們使用了原生的 FileReader
API 來讀取文件并解析出其內(nèi)容。
雖然沒有引入第三方庫,純 JS 實現(xiàn)的讀取和導出 Excel 功能仍然是可行的,但在復雜場景下,如處理大量數(shù)據(jù)或支持多個 Excel 格式,使用像 XLSX
這類專門的庫會更加高效和靈活。
這樣,你可以根據(jù)項目需求決定是否使用外部庫,或者僅依賴原生 API 來實現(xiàn)功能。
到此這篇關于利用純JavaScript實現(xiàn)讀取和導出Excel文件的文章就介紹到這了,更多相關純JS讀取和導出Excel文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Bootstrap實現(xiàn)基于carousel.js框架的輪播圖效果
這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)基于carousel.js框架的輪播圖效果,無過渡動畫,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05JavaScript提高網(wǎng)站性能優(yōu)化的建議(二)
這篇文章主要介紹了JavaScript提高網(wǎng)站性能優(yōu)化的建議(二)的相關資料,需要的朋友可以參考下2016-07-07