vue实现导出列表为xlsx文件

1.安装依赖

npm install --save xlsx file-saver

2.引入依赖

import FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

3.代码实现

<el-button type="primary" @click="exportData">导出数据</el-button><el-tableid="table_excel"v-loading="loading":data="tableData"style="width: 100%"height="600"><el-table-column prop="name" label="单位名称" /><el-table-column prop="sjzl" label="事件总量" /><el-table-column prop="fqsjs" label="发起事件数" /><el-table-column prop="czsjs" label="处置事件数" /><el-table-column prop="qss" label="签收数" /><el-table-column prop="qsl" label="签收率" /><el-table-column prop="qshgl2" label="签收合格率( 2min)" /><el-table-column prop="qshgl5" label="签收合格率( 5min)" /><el-table-column prop="czs" label="处置数" /><el-table-column prop="czl" label="处置率" /><el-table-column prop="czhgl5" label="处置合格率( 5min)" /><el-table-column prop="pjczys" label="平均处置用时(自然时)" width="160" /><el-table-column prop="bjs" label="办结数" /><el-table-column prop="bjl" label="办结率" /><el-table-column prop="aqbjs5" label="按期办结数( 5个工作日)" width="170" /><el-table-column prop="aqbjs8" label="按期办结数( 8个自然日)" width="170" /><el-table-column prop="aqbjl5" label="按期办结率( 5个工作日)" width="170" /><el-table-column prop="aqbjl8" label="按期办结率( 8个自然日)" width="170" /><el-table-column prop="cqbjs5" label="超期办结数( 5个工作日)" width="170" /><el-table-column prop="cqbjs8" label="超期办结数( 8个自然日)" width="170" /><el-table-column prop="cqbjl5" label="超期办结率( 5个工作日)" width="170" /><el-table-column prop="cqbjl8" label="超期办结率( 8个自然日)" width="170" /><el-table-column prop="pjbjys" label="平均办结用时(自然时)" /></el-table>
    exportData() {console.log('exportData');this.$confirm('确定要导出表格数据吗', '导出提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'info',}).then(() => {setTimeout(() => {const tables = document.getElementById('table_excel');const table_book = XLSX.utils.table_to_book(tables, { raw: true });const table_write = XLSX.write(table_book, {bookType: 'xlsx',bookSST: true,type: 'array',});try {FileSaver.saveAs(new Blob([table_write], { type: 'application/octet-stream' }), 'Data.xlsx');} catch (e) {if (typeof console !== 'undefined') {console.log(e, table_write);}}return table_write;}, 1000);});}

4.实现效果

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

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

相关文章

怎样在Linux搭建NTP服务器

搭建 NTP&#xff08;Network Time Protocol&#xff09;服务器可以帮助你在局域网内提供时间同步服务&#xff0c;让网络中的设备都使用统一的时间。以下是在 Linux 系统上搭建 NTP 服务器的基本步骤&#xff1a; 安装 NTP 服务器软件&#xff1a; 在终端中执行以下命令安装 N…

RISC-V单板计算机模拟和FPGA板多核IP实现

&#x1f3af;要点 &#x1f3af;使用单板计算机 Visionfive 2 或模拟器测试RISC-V汇编&#x1f3af;RISC-V汇编加载和算术。&#x1f3af;使用GNU MAKE汇编RISC-V指令&#xff0c;ESP32使用CMake编译执行指令。&#x1f3af;RISC-V汇编功能和使用释义&#xff1a;控制指令&am…

JavaSE阶段十组易混淆概念总结

目录 &#x1f4cc; & 与 && &#x1f4cc; this 与 super &#x1f4cc; 方法重载与重写 &#x1f4cc; 抽象类与接口 &#x1f4cc; "" 与 equals &#x1f4cc; String 与 StringBuffer &#x1f4cc; HashSet 与 HashMap &#x1f4cc; Coll…

【CANN训练营笔记】Atlas 200I DK A2体验手写数字识别模型训练推理

环境介绍 开发板&#xff1a;Huawei Atals 200I DK A2 内存&#xff1a;4G NPU&#xff1a;Ascend 310B4 CANN&#xff1a;7.0 准备环境 下载编译好的torch_npu wget https://obs-9be7.obs.cn-east-2.myhuaweicloud.com/wanzutao/torch_npu-2.1.0rc1-cp39-cp39-linux_aarch…

烂笔头笔记:Windows 11下照片查看器显示偏色问题修复

本文出处&#xff1a;http://blog.csdn.net/chaijunkun/article/details/137278931&#xff0c;转载请注明。由于本人不定期会整理相关博文&#xff0c;会对相应内容作出完善。因此强烈建议在原始出处查看此文。 最近在研究HDR视频的截图算法&#xff0c;目的就是生成色彩正确…

基于Springboot + MySQL + Vue 大学新生宿舍管理系统 (含源码)

目录 &#x1f4da; 前言 &#x1f4d1;摘要 &#x1f4d1;操作流程 &#x1f4da; 系统架构设计 &#x1f4da; 数据库设计 &#x1f4ac; 管理员信息属性 &#x1f4ac; 学生信息实体属性 &#x1f4ac; 宿舍安排信息实体属性 &#x1f4ac; 卫生检查信息实体属性 &…

pytest--python的一种测试框架--接口测试

接口测试 工具&#xff1a; POSTMAN&#xff1b; 接口选择&#xff1a; 豆瓣电影&#xff0c;进制数据 POSTMAN下载&#xff1a; 1.POSTMAN官网&#xff1a;https://www.postman.com/products/&#xff1b; 2.点product选Download Postman 下载完之后双击打开就可以用的。…

C 从函数返回指针

我们已经了解了 C 语言中如何从函数返回数组&#xff0c;类似地&#xff0c;C 允许您从函数返回指针。为了做到这点&#xff0c;您必须声明一个返回指针的函数&#xff0c;如下所示&#xff1a; int * myFunction() { . . . }另外&#xff0c;C 语言不支持在调用函数时返回局部…

Element-Plus日期选择组件封装农历日期

背景 在使用element-plus开发项目过程中&#xff0c;需要填入人员的生卒日期&#xff0c;经观察&#xff0c;对于大部分人来说&#xff0c;这类日期通常是农历日期&#xff0c;然而我们在系统建设过程中&#xff0c;对于日期字段&#xff0c;约定成俗的都会使用公历日期&#…

Lecture 1 - Introduction

Lecture 1 - Introduction MIT 6.824 Distributed Systems 1、概念预览 分布式系统需要考虑的因素&#xff1a; Parallelism &#xff1a;并行性Fault tolerence &#xff1a;容错性Physicial &#xff1a;不同系统之间物理距离引起的通信问题Security &#xff1a;不同的计…

封装一个vue3的公共组件

在Vue 3中&#xff0c;封装公共组件的场景包括但不限于以下几种情况&#xff1a; 重复使用的组件&#xff1a;如果你发现某个组件在多个地方重复使用&#xff0c;那么将其封装成公共组件是很有意义的。比如&#xff0c;页面中的各种表单控件&#xff08;输入框、下拉框、日期选…

MySQL 数据学习笔记速查表(视图、存储过程、事务)

文章目录 十三、视图1、视图是什么&#xff1f;2、视图的特性&#xff1f;3、视图的作用&#xff1f;4、视图的用途&#xff1f;5、视图的使用&#xff1f;1、基本语法2、创建视图3、调用视图4、视图练习(1) 利用试图简化复杂的联结(2) 利用视图重新格式化检索出的数据(3) 利用…

Django详细教程(一) - 基本操作

文章目录 前言一、安装Django二、创建项目1.终端创建项目2.Pycharm创建项目&#xff08;专业版才可以&#xff09;3.默认文件介绍 三、创建app1.app介绍2.默认文件介绍 四、快速上手1.写一个网页步骤1&#xff1a;注册app 【settings.py】步骤2&#xff1a;编写URL和视图函数对…

npm发布自己的插件包

发布npm包 新建文件目录例如npm-test&#xff0c;目录中打开命令行初始化package.json文件 npm init name&#xff1a;作为发布包的名字 version&#xff1a;版本号 main&#xff1a;入口文件名 {"name": "name202403311748","version": "…

Node爬虫:原理简介

在数字化时代&#xff0c;网络爬虫作为一种自动化收集和分析网络数据的技术&#xff0c;得到了广泛的应用。Node.js&#xff0c;以其异步I/O模型和事件驱动的特性&#xff0c;成为实现高效爬虫的理想选择。然而&#xff0c;爬虫在收集数据时&#xff0c;往往面临着诸如反爬虫机…

OSPF-基础、虚链路、overflow,缺省

OSPF 1、OSPF基础 2、区域内的路由计算 3、区域间的路由计算&#xff08;矢量&#xff09;&#xff08;区域间的防环原则&#xff09; 3.1、非骨干区域都与骨干区域相连。 3.2、骨干区域不会接收非骨干的3类LSA。 3.3、无论COST&#xff0c;1类LSA总是由于3类LSA。 ABR&…

如何读毛选

原因 这就涉及到mx该怎么读这个问题。拿起书来&#xff0c;凭着一股子热情&#xff0c;就一页页往下读可行吗&#xff1f;我想大概会半途而废&#xff0c;原因有二。 其一&#xff0c;mx中蕴含的思想是具有恒久价值的&#xff0c;但一定的思想必须通过一定的文字表达出来&#…

我爱我缓慢向上的勇气

勇气的觉醒 曾经&#xff0c;我也像许多人一样&#xff0c;害怕失败&#xff0c;害怕被人嘲笑&#xff0c;害怕面对困难。每当遇到挑战&#xff0c;我的内心就会充满恐惧和犹豫。但是&#xff0c;随着时间的推移&#xff0c;我逐渐意识到&#xff0c;这些恐惧和犹豫并不能帮助…

数据结构--稀疏数组

package com.dhu.sparsearray;public class SparseArrsy {public static void main(String[] args) {int chessArr1[][] new int[11][11];chessArr1[1][2] 1;chessArr1[2][3] 2;chessArr1[3][4] 11;System.out.printf("原始二维数组");for (int[] row : chessArr…

快消企业数字化转型实战解析:探寻未来增长新动力

2024年&#xff0c;快消行业正站在数字化转型的风口浪尖。 “今年是过去十年最差的一年&#xff0c;但却可能是未来十年最好的一年。”这句话几乎成为了今年的流行语。 但是这句话是情绪&#xff0c;不是事实。未来十年&#xff0c;中国会成为全球最大的消费品市场&#xff0…