elementUI+Springboot实现导出excel功能

前言

在前面,我们其实已经完成了elementUI+springboot的导入功能
elementUI+springboot导入excel
那么,现在也对这个导出功能进行一个汇总整理写出来
其实,导出功能相对导入功能还是比较简单,本次不需要考虑到后端

步骤

依赖包

首先,我们需要引入vue的依赖包
我用的是这个

npm install xlsx@^0.16.0
npm install file-saver@^2.0.2

其中xlsx依赖的作用为:将数据进行处理为excel工作簿
file-saver依赖的作用为:将文件进行一个保存导出来

element表格table

这里,实际上是用的elemenetUI的表格table标签,获取到数据,因此,我们需要对表格添加一个选择器
在我的项目中,我是添加了一个idexportExcel

<el-table :data="tableData" id="exportExcel" border style="width: 100%"></el-table>

tableData为自定义的接收后端传过来的数据的变量

引入包

然后,在你需要编写导出功能的页面,进行引入
具体如下:

import XLSX from "xlsx";
import FileSaver from "file-saver";

编写方法

以下代码中,有一个

var xlxsParam = { raw: true };

这个的作用是不对数据进行处理
主要目的是为了防止把日期这种数据处理掉,导致显示出错

    // 导出
    exportExcelData() {
      var xlxsParam = { raw: true };
      // 从表中生成工作簿
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#exportExcel"),
        xlxsParam
      );
      // 获取二进制字符串作为输出
      var wbOut = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象
          // Blob 表示的不一定是js的原生格式数据
          // File 接口基于Blob,
          // 返回一个新创建的Blob对象,其内容由参数中给定的数组串联
          new Blob([wbOut], { type: "application/octet-stream" }),
          // 导出文件名称
          "文件名称.xlsx"
        );
      } catch (e) {
      // 捕捉报错
        if (typeof console != "undefined") {
          console.log(e, wbOut);
        }
      }
      // 将结果返回出来,导出文件
      return wbOut;
    },

完整实例

完整实例如下:

<!--页面-->
<template>
  <div>
  <!--导出按钮-->
  <el-button type="primary" @click="exportExcelData()">导出</el-button>
  <!--table数据-->
      <el-table :data="tableData" id="exportExcel" border style="width: 100%">
      <el-table-column
        label="字段1"
        type="字段名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="字段2"
        label="字段名称"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
<template>
<!--逻辑-->
<script>
// 引入依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "newStaffRecord",
  data() {
    return {
      tableData: [], // 接收的后端数据变量
    };
  },
  methods: {
	    // 导出
    exportExcelData() {
      var xlxsParam = { raw: true };
      // 从表中生成工作簿
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#exportExcel"),
        xlxsParam
      );
      // 获取二进制字符串作为输出
      var wbOut = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象
          // Blob 表示的不一定是js的原生格式数据
          // File 接口基于Blob,
          // 返回一个新创建的Blob对象,其内容由参数中给定的数组串联
          new Blob([wbOut], { type: "application/octet-stream" }),
          // 导出文件名称
          "新人培训记录.xlsx"
        );
      } catch (e) {
        if (typeof console != "undefined") {
          console.log(e, wbOut);
        }
      }
      return wbOut;
    },
	}
}
</script>


最终导出结果

在我的项目需要做一个新人培训记录查询导入的功能,于是最终界面样式为这样
在这里插入图片描述
实际导出后的结果为:
在这里插入图片描述
为保持隐私,我把姓名数据去掉了
在这里插入图片描述

结语

以上为elementUI实现导出功能的过程

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI是一套基于Vue.js的组件库,而SheetJS是一个用于读写Excel文件的JavaScript库。如果想在Vue 3中使用Element UI和SheetJS来导出Excel文件,可以按照以下步骤进行: 首先,安装Element UI和SheetJS的依赖包。可以通过npm或yarn来安装这两个库。 ```bash npm install element-ui sheetjs ``` 接下来,在Vue的入口文件(main.js)中引入Element UI和SheetJS,并将其注册为全局组件。 ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import * as XLSX from 'xlsx' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.config.globalProperties.$xlsx = XLSX app.mount('#app') ``` 然后,在需要导出Excel的组件中,可以使用Element UI的按钮组件来触发导出操作。 ```vue <template> <div> <el-button @click="exportExcel">导出Excel</el-button> </div> </template> <script> import { ref } from 'vue' export default { methods: { exportExcel() { const worksheet = XLSX.utils.aoa_to_sheet([['Hello', 'World']]) const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') XLSX.writeFile(workbook, 'example.xlsx') } } } </script> ``` 在上面的示例代码中,我们在exportExcel方法中创建了一个SheetJS的工作表(worksheet),然后将其添加到工作簿(workbook)中,并将其写入一个名为"example.xlsx"的文件中。 最后,记得在组件中引入SheetJS库。 ```javascript import * as XLSX from 'xlsx' ``` 这样就完成了在Vue 3中使用Element UI和SheetJS导出Excel文件的操作。通过这种方式,我们可以方便地将数据导出Excel文件,实现更灵活的数据处理和展示。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值