当前位置: 首页 > news >正文

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

解决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>

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

相关文章:

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

解决vue项目中导出当前页表格为Excel表格的方案 用到的技术&#xff1a; Vue2Element-uifile-saverxlsx 1、创建vue项目&#xff0c;安装element-ui 2、创建一个组件&#xff0c;组件内放入表格&#xff0c;和导出按钮 <template><div><!-- 导出的按钮 -->…...

C++设计模式_04_Strategy 策略模式

接上篇&#xff0c;本篇将会介绍C设计模式中的Strategy 策略模式&#xff0c;和上篇模板方法Template Method一样&#xff0c;仍属于“组件协作”模式&#xff0c;它与Template Method有着异曲同工之妙。 文章目录 1. 动机&#xff08; Motivation&#xff09;2. 代码演示Stra…...

目标检测YOLO实战应用案例100讲-基于YOLOv3多模块融合的遥感目标检测(中)

目录 2.2.3 YOLO 2.3 目标检测算法分析 2.3.1 目标检测结果评价指标...

element 表格fixed列高度无法100%

下文提到的滚动条皆为横向滚动条错误方法&#xff08;旧方法&#xff0c;点击查看旧博客&#xff09; 一下代码虽然能解决fixed列高度无法100%问题&#xff0c;但是会出现fixed列下面的滚动条无法被点击的问题&#xff08;被fixed列遮挡&#xff09;&#xff0c;所以该方法并不…...

【接口自动化测试】Eolink Apilkit 安装部署,支持 Windows、Mac、Linux 等系统

Eolink Apikit 有三种客户端&#xff0c;可以依据自己的情况选择。三种客户端的数据是共用的&#xff0c;因此可以随时切换不同的客户端。 我们推荐使用新推出的 Apikit PC 客户端&#xff0c;PC 端拥有线上产品所有的功能&#xff0c;并且针对本地测试、自动化测试以及使用体…...

解决sass问题:npm ERR! node-sass@9.0.0 postinstall: `node scripts/build.js`

目录 一、遇到问题 解决办法 二、 再次遇到问题 解决办法 题外话 一、遇到问题 1.运行这个项目的适合&#xff0c;遇到了没有sass的问题 解决办法 然后就用命令下载sass npm install node-sass 二、 再次遇到问题 2.下载sass的时候又发现了一个这样的问题 npm ER…...

Python技巧---tqdm库的使用

文章目录 一、tqdm基本知识二、在pytorch中使用tqdm 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、tqdm基本知识 “tqdm” 是一个 Python 库&#xff0c;用于在命令行界面中创建进度条。 基本使用如下&#xff1a; from tqdm import tqdm impor…...

linux-线程条件变量(cond)

概述 与互斥锁不同&#xff0c;条件变量是用来等待而不是用来上锁的。条件变量用来自动阻塞一个线程&#xff0c;直到某特殊情况发生为止。通常条件变量和互斥锁同时使用 。 条件变量使我们可以睡眠等待某种条件出现。条件变量是利用线程间共享的全局变量进行同步的一种机制&a…...

面试算法6:排序数组中的两个数字之和

题目 输入一个递增排序的数组和一个值k&#xff0c;请问如何在数组中找出两个和为k的数字并返回它们的下标&#xff1f;假设数组中存在且只存在一对符合条件的数字&#xff0c;同时一个数字不能使用两次。例如&#xff0c;输入数组[1&#xff0c;2&#xff0c;4&#xff0c;6&…...

【智能家居-大模型】构建未来,聆思大模型智能家居交互解决方案正式发布

LISTENAI 近日&#xff0c;国内11家大模型陆续通过《生成式人工智能服务管理暂行办法》备案&#xff0c;多家大模型产品已正式开放&#xff0c;激发了新一轮大模型热潮。大模型在自然语言理解方面的巨大突破&#xff0c;实现了认知智能的技术跃迁&#xff0c;带来了时代的智慧…...

通讯网关软件002——利用CommGate X2HTTP-U实现HTTP访问OPC UA Server

本文介绍利用CommGate X2HTTP-U实现HTTP访问OPC UA Server。CommGate X2HTTP是宁波科安网信开发的网关软件&#xff0c;软件可以登录到网信智汇(wangxinzhihui.com)下载。 【案例】如下图所示&#xff0c;实现上位机通过HTTP来获取OPC UA Server的数据。 【解决方案】设置网关机…...

模拟经营类游戏是怎么开发的?

模拟经营类游戏开发是一个充满挑战但也充满乐趣的领域。下面是一些步骤和关键考虑因素&#xff0c;可以帮助您开始开发自己的模拟经营游戏&#xff1a; 明确游戏概念&#xff1a; 确定游戏开发的主题和类型&#xff0c;例如城市建设、农场经营、餐厅经营等。 制定一个引人入胜…...

基于JAVA+SSM+微信小程序+MySql的图书捐赠管理系统设计与实现

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 在当今社会&#xff0…...

软件设计模式系列之六——单例模式

1 模式的定义 单例模式&#xff08;Singleton Pattern&#xff09;是一种常见的创建型设计模式&#xff0c;其主要目的是确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取该实例。这意味着无论何时何地&#xff0c;只要需要该类的实例&#xff0c;都会返回同一个…...

verdi dump状态机的波形时直接显示状态名

前段时间看到别人用verdi看状态机的波形时&#xff0c;可以显示定义的状态参数&#xff0c;觉得很有意思&#xff0c;特地学习了一下 通常拉出状态机信号的波形是下面这样的 这种信号&#xff0c;我们要想知道每个数值代表的状态&#xff0c;还需要跟定义的parameter比对 像这…...

代码随想录算法训练营19期第53天

1143.最长公共子序列 视频讲解&#xff1a;动态规划子序列问题经典题目 | LeetCode&#xff1a;1143.最长公共子序列_哔哩哔哩_bilibili 代码随想录 初步思路&#xff1a;动态规划。 总结&#xff1a; dp[i][j] &#xff1a;长度为[0, i - 1]的字符串A与长度为[0, j - 1]…...

二刷力扣--栈和队列

栈和队列 栈和队列基础&#xff08;Python&#xff09; 栈一种先进后出&#xff0c;队列先进后出。 Python中可以用list实现栈&#xff0c;用append()模拟入栈&#xff0c;用pop()模拟出栈。 也可以用list实现队列&#xff0c;但是效率较低&#xff0c;一般用collections.deq…...

第六章 图 十、关键路径

开始顶点&#xff08;源点)&#xff1a; 在AOE网中仅有一个入度为0的顶点&#xff0c;称为开始顶点&#xff08;源点)&#xff0c;它表示整个工程的开始; 结束顶点&#xff08;汇点)&#xff1a; 也仅有一个出度为0的顶点&#xff0c;称为结束顶点&#xff08;汇点)&#xf…...

Virtualbox固定存储硬盘转换为动态存储硬盘

现象 一开始分配固定存储过大&#xff0c;占了太多空间&#xff0c;现在想换成动态存储释放空闲空间。 解决 关闭虚拟机进入虚拟介质管理从使用的硬盘复制出一个动态存储硬盘在设置中把硬盘替换为副本硬盘 详细步骤参考&#xff1a; https://blog.csdn.net/qq_24033983/arti…...

【栈与队列面试题】有效的括号(动图演示)

leetcode20.括号匹配问题 前言&#xff1a; &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨刷题专栏:http://t.csdn.cn/UlvTc ⛳⛳本篇内容:力扣上栈与队列的面试OJ题目 目录 leetcode20.括号匹配问题 1.问题描…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...