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

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="地址" prop="address"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { api_other_excel_data } from '@/apis/excel'
import { shallowRef } from 'vue'
// v3没有filter，使用函数代替
import { formatTime } from "@/filters";
//引入 插件
import * as xlsx from 'xlsx'

let ExcelList = shallowRef<Array<ExcelListItem>>([])
const getExcelList = async () => {
  const res = await api_other_excel_data()
  console.log(res);
  ExcelList.value = res.data.data
}
getExcelList()

//导出
const handleExport = () => {
  //处理数据的健名
  const ExcelListKey = ExcelList.value.map(v => {
    return {
      id: v.id,
      姓名: v.name,
      日期: formatTime(v.date),
      地址: v.address
    }
  })
  //创建一个工作簿 workbook
  const workBook = xlsx.utils.book_new()
  // 创建工作表 worksheet
  const workSheet = xlsx.utils.json_to_sheet(ExcelListKey)
  // 将工作表放入工作簿中
  xlsx.utils.book_append_sheet(workBook, workSheet)
  // 生成数据保存
  xlsx.writeFile(workBook, `file.xlsx`, {
    bookType: 'xlsx'
  })
}


</script>

<style scoped>

</style>

excel导入

核心api

• cosnt fileReader= new FileReader() Web 应用程序异步读取存储在用户计算机上的文件
• fileReader.readAsBinaryString(file); 读取文件的内容为二进制
• fileReader.onload 监听读取文件成功
• xlsx.read(数据，配置项) 插件读取文件 生成工作簿
• XLSX.utils.sheet_to_json(工作表) 把工作表转化为json

示例完整代码

<template>
    <div>
        <el-card>
            <template #header>
                <el-upload :show-file-list="false" accept=".xlsx" :auto-upload="false" :limit="1"
                    :on-change="handleOnChange">
                    <el-button type="primary">导入Excel</el-button>
                </el-upload>
            </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">
                </el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
            </el-table>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { UploadFile } from 'element-plus'
import { shallowRef } from 'vue'
//引入 插件
import * as xlsx from 'xlsx'

let ExcelList = shallowRef<Array<ExcelListItem>>([])
const handleOnChange = (uploadFile: UploadFile) => {
    // 获取文件信息
    let file = uploadFile.raw
    //创建读取器
    const fileReader = new FileReader()
    //2 开始读取文件的内容为二进制
    fileReader.readAsBinaryString(file!)
    //读取完成
    fileReader.onload = (ev) => {
        console.log(ev);
        //获取内容
        const data = ev.target?.result
        //读取工作簿
        const workbook = xlsx.read(data, {
            type: 'binary', // 以字符编码的方式解析
        })
        //5 获取工作表
        const exlname = workbook.SheetNames[0] // 取第一张表
        const d = workbook.Sheets[exlname]
        //格式转化
        const exl = xlsx.utils.sheet_to_json(d).map((v:any) => {
            return {
                id: v.id,
                name: v.姓名,
                date: v.日期,
                address: v.地址
            }
        })
        ExcelList.value=exl
    }
}
</script>

<style scoped>

</style>