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/n/243920.html