Vue導入導出Excel詳細解析

一、Excel文件的格式

1、Excel文件格式描述：Excel是微軟公司開發的一種電子表格軟件，主要用於數據處理、數據統計及財務管理等方面。Excel文件的格式為.xlsx或者.xls格式，其中.xlsx格式屬於OpenXML文件格式，基於XML格式存儲數據。

2、與Vue結合方案：Vue可以通過導入、導出Excel文件實現數據的批量處理。通過使用Excel文件，我們可以方便地對數據進行調整、編輯，然後再將其導入到Vue中進行數據的操作。

二、導出Excel

1、如何導出？

//導出表格
export function exportExcel() {
  // 創建一個Workbook
  let workbook = XLSX.utils.book_new();
  // 定義表格標題
  let sheetHeader = ["姓名", "年齡", "性別"];
  // 定義表格數據
  let sheetData = [["張三", "18", "男"], ["李四", "20", "女"], ["王五", "22", "男"]];
  // 創建一個Sheet
  let sheet = XLSX.utils.aoa_to_sheet([sheetHeader].concat(sheetData));
  // 將sheet添加到workbook中
  XLSX.utils.book_append_sheet(workbook, sheet, "Sheet1");
  // 導出Excel文件
  let excelFile = XLSX.write(workbook, {type: 'binary'});
  let fileName = "table.xlsx";
  saveAs(new Blob([choseArrExcelFile], { type: "application/octet-stream" }), fileName);
}

2、核心API解析：

XLSX是一個開源的JS-XLSX庫，可讀取、解析、寫入Excel文件。其主要包含以下函數：

• utils.book_new()：創建一個Workbook對象
• utils.aoa_to_sheet()：將二維數組轉換成sheet對象
• utils.book_append_sheet(workbook,sheet,name)：將sheet添加到workbook中，name表示sheet名稱
• XLSX.write()：將Workbook對象轉換成二進制文件

三、導入Excel

1、如何導入？

//導入文件變化
fileChange(event) {
  let file = event.target.files[0];
  let reader = new FileReader();
  reader.onload = function (e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: "array" });
    const sheets = workbook.Sheets[workbook.SheetNames[0]];
    const table = XLSX.utils.sheet_to_json(sheets);
    console.log(table);
  };
  reader.readAsArrayBuffer(file);
}

2、核心API解析：

從Excel文件中讀取數據，我們首先需要使用FileReader對象讀取文件，並把讀取到的二進制數據傳給XLSX對象的read()方法。read()方法解析二進制數據，並返回一個Workbook對象，Workbook對象包含多個sheet，我們只在這裡讀取第一個sheet（sheets[0]），並將其轉換為JSON格式的數據，最終輸出到控制台中。

• new FileReader()：創建一個FileReader對象
• reader.onload()：對文件進行讀取，讀取完成後調用回調函數
• new Uint8Array(buffer)：使用buffer作為參數創建一個新的無符號整數數組
• XLSX.read()：將二進制數據解析為workbook對象
• XLSX.utils.sheet_to_json()：將sheet對象轉換為JSON格式的數據

四、Vue.js結合實現導入、導出Excel

1、完整代碼示例：

//頭部
import * as XLSX from 'xlsx';
export default {
 //導出表格
 exportExcel() {
 // 創建一個Workbook
 let workbook = XLSX.utils.book_new();
 // 定義表格標題
 let sheetHeader = ["姓名", "年齡", "性別"];
 // 定義表格數據
 let sheetData = [["張三", "18", "男"], ["李四", "20", "女"], ["王五", "22", "男"]];
 // 創建一個Sheet
 let sheet = XLSX.utils.aoa_to_sheet([sheetHeader].concat(sheetData));
 // 將sheet添加到workbook中
 XLSX.utils.book_append_sheet(workbook, sheet, "Sheet1");
 // 導出Excel文件
 let excelFile = XLSX.write(workbook, {type: 'binary'});
 let fileName = "table.xlsx";
 saveAs(new Blob([choseArrExcelFile], { type: "application/octet-stream" }), fileName);
},
//導入文件變化
 fileChange(event) {
 let file = event.target.files[0];
 let reader = new FileReader();
 reader.onload = function (e) {
 const data = new Uint8Array(e.target.result);
 const workbook = XLSX.read(data, { type: "array" });
 const sheets = workbook.Sheets[workbook.SheetNames[0]];
 const table = XLSX.utils.sheet_to_json(sheets);
 console.log(table);
 };
 reader.readAsArrayBuffer(file);
},
}
//導入導出示例代碼
  導出Excel
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/243920.html