前端使用xlsx.js實現(xiàn) Excel 文件的導(dǎo)入與導(dǎo)出功能

在現(xiàn)代的 Web 開發(fā)中，處理文件上傳和導(dǎo)出功能已經(jīng)變得越來越常見，尤其是 Excel 文件的導(dǎo)入與導(dǎo)出。

我們將使用 Vue.js 和 XLSX.js 庫來處理 Excel 文件的讀取和生成。XLSX.js 是一個強(qiáng)大的 JavaScript 庫，可以在瀏覽器中解析和生成 Excel 文件。以下是如何一步步實現(xiàn)這個功能的示例。

項目需求

• 導(dǎo)入功能：允許用戶上傳 Excel 文件，并解析其內(nèi)容。
• 導(dǎo)出功能：允許用戶將數(shù)據(jù)導(dǎo)出為 Excel 文件。

環(huán)境準(zhǔn)備

首先，確保你已經(jīng)在 Vue 項目中安裝了 XLSX.js 庫，可以通過以下命令來安裝：

npm install xlsx

代碼實現(xiàn)

在下面的代碼中，我們展示了如何在 Vue 組件中實現(xiàn) Excel 文件的導(dǎo)入和導(dǎo)出。

<template><div class="maintenance"><a-page-header style="border-bottom: 1px solid rgb(235, 237, 240)" :title="title"><template slot="extra"><a-button-group><a-button type="primary" icon="download" @click="handleExportExcelFile">導(dǎo)出excel</a-button></a-button-group><a-uploadaccept=".xlsx,.xls":disabled="isUploadingExcel":before-upload="beforeUpload":custom-request="customRequest":showUploadList="false"><a-button type="primary" :icon="isUploadingExcel ? 'loading' : 'plus'">導(dǎo)入excel</a-button></a-upload></template></a-page-header></div>
</template><script>
import * as XLSX from 'xlsx';export default {data() {return {title: 'Excel 文件處理',isUploadingExcel: false,pagination: {current: 1}};},methods: {// 初始化數(shù)據(jù)async fetchData() {this.isLoadingTableData = true;// 在這里你可以從 API 或其他來源加載數(shù)據(jù)this.isLoadingTableData = false;},// 搜索操作async handleSearch() {this.pagination.current = 1;this.fetchData();},/** 圖片預(yù)覽=============== */// 攔截上傳操作，進(jìn)行自定義處理customRequest({ file, onSuccess, onError }) {try {// 調(diào)用文件處理方法this.handleImportExcelFile(file);// 如果沒有錯誤，調(diào)用 onSuccess 回調(diào)if (onSuccess) {onSuccess();}} catch (error) {// 如果發(fā)生錯誤，調(diào)用 onError 回調(diào)if (onError) {onError(error);}}},// 文件上傳前的鉤子函數(shù)beforeUpload(file) {const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';if (!isExcel) {this.$message.error('只能上傳 Excel 文件!');}return isExcel;},// 處理導(dǎo)入的 Excel 文件handleImportExcelFile(file) {this.isUploadingExcel = true;const reader = new FileReader();reader.onload = e => {const data = e.target.result;const workbook = XLSX.read(data, { type: 'binary' });// 讀取第一個工作表const sheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[sheetName];// 將工作表轉(zhuǎn)換為 JSON 數(shù)據(jù)const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });this.isUploadingExcel = false;console.log(jsonData);// 你可以在這里將 jsonData 保存到組件的 data 中// this.excelData = jsonData;};reader.readAsBinaryString(file);},// 導(dǎo)出 Excel 文件handleExportExcelFile() {const data = [['Name', 'Age'],['Alice', 20],['Bob', 25]];// 將數(shù)據(jù)轉(zhuǎn)換為工作表const ws = XLSX.utils.aoa_to_sheet(data);const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 導(dǎo)出文件XLSX.writeFile(wb, 'output.xlsx');}},created() {},async mounted() {this.fetchData();}
};
</script>

代碼講解

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet：這是 Excel 2007 及以后版本（.xlsx 文件）的 MIME 類型，用于表示基于 Open XML 格式的電子表格。
application/vnd.ms-excel：這是 Excel 97-2003 版本（.xls 文件）的 MIME 類型，表示舊版 Excel 格式的電子表格。

1. 組件結(jié)構(gòu)

在 Vue 模板中，我們使用了 a-page-header 和 a-button-group 來顯示頁面頭部和操作按鈕。主要操作按鈕包括：

• 導(dǎo)出 Excel 按鈕：點擊時觸發(fā) handleExportExcelFile 方法。
• 導(dǎo)入 Excel 按鈕：使用 Ant Design Vue 的 a-upload 組件來上傳文件。

2. 導(dǎo)入 Excel 文件

• beforeUpload：在上傳文件之前，我們先判斷文件類型，確保它是 Excel 文件。如果不是，會顯示錯誤消息。
• customRequest：這是上傳自定義請求的鉤子函數(shù)，它會在上傳過程中調(diào)用 handleImportExcelFile 方法來處理文件。
• handleImportExcelFile：當(dāng)文件上傳完成后，我們使用 FileReader 讀取文件內(nèi)容，并利用 XLSX.read 方法解析 Excel 文件。然后，我們將第一個工作表的數(shù)據(jù)轉(zhuǎn)換成 JSON 格式，可以進(jìn)一步處理或展示這些數(shù)據(jù)。

3. 導(dǎo)出 Excel 文件

• handleExportExcelFile：通過 XLSX.utils.aoa_to_sheet 方法，我們將一個二維數(shù)組轉(zhuǎn)換成 Excel 工作表對象，接著用 XLSX.writeFile 方法將其導(dǎo)出為 output.xlsx 文件。

4. 上傳與導(dǎo)出按鈕的顯示與隱藏

• isUploadingExcel 變量用來控制上傳按鈕的加載狀態(tài)，在文件上傳過程中會顯示一個加載動畫，防止用戶重復(fù)上傳文件。

5. 分頁與搜索功能

• 代碼中提供了分頁與搜索框架，雖然具體的分頁和搜索實現(xiàn)未展示，但你可以根據(jù)自己的需求，進(jìn)一步擴(kuò)展數(shù)據(jù)請求與展示功能。

6.XLSX.utils.sheet_to_json() 方法

改方法是 xlsx 庫用來將 Excel 工作表轉(zhuǎn)換成 JSON 數(shù)據(jù)的函數(shù)。header 屬性用來指定如何處理工作表的第一行（通常是列標(biāo)題）以及如何映射到 JSON 對象的屬性名。

header 屬性的含義：

1. header: 1:

   • 這表示將第一行數(shù)據(jù)作為數(shù)組的元素，而不是作為對象的鍵。
   • 即，轉(zhuǎn)換結(jié)果將是一個二維數(shù)組，每一行是一個數(shù)組。第一行會作為數(shù)據(jù)的首行，而不是作為字段名稱。
   • 適用于當(dāng)你想直接操作原始數(shù)據(jù)時。

   示例：

   const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
   console.log(jsonData);
   

   假設(shè) Excel 中的工作表內(nèi)容如下：

   姓名	年齡	性別
   張三	25	男
   李四	30	女

   輸出的 jsonData 將是：

   [['姓名', '年齡', '性別'],['張三', 25, '男'],['李四', 30, '女']
   ]
   

2. header: 'A' (或者其他字符串值):

   • 當(dāng) header 設(shè)置為字符時，表示工作表的列頭應(yīng)該被視為從字母 “A” 開始。
   • 這樣，每一列會被命名為字符（例如 'A', 'B', 'C'），并用于數(shù)據(jù)對象的屬性名。

   示例：

   const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 'A' });
   console.log(jsonData);
   

   對于相同的工作表數(shù)據(jù)，輸出將是：

   [{ A: '張三', B: 25, C: '男' },{ A: '李四', B: 30, C: '女' }
   ]
   

3. header: [] (數(shù)組形式):

   • 如果你傳遞一個數(shù)組作為 header，那么這個數(shù)組將被用作 JSON 數(shù)據(jù)的字段名稱。

   示例：

   const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: ['姓名', '年齡', '性別'] });
   console.log(jsonData);
   

   輸出將是：

   [{ 姓名: '張三', 年齡: 25, 性別: '男' },{ 姓名: '李四', 年齡: 30, 性別: '女' }
   ]
   

4. header: true:

   • 如果 header 設(shè)置為 true，則 sheet_to_json 方法會自動使用工作表的第一行作為屬性名。

   示例：

   const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: true });
   console.log(jsonData);
   

   輸出將是：

   [{ 姓名: '張三', 年齡: 25, 性別: '男' },{ 姓名: '李四', 年齡: 30, 性別: '女' }
   ]
   

這里，sheet_to_json() 會自動識別第一行（['姓名', '年齡', '性別']）作為字段名，并將其應(yīng)用到每一行的數(shù)據(jù)。