基于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>
  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于使用 Vite + Vue3 + TypeScript + Pinia + Vue Router + Axios + SCSS 并自动导入 API 的设置,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装了 Node.js,并且版本大于等于 12.0.0。 2. 创建一个新的 Vue 项目,可以使用 Vue CLI 或者手动创建一个空文件夹。 3. 在项目根目录下,打开终端并执行以下命令安装 Vite: ```bash npm init vite@latest ``` 按照提示选择你的项目配置,包括选择 Vue 3、TypeScript 和其他选项。 4. 进入项目目录并安装依赖: ```bash cd your-project-name npm install ``` 5. 安装 Pinia 插件: ```bash npm install pinia ``` 6. 创建一个 `src/store` 目录,并在其中创建 `index.ts` 文件,用于定义和导出你的 Pinia store。 ```typescript // src/store/index.ts import { createPinia } from 'pinia' export const store = createPinia() // 可以在这里定义你的 store 模块 ``` 7. 在项目根目录下创建 `src/api` 目录,用于存放 API 请求相关的文件。 8. 在 `src/api` 目录下创建一个 `index.ts` 文件,用于自动导入所有 API 文件。 ```typescript // src/api/index.ts const modules = import.meta.globEager('./*.ts') const apis: any = {} for (const path in modules) { if (path !== './index.ts') { const moduleName = path.replace(/^.\/|\.ts$/g, '') apis[moduleName] = modules[path].default } } export default apis ``` 这样,你就可以在 `src/api` 目录下创建各种 API 请求的文件,例如 `user.ts`: ```typescript // src/api/user.ts import axios from 'axios' export function getUser(id: number) { return axios.get(`/api/user/${id}`) } ``` 然后,在你的组件中使用自动导入的 API: ```typescript import { defineComponent, ref } from 'vue' import { useUserStore } from '@/store' import apis from '@/api' export default defineComponent({ setup() { const userStore = useUserStore() const userId = ref(1) const fetchUser = async () => { const response = await apis.user.getUser(userId.value) userStore.setUser(response.data) } return { userId, fetchUser, } }, }) ``` 以上就是使用 Vite + Vue3 + TypeScript + Pinia + Vue Router + Axios + SCSS 并自动导入 API 的基本设置。你可以根据自己的需求进一步配置和扩展。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值