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.hqwc.cn/news/590079.html

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

相关文章

IoT数采平台4:测试

IoT数采平台1&#xff1a;开篇IoT数采平台2&#xff1a;文档IoT数采平台3&#xff1a;功能IoT数采平台4&#xff1a;测试 Modbus RTU串口测试 OPC测试 HTTP测试 MQTT透传测试 MQTT网关测试及数据上报 TCP / UDP 监听&#xff0c;客户端连上后发送信息&#xff0c;客户端上报数据…

excel统计分析——协方差分析的作用

参考资料&#xff1a;生物统计学 1、协变量与试验因素的区别 如果把协方差分析资料中的协变量看作多因素方差分析资料中的一个因素&#xff0c;则两类资料有相似之处&#xff0c;但两类资料有本质的不同。在方差分析中&#xff0c;各因素的水平时人为控制的&#xff0c;即使是…

IP代理池是什么?怎样判断IP池优劣?

许多做跨境电商的朋友们都会使用到IP代理池这个模块&#xff0c;那会有新想加入到跨境电商这个行业的朋友们会有疑问&#xff0c;IP代理池究竟是什么&#xff1f;今天为你解答。 IP代理池是一种集成多个代理IP的系统&#xff0c;其核心功能在于收集并维护大量的可用IP地址&…

基于卷积神经网络的苹果等级分类系统(pytorch框架)【python源码+UI界面+前端界面+功能源码详解】

功能演示&#xff1a; 苹果等级分类系统&#xff0c;基于vgg16&#xff0c;resnet50卷积神经网络&#xff08;pytorch框架&#xff09;_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于卷积神经网络的苹果等级分类系统是在pytorch框架下实现的&#xff0c;系统中有两…

STM32 TIM DMA burst 输出变频 PWM 波形

1. 问题背景 客户需要 MCU 输出一组变频的 PWM 波形来控制外围器件&#xff0c;并且不同频率脉冲的个数也不同。STM32U5 芯片拥有 TIM1/TIM8 高级定时器&#xff0c;还有通用定时器TIM2/TIM3/TIM4/TIM5 以及 TIM15/TIM16/TIM17。TIM 模块中&#xff0c;可通过修改 ARR 寄存器的…

C++基础13:C++输入输出

此专栏为移动机器人知识体系下的编程语言中的 C {\rm C} C从入门到深入的专栏&#xff0c;参考书籍&#xff1a;《深入浅出 C {\rm C} C》(马晓锐)和《从 C {\rm C} C到 C {\rm C} C精通面向对象编程》(曾凡锋等)。 12.C输入/输出 12.1 C流类 计算机的输入和输出是数据传送的过…

2024年购买阿里云服务器多少钱?100元-5000元预算

2024年阿里云服务器租用费用&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核4G服务…

E5071C是德科技E5071C网络分析仪

181/2461/8938产品概述&#xff1a; E5071C ENA 矢量网络分析仪&#xff0c;9 kHz 至 20 GHz&#xff0c;配有增强型 TDR 测量选件。E5071C 网络分析仪具有较高的射频性能和较快的速度&#xff0c;并具有宽频率范围和全面的功能。它是制造和研发工程师们测试频率范围在 20 GHz…

2024年 前端JavaScript 进阶 第3天 笔记

3.1-JS进阶-内容和两种编程思想 3.2-构造函数实现封装以及存在 3.3-原型对象prototype 3.4-数组扩展案例-求最大值和数组求和 3.5-constructor属性以及应用 3.6-对象原型proto 3.7-原型继承 3.8-原型链以及instanceof运算符 3.9-综合案例-模态框构造函数写法 3.10-综合案例-0pe…

《PDVC》论文笔记

PS&#xff1a;模型代码解释清明后出 原文链接&#xff1a; [2108.07781v1] End-to-End Dense Video Captioning with Parallel Decoding (arxiv.org) 原文笔记&#xff1a; What&#xff1a; End-to-End Dense Video Captioning with Parallel Decoding 并行解码的端到端…

[C#]使用OpencvSharp去除面积较小的连通域

【C介绍】 关于opencv实现有比较好的算法&#xff0c;可以参考这个博客OpenCV去除面积较小的连通域_c#opencv 筛选小面积区域-CSDN博客 但是没有对应opencvsharp实现同类算法&#xff0c;为了照顾懂C#编程同学们&#xff0c;因此将 去除面积较小的连通域算法转成C#代码。 方…

医学图像处理 利用pytorch实现的可用于反传的Radon变换和逆变换

医学图像处理 利用pytorch实现的可用于反传的Radon变换和逆变换 前言代码实现思路实验结果 前言 Computed Tomography&#xff08;CT&#xff0c;计算机断层成像&#xff09;技术作为如今医学中重要的辅助诊断手段&#xff0c;也是医学图像研究的重要主题。如今&#xff0c;随…

【WebSocket】快速入门 springboot中使用

WebSocket 介绍 WebSocket缺点&#xff1a; 服务器长期维护长连接需要一定的成本 各个浏览器支持程度不一 WebSocket 是长连接&#xff0c;受网络限制比较大&#xff0c;需要处理好重连 结论&#xff1a; WebSocket并不能完全取代HTTP&#xff0c;它只适合在特定的场景下使用…

C++ 2024-4-2 作业

1.模板类实现顺序栈 #include <iostream> #define MAX 8 using namespace std; template<typename T> class stack {T data[MAX];int top; public:stack():top(-1){}bool empty_stack();bool full_stack();void push_stack(T data);void pop_stack();void show();…

Phpstorm配置Xdebug

步骤 1、先去官网找到对应的php xdebug的版本 2、配置phpstorm断点调试 网址&#xff1a;https://xdebug.org/ 查看php对应的xdebug版本&#xff1a;Xdebug: Support — Tailored Installation Instructions 1.1查看对应php xdebug版本 全选&#xff0c;复制到目标网址 我…

Flutter中setState函数的使用注意事项

文章目录 Flutter中setState函数的使用注意事项只能在具有State对象的类中使用不要在build方法中使用将状态更新逻辑放在setState方法内部避免频繁调用使用回调函数更新状态 Flutter中setState函数的使用注意事项 setState()函数是Flutter中非常重要的一个函数&#xff0c;它用…

antd/x6-graph——实现流程图绘制功能——技能提升

效果图&#xff1a; 解决步骤1&#xff1a;安装"antv/x6": "^1.35.0" npm install antv/x61.35.0安装指定版本的antv/x6插件 解决步骤2&#xff1a;配置tools文件 在assets/js中新增一个graphTools.js文件 内容如下&#xff1a; /* antv x6图谱相关…

基于深度学习的吸烟检测系统(网页版+YOLOv8/v7/v6/v5代码+训练数据集)

摘要&#xff1a;本文深入研究了基于YOLOv8/v7/v6/v5等深度学习模型的吸烟行为检测系统&#xff0c;核心采用YOLOv8并整合了YOLOv7、YOLOv6、YOLOv5算法&#xff0c;进行性能指标对比&#xff1b;详述了国内外研究现状、数据集处理、算法原理、模型构建与训练代码&#xff0c;及…

目标跟踪——行人车辆数据集

一、重要性及意义 首先&#xff0c;目标跟踪对于个人和组织的目标实现至关重要。无论是个人职业发展、企业业务增长还是政府的社会发展&#xff0c;目标跟踪都能够帮助我们明确目标&#xff0c;并将其分解为可行的步骤和时间表。这有助于我们保持动力和专注&#xff0c;提高效…

WPF文本框TextEdit不以科学计数法显示

WPF文本框TextEdit不以科学计数法显示 一个float或者double类型的数值&#xff0c;如果小数点后0的个数≥4&#xff0c;在界面上就会自动以科学计数法显示&#xff0c; 比如&#xff1a;0.00003会显示成这样 但是很多时候我并不希望它这样显示&#xff0c;因为这样不方便编辑…