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-table
      id="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.实现效果

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

与 ChatGPT 对话

原文&#xff1a;Conversing With ChatGPT 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 ChatGPT 人工智能 尽管人工智能带来了许多好处和进步&#xff0c;但仍有一些话题引发担忧并引发道德、社会和存在问题。以下是与人工智能相关的一些最可怕的话题&#xff1a…

数据结构算法题(力扣)——链表

以下题目建议大家先自己动手练习&#xff0c;再看题解代码。这里只提供一种做法&#xff0c;可能不是最优解。 1. 移除链表元素&#xff08;OJ链接&#xff09; 题目描述&#xff1a;给一个链表的头节点 head 和一个整数 val &#xff0c;删除链表中所有满足值等于 val 的节点…

954: 单链表的链接

学习版 【c语言】 【C艹】 #include<iostream>class LinkedList { public:struct LinkedNode {char val;LinkedNode* next;LinkedNode(char val) :val(val), next(NULL) {};};LinkedList(){dummyHead new LinkedNode(0);tail dummyHead;}~LinkedList() {while (dummy…

初探STM32f407VET6

一、买到了板子&#xff0c;自己分析引脚功能 我在某宝上买到一块stm32f407vet6的板子&#xff0c;图便宜&#xff0c;结果遇上了个态度差的客服。没有说明&#xff0c;没有资料。不能退换&#xff0c;只能自己想办法分析引脚 在嘉里创找到了芯片原理图&#xff08;LQFP-100封…

【智能排班系统】快速消费线程池

文章目录 线程池介绍线程池核心参数核心线程数&#xff08;Core Pool Size&#xff09;最大线程数&#xff08;Maximum Pool Size&#xff09;队列&#xff08;Queue&#xff09;线程空闲超时时间&#xff08;KeepAliveTime&#xff09;拒绝策略&#xff08;RejectedExecutionH…

Python学习笔记-Flask接收post请求数据并存储数据库

1.引包 from flask import Flask, request, jsonify from flask_sqlalchemy import SQLAlchemy 2.配置连接,替换为自己的MySQL 数据库的实际用户名、密码和数据库名 app Flask(__name__) #创建应用实列 app.config[SQLALCHEMY_DATABASE_URI] mysqlpymysql://ro…

微软文本转语音和语音转文本功能更新,效果显著!

今天我要和大家分享一个新功能更新——微软的文本转语音和语音转文本功能。最近&#xff0c;微软对其AI语音识别和语音合成技术进行了重大升级&#xff0c;效果非常好&#xff0c;现在我将分别为大家介绍这两个功能。 先来听下这个效果吧 微软文本转语音和语音转文本功能更新 …

二分答案(砍树,借教室)

二分的两种情况附代码&#xff1a; 二分查找条件&#xff1a;单调&#xff0c;二段性 例题1&#xff1a;P1873 [COCI 2011/2012 #5] EKO / 砍树 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 上代码&#xff1a; #include<bits/stdc.h> using namespace std; const …

【数据结构与算法】归并排序(详解:递归与非递归的归并排序 | 赠:冒泡排序和选择排序)

前言 本篇博客会对排序做一个收尾&#xff0c;将最经典的七大排序介绍完毕。 这次的重点正如标题&#xff0c;主要讲的是归并排序&#xff0c;还会带过相对简单很多的冒泡排序和选择排序。在最后还会给这七大排序做出一个时间复杂度和稳定性展示的总结收尾。同时&#xff0c;这…

钉钉事件订阅前缀树算法gin框架解析

当钉钉监测到发生一些事件&#xff0c;如下图 此处举例三个事件user_add_org、user_change_org、user_leave_org&#xff0c;传统的做法是&#xff0c;我们写三个if条件&#xff0c;类似下图 这样字符串匹配效率比较低&#xff0c;于是联想到gin框架中的路由匹配算法&#xff0…

非写代码无以致远

标题党一下&#xff0c;本篇文章主要汇总了一些代码题&#xff0c;让大家写一些代码练习一下吧&#xff01; 变种水仙花_牛客题霸_牛客网 (nowcoder.com) #include<stdio.h> int main() {for (int i 10000; i < 99999; i) {int sum 0;for (int j 10; j < 1000…

码农失业倒计时?全球首个大厂AI程序员来了

进入互联网时代&#xff0c;程序员作为高收入职业的代表&#xff0c;长久以来一直是众多求职者梦寐以求的工作方向。程序员们凭借其对计算机科学的深刻理解和技术创新能力&#xff0c;不仅推动了科技的进步&#xff0c;也为自己赢得了可观的经济回报。 然而&#xff0c;随着人…

AD20全流程的使用笔记

目录 首先一个完整的AD工程文件需要我们自己建立的文件有这些&#xff1a; 新建工程&#xff1a; 从现有的工程文件中将元件添加到原理图库&#xff1a; 元件的摆放&#xff1a; 器件的复制及对齐&#xff1a; 导线、Netlabe、端口的添加&#xff1a; Value值的校对&…

可视化大屏 - 项目1

文章目录 技术栈echarts 可视化需求分析代码实现 技术栈 flexible.js rem 实现不同终端下的响应式布局&#xff0c;根据不同屏幕宽度&#xff0c;自适配布局&#xff1b; html中引入index.js&#xff0c;可以改名为flexible.js&#xff1b;默认划分10份&#xff0c;可以自己修…

HarmonyOS 应用开发之TaskPool和Worker的对比 (TaskPool和Worker)

TaskPool&#xff08;任务池&#xff09;和Worker的作用是为应用程序提供一个多线程的运行环境&#xff0c;用于处理耗时的计算任务或其他密集型任务。可以有效地避免这些任务阻塞主线程&#xff0c;从而最大化系统的利用率&#xff0c;降低整体资源消耗&#xff0c;并提高系统…

日期专题:做题笔记 (时间显示/星期计算/星系炸弹/第几天/纪念日)

目录 时间显示 代码 星期计算 代码 星系炸弹 代码 第几天 纪念日 代码 时间显示 时间显示 这道题主要是单位换算。 ①单位换算 ②输出格式&#xff1a; a. 不足两位补前导零。利用printf输出 b. 注意 long long 输出格式应该是 %lld 长整型 代码 #include <…

Day66-企业级防火墙iptables精讲2

Day66-企业级防火墙iptables精讲2 1. iptables项目案例2&#xff1a;局域网共享上网&#xff1a;2. iptables项目案例3&#xff1a;外网IP的端口映射到内网IP的端口3. 老男孩教育iptables项目案例4&#xff1a;IP一对一映射&#xff08;DMZ&#xff09;4. 老男孩教育iptables项…

Java常用类和基础API

文章目录 1. 字符串相关类之不可变字符序列&#xff1a;String1.1 String的特性1.2 String的内存结构1.2.1 概述1.2.2 练习类型1&#xff1a;拼接1.2.3 练习类型2&#xff1a;new1.2.4 练习类型3&#xff1a;intern() 1.3 String的常用API-11.3.1 构造器1.3.2 字符串对象的比较…

【THM】Protocols and Servers(协议和服务器)-初级渗透测试

介绍 这个房间向用户介绍了一些常用的协议,例如: HTTP协议文件传输协议POP3邮件传输协议IMAP每个协议的每个任务都旨在帮助我们了解底层发生的情况,并且通常被优雅的GUI(图形用户界面)隐藏。我们将使用简单的 Telnet 客户端来使用上述协议进行“对话”,以充分了解GUI客户…

Unity开发一个FPS游戏之三

在前面的两篇博客中&#xff0c;我已实现了一个FPS游戏的大部分功能&#xff0c;包括了第一人称的主角运动控制&#xff0c;武器射击以及敌人的智能行为。这里我将继续完善这个游戏&#xff0c;包括以下几个方面&#xff1a; 增加一个真实的游戏场景&#xff0c;模拟一个废弃的…