Vue导入导出Excel详细解析

发布时间：2023-05-21

一、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、完整代码示例：

//头部
<script>
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);
},
}
</script>
//导入导出示例代码
<template>
  <div class="export">
    <button @click="exportExcel()">导出Excel</button>
    <input type="file" @change="fileChange($event)" />
  </div>
</template>

2、核心API解析： 该示例将导入、导出代码放在了同一个vue文件中。 在模板代码中，我们定义了一个包含“导出Excel”预处理方法及一个文件变化时的回调函数的button和input元素。点击“导出Excel”按钮将会调用处理方法，触发导出Excel文件到本地的效果。当我们选择Excel文件上传时，在fileChange()回调函数中，我们调用FileReader对象读取上传文件，并把读取到的二进制数据传给XLSX对象的read()方法，最终输出解析结果到控制台中。 解析结果输出到控制台：

result = [{"姓名":"张三","年龄":18,"性别":"男"},{"姓名":"李四","年龄":20,"性别":"女"},{"姓名":"王五","年龄":22,"性别":"男"}]

五、Excel导入导出常见问题

1、如何处理日期类型？ 在XLSX库中，有两个函数可以方便地处理日期类型：

  • XLSX.SSF.format()：将日期类型转化为字符串类型
  • XLSX.SSF.parse_date_code()：将字符串类型转化为日期类型 在使用前，我们需要先导入头文件。代码示例如下：
import * as XLSX from 'xlsx';
import * as SSF from 'xlsx/ssf';

以下是使用方法：

//日期格式化
let value = new Date();
XLSX.SSF.format("yyyy-MM-dd", value);
//日期格式解析
let value = XLSX.SSF.parse_date_code(44196, 'yyyy-MM-dd');

2、如何进行Excel文档的加密操作？ 我们可以借助JS库crypto-js来实现对Excel文件的AES对称加密算法的加密操作。该库采用标准的AES算法并且安全可靠，可避免因Excel中的敏感信息而导致的数据泄露。 下面是代码示例：

import * as XLSX from 'xlsx';
import * as CryptoJS from 'crypto-js'
//加密函数
function encryptExcel(workbook, password) {
  let binary = XLSX.write(workbook, {bookType: 'xlsx', type: 'array'});
  let result = CryptoJS.AES.encrypt(binary, password);
  return XLSX.write(result, {bookType: 'xlsx', type: 'binary'});
}
//解密函数
function decryptExcel(data, password) {
  let binary = CryptoJS.AES.decrypt(data, password);
  let result = XLSX.read(binary, {type: 'binary'});
  return result;
}

六、总结

本文主要详细介绍了如何使用Vue.js进行Excel文件的导入和导出操作。首先，在文章的第一部分介绍了Excel文件的格式，然后详细阐述了如何导出Excel和导入Excel，包括常用API函数的详细解析以及完整代码示例。最后，我们还介绍了Excel文件的加密处理和解密方式。希望本文能够帮助读者更加深入了解Vue.js在Excel文件处理中的应用，为大家的工作提供有益帮助。

推荐文章