基于vue3+ts+scss的后台管理系统(二)----excel的导入导出

文章介绍了如何在Vue.js应用中利用XLSX库进行Excel文件的导入和导出。导出时，通过XLSX.utils的各种API创建工作簿和工作表，然后保存为Excel文件；导入时，使用elementPlus的上传组件读取文件，通过fileReader读取内容，转换为工作表并渲染到表格中。

excel的导入导出
官网地址 https://docs.sheetjs.com/docs/getting-started/installation/standalone
安装XLSX插件：npm i xlsx
引入插件：import * as XLSX from 'xlsx'
实现思路：导出就是用一些api，去创建工作簿、工作表之后，将工作表添加到工作簿里，然后再生成文件保存。导入：要用到elementPlus的上传unpload组件，根据api，获取文件信息，创建一个读取器fileReader去读取文件，获取内容之后，获取工作表，再转为json格式，再渲染到页面的表中

excel导出

核心api

XLSX.utils.book_new() 新建工作簿
xlsx.utils.json_to_sheet(json数组)创建工作表 json格式 or
xlsx.utils.aoa_to_sheet(二位数组)创建工作表数组格式
xlsx.utils.book_append_sheet(工作簿, 工作表)
xlsx.writeFile(工作簿,名称,配置项) 下载生成的excel

示例完整代码

<template>
  <div>
    <el-card>
      <template #header>
        <div>
          <el-button type="primary" @click="handleExport">导出excel</el-button>
        </div>
      </template>
      <el-table :data="ExcelList">
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="日期" prop="date">
          <template v-slot="{ row }">
            <span>{
   
   {
   
    formatTime(row.date) }}</span>
          </template>
        </el-table-column>
        <el-table-column label=