vue 纯前端导出 Excel

方法一:

1、安装"file-saver"

npm i -S file-saver xlsx

2、引入

在需要导出功能的 .vue 文件中引入

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

3、简单示例(复制即可食用): 

<template><div><div class="buttons"><button class="custom-btn btn-5" @click="exportExcel"><span>导出excel文件</span></button></div><el-table id="table-box" resizable show-overflow :data="tableData" border><el-table-column type="index" label="序号" width="50"></el-table-column><el-table-columnprop="name"label="姓名"width="200":show-overflow-tooltip="true"align="center"></el-table-column><el-table-columnprop="sex"label="性别"width="200":show-overflow-tooltip="true"align="center"></el-table-column></el-table></div>
</template><script>
import FileSaver from "file-saver";
import XLSX from "xlsx";export default {data() {return {tableData: [{ id: 10001, name: "张三", sex: "男" },{ id: 10002, name: "李四", sex: "男" },{ id: 10003, name: "王五", sex: "男" },],};},mounted() {},methods: {getCurrentDate() {const today = new Date();let date = today.getFullYear() + "-";date += (today.getMonth() + 1).toString().padStart(2, "0") + "-";date += today.getDate().toString().padStart(2, "0");return date;},// 定义导出Excel表格事件exportExcel() {const timeInfo = this.getCurrentDate();var xlsxParam = { raw: true };let abc = document.querySelector("#table-box");console.log(abc);/* 从表生成工作簿对象 */var wb = XLSX.utils.table_to_book(document.querySelector("#table-box"),xlsxParam);// 给每一列 设置宽度大小wb["Sheets"]["Sheet1"]["!cols"] = [{ wpx: 60 }, // 1{ wpx: 60 }, // 2{ wpx: 100 }, // 3{ wpx: 100 }, // 4{ wpx: 60 }, // 5{ wpx: 60 }, // 6{ wpx: 60 }, // 7{ wpx: 60 }, // 8{ wpx: 60 }, // 7{ wpx: 60 }, // 8];/* 获取二进制字符串作为输出 */var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array",});try {FileSaver.saveAs(// Blob 对象表示一个不可变、原始数据的类文件对象。// Blob 表示的不一定是JavaScript原生格式的数据。// File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。// 返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。new Blob([wbout], { type: "application/octet-stream" }),// 设置导出文件名称"自定义查询导出" + timeInfo + ".xlsx");} catch (e) {if (typeof console !== "undefined") console.log(e, wbout);}return wbout;},},
};
</script>
<style lang="scss" scoped>
.buttons {margin-bottom: 10px;
}
.custom-btn {width: 130px;height: 40px;color: #fff;border-radius: 5px;padding: 10px 25px;font-family: "Lato", sans-serif;font-weight: 500;background: transparent;cursor: pointer;transition: all 0.3s ease;position: relative;display: inline-block;box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);outline: none;
}
.btn-5 {width: 130px;height: 40px;line-height: 42px;padding: 0;border: none;background: rgb(255, 27, 0);background: linear-gradient(0deg,rgba(255, 27, 0, 1) 0%,rgba(251, 75, 2, 1) 100%);
}
.btn-5:hover {color: #f0094a;background: transparent;box-shadow: none;
}
.btn-5:before,
.btn-5:after {content: "";position: absolute;top: 0;right: 0;height: 2px;width: 0;background: #f0094a;box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003,4px 4px 5px 0px #0002;transition: 400ms ease all;
}
.btn-5:after {right: inherit;top: inherit;left: 0;bottom: 0;
}
.btn-5:hover:before,
.btn-5:hover:after {width: 100%;transition: 800ms ease all;
}
</style>

方法二:

1、安装"vue-json-excel"

npm install vue-json-excel -S

2、在项目的入口文件(main.js)中引入

import Vue from 'vue'
import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)

3、简单示例(复制即可食用):

<template><div><el-row><el-col :span="6"> </el-col><el-col :span="12"><h1>{{ msg }}</h1><download-excelv-if="json_data.length >= 0"class="el-button":data="json_data":fields="json_fields"worksheet="My Worksheet"name="用户信息列表">导出Excel</download-excel></el-col><el-col :span="6"> </el-col></el-row><el-table :data="json_data" border style="width: 100%"><el-table-column prop="type" label="序号" align="center" width="180"></el-table-column><el-table-column prop="userName" label="姓名" align="center" width="180"></el-table-column><el-table-column prop="age" align="center" label="年龄"></el-table-column><el-table-column prop="phone" align="center" label="手机号"></el-table-column><el-table-column prop="createTime" align="center" label="注册时间"></el-table-column></el-table></div>
</template><script>
import JsonExcel from "vue-json-excel";export default {name: "HelloWorld",components: {downloadExcel: JsonExcel,},data() {return {msg: "使用vue-json-excel插件导出Excel",json_fields: {//导出Excel表格的表头设置序号: "type",姓名: "userName",年龄: "age",手机号: "phone",注册时间: "createTime",},json_data: [{userName: "张三",age: 18,phone: 15612345612,createTime: "2019-10-22",},{userName: "李四",age: 17,phone: 15612345613,createTime: "2019-10-23",},{userName: "王五",age: 19,phone: 15612345615,createTime: "2019-10-25",},{userName: "赵六",age: 18,phone: 15612345618,createTime: "2019-10-15",},],};},created() {this.initList();},methods: {initList() {for (let i in this.json_data) {this.json_data[i].type = parseInt(i) + 1;}},},
};
</script>
<style scoped>
.el-button {background-color: lightskyblue;
}
</style>

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

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

相关文章

高斯数据库与MySQL数据库的区别

高斯数据库与MySQL数据库的区别 在当今数据驱动的时代&#xff0c;选择合适的数据库管理系统&#xff08;DBMS&#xff09;对于项目的成功至关重要。高斯数据库和MySQL作为两款广泛使用的数据库系统&#xff0c;各自具有独特的特点和优势&#xff0c;适用于不同的应用场景。本…

Mac玩Steam游戏秘籍!

Mac玩Steam游戏秘籍&#xff01; 大家好&#xff01;最近有不少朋友在用MacBook玩Steam游戏时遇到不支持mac的问题。别担心&#xff0c;我来教你如何用第三方工具Crossover来畅玩这些不支持的游戏&#xff0c;简单又实用&#xff01; 第一步&#xff1a;下载Crossover 首先&…

深入剖析 Wireshark:网络协议分析的得力工具

在网络技术的广阔领域中&#xff0c;网络协议分析是保障网络正常运行、优化网络性能以及进行网络安全防护的关键环节。而 Wireshark 作为一款开源且功能强大的网络协议分析工具&#xff0c;在网络工程师、安全专家以及网络技术爱好者中广受欢迎。本文将深入介绍 Wireshark 的功…

【网络篇】IP知识

IPv4首部与IPv6首部 IPv4相对于IPv6的好处&#xff1a; 1.IPv6可自动配置&#xff0c;即使没有DHCP服务器也可以实现自动分配IP地址&#xff0c;实现即插即用。 2.IPv6包首部长度采用固定40字节&#xff0c;删除了选项字段&#xff0c;以及首部校验和&#xff0c;简化了首部…

深度学习中的模块复用原则(定义一次还是多次)

文章目录 1. 模块复用的核心原则&#xff08;1&#xff09;模块是否有**可学习参数**&#xff08;2&#xff09;模块是否有**内部状态**&#xff08;3&#xff09;模块的功能需求是否一致 2. 必须单独定义的模块&#xff08;1&#xff09;nn.Linear&#xff08;全连接层&#x…

我的年度总结

这一年的人生起伏&#xff1a;从曙光到低谷再到新的曙光 其实本来没打算做年度总结的&#xff0c;无聊打开了帅帅的视频&#xff0c;结合自己最近经历的&#xff0c;打算简单聊下。因为原本打算做的内容会是一篇比较丧、低能量者的呻吟。 实习生与创业公司的零到一 第一段工…

【Javascript Day8】计算机存储方式、方法定义方式、作用域、预解析、对象

目录 计算机存储方式 方法的定义方式 声明式方法 表达式方式方法 作用域 变量作用域对代码影响 1. 全局变量和局部变量重名 2. 方法内不使用 var 定义变量对全局变量的影响 3. 变量名和参数名重复 4. 作用域链 &#xff1a;作用域嵌套产生的作用域父子子孙关系 5. 嵌套作…

Vue脚手架开发 Vue2基础 VueRouter的基本使用 vue-router路由案例

vue-router路由 Vue脚手架开发&#xff0c;创建项目&#xff1a;https://blog.csdn.net/c_s_d_n_2009/article/details/144973766 Vue Router&#xff0c;Vue Router | Vue.js 的官方路由&#xff0c;Vue.js 的官方路由&#xff0c;为 Vue.js 提供富有表现力、可配置的、方便…

Windows远程桌面网关出现重大漏洞

微软披露了其Windows远程桌面网关&#xff08;RD Gateway&#xff09;中的一个重大漏洞&#xff0c;该漏洞可能允许攻击者利用竞争条件&#xff0c;导致拒绝服务&#xff08;DoS&#xff09;攻击。该漏洞被标识为CVE-2025-21225&#xff0c;已在2025年1月的补丁星期二更新中得到…

c语言----------内存管理

内存管理 目录 一。作用域1.1 局部变量1.2 静态(static)局部变量1.3 全局变量1.4 静态(static)全局变量1.5 extern全局变量声明1.6 全局函数和静态函数1.7 总结 二。内存布局2.1 内存分区2.2 存储类型总结2.3内存操作函数1) memset()2) memcpy()3) memmove()4) memcmp() 2.4 堆…

【2024年华为OD机试】 (C卷,100分)- 堆栈中的剩余数字(Java JS PythonC/C++)

一、问题描述 题目描述 向一个空栈中依次存入正整数&#xff0c;假设入栈元素 n(1<n<2^31-1)按顺序依次为 nx…n4、 n3、n2、 n1, 每当元素入栈时&#xff0c;如果 n1n2…ny(y 的范围[2,x]&#xff0c; 1<x<1000)&#xff0c;则 n1~ny 全部元素出栈&#xff0c;重…

docker 与K8s的恩怨情仇

Docker 和 Kubernetes&#xff08;通常简称为 K8s&#xff09;是容器化和容器编排领域的两大重要工具&#xff0c;它们在技术生态中扮演着不同的角色&#xff0c;并且有着密切的关系。虽然有时候人们会讨论它们之间的关系&#xff0c;但实际上它们更多的是互补而不是对立。下面…

Java安全—SPEL表达式XXESSTI模板注入JDBCMyBatis注入

前言 之前我们讲过SpringBoot中的MyBatis注入和模板注入的原理&#xff0c;那么今天我们就讲一下利用以及发现。 这里推荐两个专门研究java漏洞的靶场&#xff0c;本次也是根据这两个靶场来分析代码&#xff0c;两个靶场都是差不多的。 https://github.com/bewhale/JavaSec …

51单片机入门基础

目录 一、基础知识储备 &#xff08;一&#xff09;了解51单片机的基本概念 &#xff08;二&#xff09;掌握数字电路基础 &#xff08;三&#xff09;学习C语言编程基础 二、开发环境搭建 &#xff08;一&#xff09;硬件准备 &#xff08;二&#xff09;软件准备 三、…

基于R计算皮尔逊相关系数

# 基于R计算皮尔逊相关系数 # 函数 基本基本函数 cor.test ## 两组数据读入 xread.csv("1.csv",header T) yread.csv("2.csv",header T) ## 计算 cor.test(1,2,method"pearson") 结果 Pearsons product-moment correlationdata: 1 and 2…

基于Java的百度AOI数据解析与转换的实现方法

目录 前言 一、AOI数据结构简介 1、官网的实例接口 2、响应参数介绍 二、Java对AOI数据的解析 1、数据解析流程图 2、数据解析实现 3、AOI数据解析成果 三、总结 前言 在当今信息化社会&#xff0c;地理信息数据在城市规划、交通管理、商业选址等领域扮演着越来越重要的…

【WEB】网络传输中的信息安全 - 加密、签名、数字证书与HTTPS

文章目录 1. 概述2. 网络传输安全2.1.什么是中间人攻击2.2. 加密和签名2.2.1.加密算法2.2.2.摘要2.2.3.签名 2.3.数字证书2.3.1.证书的使用2.3.2.根证书2.3.3.证书链 2.4.HTTPS 1. 概述 本篇主要是讲解讲一些安全相关的基本知识&#xff08;如加密、签名、证书等&#xff09;&…

shell练习2

需求&#xff1a;判断192.168.1.0/24网络中&#xff0c;当前在线的ip有哪些&#xff0c;并编写脚本打印出来。 #!/bin/bashnmap -sn 192.168.1.0/24 | grep Nmap scan report for | awk {print $5} 注意&#xff1a;当运行 bash ip.sh 时出现 nmap: command not found 的错误…

【运维自动化-作业平台】魔法变量到底如何使用之主机列表类型

蓝鲸作业平台&#xff0c;以下简称作业平台或JOB平台 魔法变量&#xff1a;JOB平台执行引擎提供的特有的变量能力用法 脚本中使用&#xff0c;并且需要事先声明&#xff1a;job_import {{变量名}} 声明后&#xff0c;同样是使用 dollar 符 大括号&#xff1a;${变量名}来取值…

活动预告 | CCF开源发展委员会开源供应链安全技术研讨会(2025第一期)——“大模型时代的开源供应链安全风控技术”...

点击蓝字 关注我们 CCF Opensource Development Committee CCF开源发展委员会开源供应链安全工作组&#xff08;以下简称CCF-ODC-OSS&#xff09;将于1月17日下午在北京黄大年茶思屋举行2025年第一期开源供应链安全技术研讨会&#xff0c;此次研讨会主题为“大模型时代的开源供…