前言

在实际开发中导出通常是后端来写的，但一些简单的excel导出前端是完全可以做到的，这里给大家介绍一下，我个人偏向第一款插件。

1. vue-json-excel插件

1.1 下载插件vue-json-excel

npm install vue-json-excel3

1.2 在main.js中全局引入

import { createApp } from 'vue'
const app = createApp({})
import JsonExcel from "vue-json-excel3";
app.component("downloadExcel", JsonExcel);

1.3 使用

<download-excel :data="excelpage" :fields="json_fields" name="filename.xls">
    <el-button type="primary">下载excel</el-button>
</download-excel>


<script setup>
import { ref } from 'vue'
// 导出excel的相关数据    正常应该是请求出来的表格数据，这里方便测试写了静态数据
let excelpage = ref([
  {
    student_id: '1',
    student_name: '张三',
    student_majorclass: '计算机科学与技术1班',
    student_score: 90,
    specialty: '编程语言',
  },
  {
    student_id: '2',
    student_name: '李四',
    student_majorclass: '计算机科学与技术5班',
    student_score: 20,
    specialty: '数据库系统',
  }
])  
// 定义导出的表头
let json_fields = ref({
  学号: "student_id",    //常规字段
  姓名: "student_name", //支持嵌套属性
  专业班级: "student_majorclass",
  成绩: "student_score",
  特长: "specialty",
})

</script>

2. SheetJs插件

2.1下载SheetJs插件

npm install xlsx --save

2.2引入插件

import XLSX from 'xlsx';

2.3自定义EXCEL文件的表头和表体数据

//导出事件
let excel=()=>{
console.log(data1.value);// 数据源

let tabdata1 = JSON.parse(JSON.stringify(data1.value))
let chu = []
// 自定义EXCEL表的表体数据  对数据源进行处理，并放入新的数组中，使其变成二维数组的形式
tabdata1.forEach((item, index) => {
    chu.push([`${index + 1}`, item.Date, item.Worktime, '', '', '', '', '', item.hejiCount])
    if (item.children.length > 0) {
        item.children.forEach((items, idx) => {
            chu.push([index + 1 + '.' + (idx + 1), '', '', items.zhiId, items.Machine, items.Type, items.Count, items.Remark, ''])
        })
    }
})
console.log(chu);
// chu是我们处理好的EXCEL文件数据，一般是一个二维数组的形式,形如[['班级'，'性别','爱好'],['8.1班'，'男','游泳'],['8.6'，'女','画画']]
// 第一个是EXCEL表第一行的表头，剩下的按照顺序是EXCEL表的表体数据   
chu.unshift(['序号', '日期', '工时', '制工单号', '机型', '型号', '数量', '备注', '合计数量'])//EXCEL表第一行的表头
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.aoa_to_sheet(chu);
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
XLSX.writeFile(workbook, 'example.xlsx');

}

小结

工作好累，想摸鱼。