代码编织梦想

前言

在前面,我们其实已经完成了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实现导出功能的过程

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xc9711/article/details/126655082

8.31总结 element-ui_公交及右转弯的博客-爱代码爱编程

一、选择         <el-select v-model="value" placeholder="请选择" @change="handleChange"> methods: { handleChange(value) { v.$message.error(value);

nodejs+vue+elementui图书在线阅读网站系统express_qq58850198的博客-爱代码爱编程

在线阅读系统前端技术:nodejs+vue+elementui是将在线阅读管理系统功能模块主要分为管理员模块。管理员添加读者管理、图书信息管理,出版社管理、我的收藏管理等操作 本系统结合计算机系统的结构、概念、模型、原理、方法,在计算机各种优势的情况下,采用Vue框架以及MYSQL数据库设计并实现的。在线阅读系统主要包括个人中心、读者管理、出版社管理、

vue(二)_lc的空间站的博客-爱代码爱编程

1.选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS

vue基础(九)——elementui_pro1822的博客-爱代码爱编程

一、介绍 ElementUI是一个基于Vue的UI框架。(bootstrap是基于jQuery的UI框架) 二、安装 1、下载依赖: npm i element-ui -S 2、在main.js中引入element-ui: import Vue from 'vue'; import ElementUI from 'element-ui

基于springboot+vue的公司员工工资资产管理系统 elementui_qqvx_6310855的博客-爱代码爱编程

主要对首页,个人中心,员工管理,部门管理,员工工资管理,工资调整管理,资产类别管理,固定资产管理,经营信息管理,序时账管理,年度利润管理,系统管理的实现。 这个系统的功能结构设计如图所示。 打开系统之后,首先是登陆界面,在

基于springboot+vue的新生宿舍管理系统 elementui_qq123311197的博客-爱代码爱编程

1、关于新生宿舍管理系统的基本要求 (1)功能要求:可以管理首页、个人中心、公告信息管理、院系管理、班级管理、学生管理、宿舍信息管理、宿舍安排管理、卫生检查管理、报修信息管理、报修处理管理、缴费信息管理等功能模块。 (2)性

基于springboot+vue的汽车租赁系统 elementui_qq123311197的博客-爱代码爱编程

随着社会的发展,计算机的优势和普及使得汽车租赁系统的开发成为必需。汽车租赁系统主要是借助计算机对汽车租赁信息等信息进行管理。减少管理员的工作,同时也方便广大用户对个人所需汽车租赁信息的及时查询以及管理。 汽车租赁系统的开发过

基于springboot+vue的大学生交友活动管理网站 elementui_qq123311197的博客-爱代码爱编程

随着我国社会的发展和信息科技的进步,当前大龄男女找不到合适的对象,结婚率低等问题已经不仅仅是个人问题,而是变成了当前社会的一个普遍现象[1]。 在过去几十年中大多数婚恋都是靠媒妁之言父母之命来决定。随着社会的进步和人们思想的

基于springboot+vue的论坛管理系统 elementui_q_6310855的博客-爱代码爱编程

本论文系统地描绘了整个网上论坛管理系统的设计与实现,主要实现的功能有以下几点:管理员;首页、个人中心、用户管理、公告管理、公告类型管理、热门帖子管理、帖子分类管理、留言板管理、论坛新天地、我的收藏管理、系统管理,前台首页;

基于springboot+vue的羽毛球购物销售商城 elementui_q_6310855的博客-爱代码爱编程

身体的健康一直是人们所重视和追求的,而随着信息时代的快速发展,各行各业日趋“白热化”阶段,越来越多的国民锻炼身体的时间也大大减少,那么身体自然会处于亚健康状态甚至更差。社会发展以人为本,国民的体质健康状况直接关系到中华民族的

基于springboot+vue的玩具销售商城网站 elementui_q_6310855的博客-爱代码爱编程

爱玩儿是所有孩子的天性。尤其是在婴幼儿阶段。选择一个好的玩具,不仅能够让孩子玩儿的开心,而且有助于孩子智力的开发。很多家长在选择玩具的时候,不知道选择什么样的玩具。且当前玩具市场的玩具鱼目混杂,种类繁多,而且有很多不良商家恶

基于springboot+vue的茶叶销售商城网站 elementui_q_6310855的博客-爱代码爱编程

随着社会的快速发展,计算机的影响是全面且深入的。人们生活水平的不断提高,日常生活中人们对茶叶销售商城方面的要求也在不断提高,购物的人数更是不断增加,使得茶叶销售商城的开发成为必需而且紧迫的事情。 茶叶销售商城主要牵扯到程序,

java基于springboot+vue的学生成绩管理系统 elementui_q_6310855的博客-爱代码爱编程

在我国,基本每一个人都会经历学生时代,在学生时代大家比较看重的一点就是学生的成绩。相较过去而言,当前的学生成绩一般都是信息化的管理系统再也不是以前的那种手动管理模式。信息化的管理模式不仅可以让学生可以看到自己的成绩信息,而且

vue项目实战之电商后台管理系统(八) 订单管理及数据统计模块_小陈工的博客-爱代码爱编程

前言 目录 前言一、订单管理模块1.1 新建订单管理组件1.2 订单管理模块效果图1.3 订单管理模块页面布局及展示数据1.4 点击修改按钮弹出修改地址对话框1.5 点击查询物流进度按钮弹出对话框 二、数据统计

移动端列表分页,删除交互优化_林梓阳的博客-爱代码爱编程

在小程序、H5等移动端中,列表的加载不同于PC端的表格,数据是分页显示的。 在移动端中,一般都是上滑加载新数据,但是不会切换显示已加载的上一页数据,而是拼接到底部。 该篇博客使用 Vue + elementUI 技术栈实

vue02模板语法_敢敢130的博客-爱代码爱编程

目录 一、插值 1.文本        {{msg}}   2.html    使用v-html指令用于输出html代码 3.属性   4.表达式 5. class 绑定 6.style 绑定  二、指令  核心指令 1.v-if/v-else/if/v-else  2. v-show 与 v-if 的区别 3. v-for 4

java基于ssm+vue+elementui楼盘房屋销售系统 前后端分离_q_6310855的博客-爱代码爱编程

楼盘房屋是人类居住是必须的一个环境。且因为我国城镇化比例比较高,所以当前有很多的人希望到城市购买相关的楼盘和房屋。以更方便享受城市的教育和医疗资源。也能够让需要房屋销售相关信息的人更快的获取到更加全面的楼盘和房屋相关信息我们

二次封装element select,通过computed计算属性解决v-爱代码爱编程

背景 项目中需要编写一个全局组件,继承element select,二次封装element select,不用重复去写封装组件数据的代码。这里面遇到了父子组件传递值不成功的问题,通过computed计算属性解决。 知识

vue+element 商品参数业务实现_element 实现配置参数页面-爱代码爱编程

 一开始提示用户只能为三级分类 设置相关参数 让用户选择分类 使用:级联选择器 一开始获取全部的分类: created() { this.getAllCate() }, // 获取全部的分类 async getAllCate(){ const {data:res} = await this