将el-table数据导出csv各式，纯前端实现

news2024/11/25 4:20:05 
 tableData数据：

 tableData: [

        { column1: '值1-1', column2: '值1-2' },

        { column1: '值2-1', column2: '值2-2' },

        { column1: '值3-1', column2: '值3-2' }

      ],  

 exportToCSV() {
      // 将表格数据转化为CSV格式
      const csvContent = this.convertArrayOfObjectsToCSV(this.tableData);
      // 创建下载链接，用于下载生成的CSV文件
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      if (link.download !== undefined) {
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', 'data.csv');
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },
    convertArrayOfObjectsToCSV(data) {
      const csvRows = [];
      const headers = Object.keys(data[0]);
      console.log('headers',headers);

      // 添加表头
      csvRows.push(headers.join(','));
         
      // 添加表格数据
      for (const row of data) {
        const values = headers.map(header => {
          const escapeQuotes = row[header]
          return `"${escapeQuotes}"`;
        });
        csvRows.push(values.join(','));
      }

      // 返回CSV内容
      return csvRows.join('\n');
    },

结果如下：

如果想要将表头替换为文字，可以重新遍历循环tableData，例如将【column1】转化为【第一列】

   exportToCSV() {
      // 将表格数据转化为CSV格式
         const keyMapping = {
                column1: '第一列',
            }
        const modifiedTableData =[]
          this.tableDatas.map(obj => {
            const modifiedObj = {};
            for (let key in obj) {
                if (keyMapping.hasOwnProperty(key)) {
                const newKey = keyMapping[key];
                modifiedObj[newKey] = obj[key];
                } else {
                modifiedObj[key] = obj[key];
                }
            }
            modifiedTableData.push(modifiedObj)
            });
      const csvContent = this.convertArrayOfObjectsToCSV(modifiedTableData);
      // 创建下载链接，用于下载生成的CSV文件
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      if (link.download !== undefined) {
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', 'data.csv');
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },
    convertArrayOfObjectsToCSV(data) {
      const csvRows = [];
      const headers = Object.keys(data[0]);
      console.log('headers',headers);

      // 添加表头
      csvRows.push(headers.join(','));
         
      // 添加表格数据
      for (const row of data) {
        const values = headers.map(header => {
          const escapeQuotes = row[header]
          return `"${escapeQuotes}"`;
        });
        csvRows.push(values.join(','));
      }

      // 返回CSV内容
      return csvRows.join('\n');
    },

效果图：

方法二：

使用json2csv 插件

npm install json2csv

引入到页面

import json2csv from 'json2csv'

使用: 将 modifiedTableData 替换成自己的table表格数据即可

downLoadList = [
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 1,
        "role_id": "37974710003",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 2,
        "role_id": "901610410087",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 3,
        "role_id": "13905284310012",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 4,
        "role_id": "880304610074",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 5,
        "role_id": "6801495710100",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 6,
        "role_id": "1270134610085",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 7,
        "role_id": "20562212610019",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 8,
        "role_id": "62620815003",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 9,
        "role_id": "20562307510100",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 10,
        "role_id": "6720994815049",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 11,
        "role_id": "904776310079",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 12,
        "role_id": "459012010070",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 13,
        "role_id": "8005578310049",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 14,
        "role_id": "7197854010103",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 15,
        "role_id": "7168183615042",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 16,
        "role_id": "7589462510011",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 17,
        "role_id": "21012727610067",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 18,
        "role_id": "13489399910050",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 19,
        "role_id": "13854480410040",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 20,
        "role_id": "10089315001",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 21,
        "role_id": "65930410095",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": null,
        "row_index": 22,
        "role_id": "876720810048",
        "type": "false"
    },
    {
        "info_sql": "",
        "error_key": "[214002]",
        "reason": -1,
        "row_index": 0,
        "role_id": "875358210085",
        "type": "false"
    }
]  
exportToCSV() {
            // 转化错误原因
            //downLoadList.map(item => {
              // this.reasonList.map(val => {
                // if(item.reason === val.id) {
                  //  item.reason = val.reason
                 //}
               //})
            //})
            // 将对应的key值转化为文字
            const keyMapping = {
                row_index: '报错序号',
                reason: '报错原因',
                abnormal_mark:'异常检测标记',
                threshold:'异常阈值标记',
                sql:'查询sql语句'
            }
            const modifiedTableData =[]
            downLoadList.map(obj => {
            const modifiedObj = {};
            for (let key in obj) {
                if (keyMapping.hasOwnProperty(key)) {
                const newKey = keyMapping[key];
                modifiedObj[newKey] = obj[key];
                } else {
                modifiedObj[key] = obj[key];
                }
            }
            modifiedTableData.push(modifiedObj)
            });
           let list = modifiedTableData[0]
            const fields = Object.keys(list) // 与表格列定义一致，用于设置表头
            const csvData = json2csv.parse( modifiedTableData, { fields }); // 将 el-table 数据转换为 CSV 字符串
            const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' }); // 创建Blob对象
            const url = URL.createObjectURL(blob); // 创建 Blob URL
            const link = document.createElement('a'); // 创建下载链接
            link.href = url;
            link.setAttribute('download', '执行结果.csv'); // 设置文件名
            document.body.appendChild(link);
            link.click();

            document.body.removeChild(link); // 移除下载链接
            URL.revokeObjectURL(url); // 释放 Blob URL
        },

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

关于 firefox 不能访问 http 的解决

关于 firefox 不能访问 http 的解决

情景： 我在虚拟机 192.168.x.111 上配置了 DNS 服务器，在 kali 上设置 192.168.x.111 为 DNS 服务器后，使用 firefox 地址栏搜索域名 www.xxx.com ，访问在 192.168.x.111 搭建的网站，本来经 192.168.x.111 DNS 服务器解…
阅读更多...
无涯教程-JavaScript - ROUNDDOWN函数

无涯教程-JavaScript - ROUNDDOWN函数

描述 ROUNDOWN函数将数字向下舍入为零。 ROUNDDOWN是Excel舍入函数之一。 语法 ROUNDDOWN (number, num_digits)争论 Argument描述Required/OptionalNumberAny real number that you want rounded down.RequiredNum_digitsThe number of digits to which you want to round…
阅读更多...
Linux Static Key原理与应用

Linux Static Key原理与应用

文章目录 背景1. static-key的使用方法1.1. static-key定义1.2 初始化1.3 条件判断1.4 修改判断条件 2、示例代码参考链接 背景 内核中有很多判断条件在正常情况下的结果都是固定的，除非极其罕见的场景才会改变，通常单个的这种判断的代价很低可以忽略&a…
阅读更多...
msvcp71.dll丢失的解决方法分享，全面分析msvcp71.dll丢失原因

msvcp71.dll丢失的解决方法分享，全面分析msvcp71.dll丢失原因

msvcp71.dll 丢失的问题可能困扰着许多使用 Windows 操作系统的用户。msvcp71.dll 是微软 C运行时库中的一个动态链接库文件，负责提供一些基本的函数和类，例如字符串处理、数学运算、文件操作等。如果这个文件丢失或损坏了，那么在使用依赖于它…
阅读更多...
【深度学习 | LSTM】解开LSTM的秘密:门控机制如何控制信息流

【深度学习 | LSTM】解开LSTM的秘密:门控机制如何控制信息流

🤵‍♂️ 个人主页: AI_magician 📡主页地址： 作者简介：CSDN内容合伙人，全栈领域优质创作者。 👨‍💻景愿：旨在于能和更多的热爱计算机的伙伴一起成长！！&…
阅读更多...
计算机视觉与深度学习-全连接神经网络-训练过程-批归一化- [北邮鲁鹏]

计算机视觉与深度学习-全连接神经网络-训练过程-批归一化- [北邮鲁鹏]

文章目录 思想批归一化操作批归一化与梯度消失经过BN处理 算法实现 思想 直接对神经元的输出进行批归一化 批归一化：对输出值进行归一化，将归一化结果平移缩放作为输出。 批归一化操作 小批量梯度下降算法回顾：每次迭代时会读入一批数据&am…
阅读更多...
工信部将制定虚拟宇宙标准

工信部将制定虚拟宇宙标准

中国工业和信息化部(MIIT)周一表示，随着北京寻求成为新技术的全球标准制定者，中国将成立一个工作组来制定虚拟宇宙行业的标准。 周一，该部发布了一份提案草案，旨在组建一个虚拟宇宙工作组，该工作组可以通过互联网访问共…
阅读更多...
CHATGPT中国免费网页版有哪些-CHATGPT中文版网页

CHATGPT中国免费网页版有哪些-CHATGPT中文版网页

CHATGPT中国免费网页版，一个强大的人工智能聊天机器人。如果你曾经感到困惑、寻求答案，或者需要一些灵感，那么CHATGPT国内网页版可能会成为你的好朋友。 CHATGPT国内免费网页版：你的多面“好朋友” 随着人工智能技术的不断发展&a…
阅读更多...
Java学习day04：数组

Java学习day04：数组

声明：该专栏本人重新过一遍java知识点时候的笔记汇总，主要是每天的知识点题解，算是让自己巩固复习，也希望能给初学的朋友们一点帮助，大佬们不喜勿喷(抱拳了老铁！) Java学习day04：数组 一、开发…
阅读更多...
C++：new 和 delete

C++：new 和 delete

个人主页 ： 个人主页 个人专栏 ： 《数据结构》 《C语言》《C》 文章目录 前言一、C内存管理1.内置类型2.自定义类型3.delete 与 new不匹配使用问题(VS平台下) 二、operator new 与 operator delete函数三、 new 和delete的实现原理内置类型自定义类型 四…
阅读更多...
【前端知识】Three 学习日志（十）—— 常见几何体（长方体、球体、圆柱、矩形平面、圆形平面）

【前端知识】Three 学习日志（十）—— 常见几何体（长方体、球体、圆柱、矩形平面、圆形平面）

Three 学习日志（十）—— 常见几何体（长方体、球体、圆柱、矩形平面、圆形平面） 一、构建常用几何体 const geometry_list []// BoxGeometry：长方体 const geometry_box new THREE.BoxGeometry(100, 100, 100); geo…
阅读更多...
CPU性能优化

CPU性能优化

在进行CPU性能优化的时候，我们经常先需要分析出来我们的应用程序中的CPU资源在哪些函数中使用的比较多，这样才能高效地优化。一个非常好的分析工具就是《性能之巅》作者 Brendan Gregg 发明的火焰图。 我们今天就来介绍下火焰图的使用方法，以…
阅读更多...
GeoServer地图服务器权限控制

GeoServer地图服务器权限控制

目录 1下载相关软件 2部署软件 3配置鉴权环节 4Java工程 5测试鉴权 6测试鉴权结果分析 本文章应该会后面试验一个鉴权功能就会发布一系列测试过程（GeoServer有很多鉴权方式） 1Download - GeoServer 1下载相关软件 进入geoserver官网的下载页面 …
阅读更多...
如何为你的Python程序配置HTTP/HTTPS爬虫IP

如何为你的Python程序配置HTTP/HTTPS爬虫IP

在编写Python程序时，有时候我们需要使用HTTP或HTTPS爬虫ip来实现网络请求和访问外部资源。本文将向您介绍如何快速入门，为您的Python程序配置HTTP/HTTPS爬虫ip，以便您能够轻松地处理爬虫ip设置并顺利运行您的程序。 一、了解HTTP/HTTPS爬虫ip…
阅读更多...
Python Opencv实践 - ORB特征匹配

Python Opencv实践 - ORB特征匹配

参考资料： ORB特征笔记_亦枫Leonlew的博客-CSDN博客 python opencv3 基于ORB的特征检测和 BF暴力匹配 knn匹配 flann匹配 - 知乎 Python OpenCV中的drawMatches()关键点匹配绘制方法详解_cv2.drawmatches_乔卿的博客-CSDN博客 import cv2 as cv import numpy as…
阅读更多...
mysql 多个字段 like 同一个值怎么实现

mysql 多个字段 like 同一个值怎么实现

1，需求：前端一个输入框 输入的内容要和数据库中多个字段进行匹配 前端输入内容需要和 username，realname，age，bh 这四个字段匹配 方法1（可优化）；select * from rzt_user where user…
阅读更多...
爱惨了，这个听书神器APP

爱惨了，这个听书神器APP

我喜欢听书的原因，第一个是比较省时间，而且很方便，看小说需要花费时间，看久了，眼睛又很疼。听书的话，刷牙听、走路听、开车听、睡前听等等都可以。 最近狂爱这个爱屁屁：听书神器 1、全网资源&…
阅读更多...
nodejs项目实战（带源码）

nodejs项目实战（带源码）

nodejs项目实战 主要实现功能用户模块文章分类模块文章模块核心代码 数据库完整代码 主要实现功能 本项只适合新手，是一个接口类的项目，主要涉及一些增删改查功能以及三方包的使用，主要包括用node实现写用户登录注册，添加删除文章…
阅读更多...
机器学习——聚类算法

机器学习——聚类算法

0、前言： 机器学习聚类算法主要就是两类：K-means和DBSCAN聚类：一种无监督的学习，事先不知道类别（相当于不用给数据提前进行标注），自动将相似的对象归到同一个簇中 1、K-means： 原理…
阅读更多...
idea项目配置三大步

idea项目配置三大步

场景： 使用 idea 打开一个新项目的时候，想让项目迅速跑起来， 其实只需要下面简单三步： 1. 首先，配maven 2. 其次，配置 jdk 这里配置 project 就行了，不用管Modules中的配置。 3. 最后&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023