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;随…