解决vue项目导出当前页Table为Excel

news2025/1/10 8:05:21

解决vue项目中导出当前页表格为Excel表格的方案



用到的技术:

  • Vue2
  • Element-ui
  • file-saver
  • xlsx

1、创建vue项目,安装element-ui

2、创建一个组件,组件内放入表格,和导出按钮

在这里插入图片描述

<template>
  <div>
    <!-- 导出的按钮 -->
    <el-button size="small" type="primary" icon="el-icon-download" @click="exportData"
      >导出</el-button
    >
    <!-- 表格数据 -->
    <el-table id="myTable" :data="tableData" style="width: 100%" border>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {}
    
</script>

<style scoped lang="less"></style>

3、安装导出表格需要的插件【xlsx 和 file-saver】

npm install --save xlsx file-saver

4、在main.js中引入安装的依赖

// 引入导出excel的插件
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
Vue.prototype.$FileSaver = FileSaver; //设置全局
Vue.prototype.$XLSX = XLSX; //设置全局

5、编写导出功能

 //导出功能
    exportData() {
      let excelName = '导出表格名称.xlsx'
      var xlsxParam = { raw: true } //转换成excel时,使用原始的格式
      // 克隆节点
      let tables = document.getElementById('myTable').cloneNode(true)
      // 判断是否为固定列,解决(为固定列时,会重复生成表格)
      if (tables.querySelector('.el-table__fixed') !== null) {
        tables.removeChild(tables.querySelector('.el-table__fixed'))
      }
      let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam)
      var table_write = this.$XLSX.write(table_book, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        this.$FileSaver.saveAs(
          new Blob([table_write], { type: 'application/octet-stream' }),
          excelName
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, table_write)
      }
      return table_write
    }

搞定!!!

完整代码

<template>
  <div>
    <!-- 导出的按钮 -->
    <el-button size="small" type="primary" icon="el-icon-download" @click="exportData"
      >导出</el-button
    >
    <!-- 表格数据 -->
    <el-table id="myTable" :data="tableData" style="width: 100%" border>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    //导出功能
    exportData() {
      let excelName = '导出表格名称.xlsx'
      var xlsxParam = { raw: true } //转换成excel时,使用原始的格式
      // 克隆节点
      let tables = document.getElementById('myTable').cloneNode(true)
      // 判断是否为固定列,解决(为固定列时,会重复生成表格)
      if (tables.querySelector('.el-table__fixed') !== null) {
        tables.removeChild(tables.querySelector('.el-table__fixed'))
      }
      let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam)
      var table_write = this.$XLSX.write(table_book, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        this.$FileSaver.saveAs(
          new Blob([table_write], { type: 'application/octet-stream' }),
          excelName
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, table_write)
      }
      return table_write
    }
  },
  components: {}
}
</script>

<style scoped lang="less"></style>

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1013996.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

阿里云交互式建模(PAI-DSW)训练并微调推理ChatGLM模型

参考内容为《轻量微调和推理ChatGLM模型实践》 点击“交互式建模&#xff08;DSW&#xff09;”&#xff0c;然后选择“创建实例” 写上实例名称&#xff0c;然后选择GPU规格&#xff0c;选择“ecs.gn6v-c8g1.2xlarge(8 vCPU&#xff0c;32GB)” 页面往下拉选择“pytorch:…

嵌入式-数据进制之间的转换

目录 一.简介 1.1十进制 1.2二进制 1.3八进制 1.4十六进制 二.进制转换 2.1二进制-十进制转换 2.2八进制-十进制转换 2.3十六进制-十进制转换 2.4十进制-二进制转换 2.5十进制-八进制转换 2.6十进制-十六进制转换 2.7小数部分转换 一.简介 被传入到计算机的数据要…

在macOS使用VMware踩过的坑

目录 MAC提示将对您的电脑造成伤害/MAC OS 升级到10.15.3后vmware虚拟机黑屏 mac系统下&#xff0c;vm虚拟机提示打不开/dev/vmmon mac VMware Workstation 在此主机上不支持嵌套虚拟化 mac VMware清理虚拟机空间 VMware Fusion 13在M2芯片的Mac上安装 Windows 11 首先需…

Android 12.0 SystemUI下拉状态栏定制化之隐藏下拉通知栏布局功能实现(二)

1.前言 在12.0的系统定制化开发中,由于从12.0开始SystemUI下拉状态栏和11.0的变化比较大,所以可以说需要从新分析相关的SystemUI的 布局,然后做分析来实现不同的功能,今天就开始实现关于隐藏SystemUI下拉状态栏中的通知栏布局系列二,去掉下拉状态栏中 通知栏部分 白色的…

LomBok常用注解及详细介绍

LomBok常用注解及详细介绍 前言 Lombok是一个作用于编辑器和构建工具的 Java 库&#xff0c;可以对编写的 Java 代码进行增强&#xff0c;比如说不用再写实体类的 getter 方法&#xff0c;equals 方法而是自动生成&#xff0c;自动生成日志输出变量等等&#xff0c;减少重复模…

C++ PrimerPlus 复习 第六章 分支语句和逻辑运算符

第一章 命令编译链接文件 make文件 第二章 进入c 第三章 处理数据 第四章 复合类型 &#xff08;上&#xff09; 第四章 复合类型 &#xff08;下&#xff09; 第五章 循环和关系表达式 第六章 分支语句和逻辑运算符 第六章 分支语句和逻辑运算符 if语句&#xff1b;逻辑…

笔记1.1 计算机网络基本概念

计算机网络是通信技术与计算机技术紧密结合的产物 通信系统模型&#xff1a; 计算机网络是一种通信网络 计算机网络是互连的、自洽的计算机集合。 互连&#xff1a;互联互通 自洽&#xff1a;无主从关系 通过交换网络互连主机 Internet&#xff1a;数以百万计的互连的计算设…

SpringCLoud——Nacos配置中心

Nacos实现配置管理 统一配置管理 配置更新热更新 统一配置的创建是在UI界面中完成的&#xff1a; 首先我们点击【配置管理】然后点击【配置列表】&#xff1a; 然后我们就看到了配置管理界面&#xff0c;但是此时这里是空的&#xff0c;我们可以创建一些配置文件&#xff1a…

(21)多线程实例应用:双色球(6红+1蓝)

一、需求 1.双色球: 投注号码由6个红色球号码和1个蓝色球号码组成。 2.红色球号码从01--33中选择,红色球不能重复。 3.蓝色球号码从01--16中选择。 4.最终结果7个号码&#xff1a;61&#xff1b;即33选6(红) 16选1(蓝) 5.产品: …

【MySQL索引学习】MySQL索引详细学习

一、什么是索引 索引是一种用于快速查询和检索数据的数据结构。 可以将其类比于书的目录。 索引底层的数据结构存在很多种类型&#xff0c;常见的索引结构有: B 树&#xff0c; B树 和 Hash、红黑树。在 MySQL 中&#xff0c;无论是 Innodb 还是 MyIsam&#xff0c;都使用了 …

如何在 Nginx 中隐藏版本号

文章目录 修改nginx.conf文件修改fastcgi.conf文件参考文档 修改nginx.conf文件 打开 Nginx 配置文件&#xff0c;一般在 /etc/nginx/nginx.conf 或 /usr/local/nginx/conf/nginx.conf。在 http 块中添加以下内容&#xff1a;server_tokens off;修改fastcgi.conf文件 编辑php…

kafka 消费者的消费策略以及再平衡1

一kafka 再平衡 1.1 kafka的再平衡 Kafka的再平衡是consumer所消费的topic发生变化时&#xff0c;topic上的分区再次分配的情况。 默认策略是 Range CooperativeSticky 。 Kafka 可以同时使用 多个分区分配策略。 1.2 kafka触发再平衡的情况 1.consumer group中的新增或删…

Windows系统webp图片预览插件

由于工作中经常需要对组图查看和管理&#xff0c;而Windows 7系统不支持在文件夹下直接预览webp图片。经过查找&#xff0c;发现 WebP Codec for Windows 扩展插件不错&#xff0c;完美地解决webp图片预览问题。 目录 1、webp文件浏览插件 2、下载插件并安装 3、浏览webp图片…

vue项目部署,出现两个ip的原因

我宁愿靠自己的力量打开我的前途,而不愿求有力者的垂青。——雨果 tags: 篇首语&#xff1a;本文由小常识网(cha138.com)小编为大家整理&#xff0c;主要介绍了vue项目部署&#xff0c;出现两个ip的原因相关的知识&#xff0c;希望对你有一定的参考价值。 参考技术A 在部署v…

Linux网络编程|TCP编程

一.网络基础 1.1网络发展史 Internet&#xff0d;“冷战”的产物 1957年10月和11月&#xff0c;前苏联先后有两颗“Sputnik”卫星上天 1958年美国总统艾森豪威尔向美国国会提出建立DARPA (Defense Advanced Research Project Agency)&#xff0c;即国防部高级研究计划署&#…

机器学习练习-决策树

机器学习练习-决策树 代码更新地址&#xff1a;https://github.com/fengdu78/WZU-machine-learning-course 代码修改并注释&#xff1a;黄海广&#xff0c;haiguang2000wzu.edu.cn 1&#xff0e;分类决策树模型是表示基于特征对实例进行分类的树形结构。决策树可以转换成一个if…

Jsoup | Document | HTML解析器

Jsoup 一、获取 <p>标签下的所有图片 一、获取 <p>标签下的所有图片 <p> <img style"max-width: 100%;" src"http://image.svipjf.cn/1678271098160-480_01.jpg"/><img src"http://image.svipjf.cn/1678271097994-480_02…

FPGA project: uart_rs485

没有设计rs485的顶层&#xff0c;因为我的另一块板子没有TTL信号转差分信号的芯片&#xff1a;MAX3485CSA module ctrl(input wire sys_clk ,input wire sys_rst_n ,input wire key_w ,input …

如何使用 RunwayML 进行创意 AI 创作

标题&#xff1a;如何使用 RunwayML 进行创意 AI 创作 介绍 RunwayML 是一个基于浏览器的人工智能创作工具&#xff0c;可让用户使用各种 AI 功能来生成图像、视频、音乐、文字和其他创意内容。RunwayML 的功能包括&#xff1a; * 图像生成&#xff1a;使用生成式对抗网络 (…

零基础也能快速上手活动海报设计

在现代社会中&#xff0c;活动海报设计已经成为推广活动、宣传信息的重要手段之一。然而&#xff0c;对于大部分人来说&#xff0c;设计一张漂亮的海报可能会觉得困难重重。不过&#xff0c;不用担心&#xff01;现在有了乔拓云&#xff0c;零基础的你也能轻松上手活动海报设计…