js如何解析Excel文件 前端Excel文件解析實戰(zhàn)教程

前端解析excel文件的核心在于使用JavaScript庫如xlsx讀取并處理數(shù)據(jù)，將其轉(zhuǎn)為JSon等格式。1. 選擇合適庫如xlsx支持多種excel格式；2. 使用filereader讀取文件并通過xlsx解析；3. 利用xlsx.utils.sheet_to_json將工作表轉(zhuǎn)為json數(shù)據(jù)；4. 添加錯誤處理機制應(yīng)對文件問題；5. 大文件可采用web workers、流式讀取或分頁加載優(yōu)化性能；6. excel日期可通過raw和datenf參數(shù)轉(zhuǎn)換；7. 解析后的數(shù)據(jù)可用前端框架如react、vue渲染為表格展示。

前端解析Excel文件，核心在于利用JavaScript讀取并處理Excel數(shù)據(jù)，將其轉(zhuǎn)化為可操作的JSON或其他格式。這使得前端應(yīng)用可以直接利用Excel中的數(shù)據(jù)，無需依賴后端服務(wù)進行數(shù)據(jù)處理。

解決方案

1. 選擇合適的庫： xlsx 是一個流行的JavaScript庫，專門用于讀取和寫入Excel文件。它支持多種Excel格式，如.xlsx、.xls、.csv等。

   立即學習“前端免費學習筆記（深入）”；

   

   • 安裝：npm install xlsx 或 yarn add xlsx

2. 讀取Excel文件： 使用FileReader對象讀取文件，然后利用xlsx庫解析。

   import * as XLSX from 'xlsx';  const handleFile = (file) => {   const reader = new FileReader();    reader.onload = (e) => {     const data = new uint8Array(e.target.result);     const workbook = XLSX.read(data, { type: 'array' });      // 處理工作簿數(shù)據(jù)     processWorkbook(workbook);   };    reader.readAsArrayBuffer(file); };  const inputElement = document.getElementById('excel-file'); inputElement.addEventListener('change', (e) => {   const file = e.target.files[0];   handleFile(file); });

3. 處理工作簿數(shù)據(jù)： workbook 對象包含了Excel文件的所有信息，包括工作表（sheets）。

   const processWorkbook = (workbook) => {   const sheetName = workbook.SheetNames[0]; // 獲取第一個工作表名稱   const worksheet = workbook.Sheets[sheetName]; // 獲取工作表對象    // 將工作表數(shù)據(jù)轉(zhuǎn)換為JSON格式   const jsonData = XLSX.utils.sheet_to_json(worksheet);    console.log(jsonData); // 打印JSON數(shù)據(jù)   // 在這里可以將jsonData用于后續(xù)操作，例如展示在表格中或發(fā)送到后端 };

4. 錯誤處理： 在文件讀取和解析過程中，可能會出現(xiàn)各種錯誤，例如文件格式錯誤、文件損壞等。需要添加適當?shù)腻e誤處理機制。

   reader.onerror = (error) => {   console.error('文件讀取錯誤:', error); };

如何處理大型Excel文件？

大型Excel文件解析可能會導(dǎo)致瀏覽器卡頓。解決辦法包括：

• Web Workers： 將解析Excel文件的任務(wù)放在Web Worker中執(zhí)行，避免阻塞主線程。
• 流式讀?。?/strong> xlsx 庫支持流式讀取，可以分塊處理數(shù)據(jù)，減少內(nèi)存占用。
• 分頁加載： 如果只需要展示部分數(shù)據(jù)，可以只解析需要的部分，而不是整個文件。

const processWorkbook = (workbook) => {   const sheetName = workbook.SheetNames[0];   const worksheet = workbook.Sheets[sheetName];   const jsonData = XLSX.utils.sheet_to_json(worksheet, { raw: false, dateNF: 'yyyy-mm-dd' }); // raw: false 將數(shù)字轉(zhuǎn)為日期，dateNF 指定日期格式    console.log(jsonData); };

import React, { useState } from 'react'; import * as XLSX from 'xlsx';  const ExcelTable = () => {   const [data, setData] = useState([]);    const handleFile = (file) => {     const reader = new FileReader();      reader.onload = (e) => {       const bstr = e.target.result;       const wb = XLSX.read(bstr, { type: 'binary' });       const wsname = wb.SheetNames[0];       const ws = wb.Sheets[wsname];       const jsonData = XLSX.utils.sheet_to_json(ws, { header: 1 }); // header: 1 將第一行作為表頭        setData(jsonData);     };      reader.readAsBinaryString(file);   };    return (     <div>       <input type="file" onChange={(e) => handleFile(e.target.files[0])} />       <table>         <thead>           <tr>             {data[0] && data[0].map((header, index) => <th key={index}>{header}</th>)}           </tr>         </thead>         <tbody>           {data.slice(1).map((row, rowIndex) => (             <tr key={rowIndex}>               {row.map((cell, cellIndex) => <td key={cellIndex}>{cell}</td>)}             </tr>           ))}         </tbody>       </table>     </div>   ); };  export default ExcelTable;