【papaparse插件】前端预览csv文件

需求:就是可以在前端直接预览csv文件的内容

1.了解csv文件

1.1 csv文件和xlsx、xls文件的异同

首先了解一下csv文件和excel文件(xlsx,xls)有什么异同,简单来说他们都是存储表格数据的文件,csv只能显示较为简单的文本数据格式,通常使用逗号隔开,我们在编辑csv文件后保存时会提示:

逗号分隔,我们由下面的纯文本数据理解 :新建一个txt文件或其他文本文件,保存为csv,那么下面数据就会生成一个,有name、age等列的20条数据的表格

因为它是一个纯文本由逗号分隔的数据形式,所以一个csv文件 只能是一个表格,如果需要有多个可以使用xlsx,xls类型的文件。

1.2 xlsx&xls文件

        xlsx和xls是分别使用,xml和二进制编码来存储的,且都支持生成多个sheet表格,如果你想像csv一样写文件,那么可以自己研究一下语法,肯定是可以实现的。这两种文件就是来处理复杂的数据表格的,网上推荐使用xlsx,因为xls兼容性不好,处理数据能力也不如xlsx。

手动生成xlsx也比较麻烦,下面在AI上问的,可以参考一下:

2.预览csv文件

2.1 工具

现在进入主题,思路就是想xlsx一样将csv数据读出来,生成一个表格,csv只有单个表格,应该比xlsx简单,常用工具我选择了papaparse,他是一个专门解析csv文件的库,它功能较多,主要是既能解析又能通过json数据生成csv文件,比较好用。

2.2 生成步骤

1)接口(或本地)拿到的二进制文件;

2)new FileReader()创建一个读取二进制文件的对象;

3)读取文件,保存数据;

4)将数据填入表格中;

2.3 代码展示

import { useState, useEffect } from 'react';
import Papa from 'papaparse';const CSVPreview = ({ csvData }: any) => {const [tableData, setTableData] = useState([]);useEffect(() => {if (csvData) {const reader = new FileReader();  reader.onload = (event: any) => {  const csvString: any = event.target.result;  const results: any = Papa.parse(csvString, { header: true, skipEmptyLines: true });  setTableData(results.data);  };  reader.readAsText(csvData);  }}, [csvData]);return (<table style={{ borderCollapse: 'collapse' }}><thead><tr>{tableData?.[0] && Object.keys(tableData?.[0]).map((key) => (<th key={key} style={{ border: '1px solid #c9c9c9', padding: '8px' }}>{key}</th>))}</tr></thead><tbody>{tableData?.map((row: any, index: number) => (<tr key={index}>{Object.values(row).map((cell: any, cellIndex) => (<td key={cellIndex}>{cell}</td>))}</tr>))}</tbody></table>);
}export default CSVPreview;

Ps:完整代码如上,可以直接拿去当个组件使用。

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

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

相关文章

一站式AI服务平台:MaynorAI助您轻松驾驭人工智能

一站式AI服务平台&#xff1a;MaynorAI助您轻松驾驭人工智能 在当前的数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术已经成为推动各行各业创新发展的核心动力。为了更好地满足企业和个人用户对AI服务的需求&#xff0c;MaynorAI 作为一个领先的一站式调用国内…

【面试题】网络TCP(第三篇)

1. 什么是TCP协议&#xff1f; TCP&#xff08;Transmission Control Protocol&#xff09;即传输控制协议&#xff0c;是一种面向连接的、可靠的、基于字节流的传输层通信协议。它由IETF的RFC 793定义&#xff0c;为互联网中的数据通信提供了稳定的传输机制。 2. TCP的特点是…

【oracle】oracle索引分裂

本文为云贝教育 刘峰 原创&#xff0c;请尊重知识产权&#xff0c;转发请注明出处&#xff0c;不接受任何抄袭、演绎和未经注明出处的转载。 一、索引分裂概述 Oracle数据库中的索引分裂是数据库维护和性能管理中的一个重要概念&#xff0c;特别是在处理大量数据插入、更新和…

Python入门-基础知识-变量

1.标识符与关键字 Python语言规定&#xff0c;标识符由字母、数字和下画线组成&#xff0c;且不允许以数字开头。合法的标识符可以 是student_1、 addNumber、num等&#xff0c;而3number、2_student等是不合法的标识符。在使用标识符时应注意以下几点。 (1)命名时应遵循见名知…

CVPR 2024最佳论文分享:生成图像动力学

CVPR 2024最佳论文分享&#xff1a;生成图像动力学 CVPR&#xff08;Conference on Computer Vision and Pattern Recognition&#xff09;是计算机视觉领域最有影响力的会议之一&#xff0c;主要方向包括图像和视频处理、目标检测与识别、三维视觉等。近期&#xff0c;CVPR 2…

使用python在dolphinDB上运行SQL

需要先部署好dolphindb并启动数据库 步骤1&#xff1a;链接dolphinDB数据库 安装依赖库&#xff1a;pip install dolphindb 然后运行&#xff1a; import dolphindb as ddbdef get_dolphin_session():"""获取dolphinDB的session"""dolphin_c…

2000—2022年青藏高原遥感生态指数数据集

该数据集是基于多套MODIS数据集&#xff0c;选取NDVI、LST、WET、NDBSI四项指标&#xff0c;采用主成分分析法&#xff0c;生成2000-2022年500米空间分辨率的遥感生态指数&#xff08;RSEI&#xff09;数据集。 遥感生态指数&#xff1a;是一种基于遥感技术的生态环境质量综合评…

3D立体卡片动效(附源码)

3D立体卡片动效 欢迎关注&#xff1a;xssy5431 小拾岁月参考链接&#xff1a;https://mp.weixin.qq.com/s/9xEjPAA38pRiIampxjXNKQ 效果展示 思路分析 需求含有立体这种关键词&#xff0c;我们第一反应是采用动画中的平移、倾斜等实现。如果是立体&#xff0c;必然产生阴影&…

[c++] 类型推导 typeid decltype auto

前言:为什么c需要类型推导 诸如python这类语言,声明对象和函数返回时都不需要显示声明类型,如果程序比较复杂很容易在函数多级传参时找不到返回值的数据类型,这时类型推导就是一件很有意义的事了,而c/c中,函数的返回值类型都是显示传递的,不同类型之间还不能直接进行赋值,看起…

FFmpeg中位操作相关的源码:GetBitContext结构体,init_get_bits函数、get_bits1函数和get_bits函数分析

一、引言 由《音视频入门基础&#xff1a;H.264专题&#xff08;3&#xff09;——EBSP, RBSP和SODB》可以知道&#xff0c;H.264 码流中的操作单位是位(bit)&#xff0c;而不是字节。因为视频的传输和存贮是十分在乎体积的&#xff0c;对于每一个比特&#xff08;bit&#xf…

利用圆上两点和圆半径求解圆心坐标

已知圆上两点P1&#xff0c;P2&#xff0c;坐标依次为 ( x 1 , y 1 ) , ( x 2 , y 2 ) (x_1,y_1),(x_2,y_2) (x1​,y1​),(x2​,y2​)&#xff0c;圆的半径为 r r r&#xff0c;求圆心的坐标。 假定P1&#xff0c;P2为任意两点&#xff0c;则两点连成线段的中点坐标是 x m i …

TS-常量枚举

如果使用普通的数值枚举或字符串枚举&#xff0c;在编译成JavaScript代码后会产生较多代码来支持各项功能&#xff0c;开销较大且可读性较差&#xff0c;而且很可能被人误用。例如&#xff0c;使用索引查找或反向映射会导致可读性进一步变差&#xff0c;出错率进一步提高。 要解…

qt 实现对字体高亮处理原理

在Qt中实现对文本的字体高亮处理&#xff0c;通常涉及到使用QTextDocument、QTextCharFormat和QSyntaxHighlighter。下面是一个简单的例子&#xff0c;演示如何为一个文本编辑器&#xff08;假设是QTextEdit&#xff09;添加简单的关键词高亮功能&#xff1a; 步骤 1: 定义关键…

redis sentinel 部署

安装Redis 建议版本不要太低 > 6.2&#xff0c;我这里是redis 7.2.5 curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg echo "deb [signed-by/usr/share/keyrings/redis-archive-keyring.gpg] http…

Git Flow 工作流学习要点

Git Flow 工作流学习要点 Git Flow — 流程图Git Flow — 操作指令优点&#xff1a;缺点&#xff1a;Git Flow 分支类型Git Flow 工作流程简述关于 feature 分支关于 Release 分支关于 hotfix 分支 总结 Git Flow — 流程图 图片来源&#xff1a;https://nvie.com/posts/a-succ…

vue全局方法plugins/utils

一、在src目录下创建一个plugins文件夹 test.ts文件存放创建的方法&#xff0c;index.ts用于接收所有自定义方法进行统一处理 二、编写自定义方法 // test.ts文件 export default {handleTest(val1: number, val2: number) {// 只是一个求和的方法return val1 val2;}, };三…

vue3 【提效】使用 CSS 框架 UnoCSS 实用教程

该换种更高效的方式写 CSS 啦&#xff0c;举个例&#xff1a; <div class"flex"> </div>相当于 <div class"flex"> </div> <style> .flex {display: flex; } </style>当然&#xff0c;还有超多强大的功能帮我们提升…

江科大笔记—FLASH闪存

FLASH闪存 程序现象&#xff1a; 1、读写内部FLASH 这个代码的目的&#xff0c;就是利用内部flash程序存储器的剩余空间&#xff0c;来存储一些掉电不丢失的参数。所以这里的程序是按下K1变换一下测试数据&#xff0c;然后存储到内部FLASH&#xff0c;按下K2把所有参数清0&…

注册中文网址(中文域名)有什么用?

随着互联网的全球普及&#xff0c;域名系统作为网络空间的门牌号&#xff0c;其重要性不言而喻。长久以来&#xff0c;英文域名占据了主导地位&#xff0c;但随着国际化域名&#xff08;IDN&#xff0c;Internationalized Domain Name&#xff09;技术的发展&#xff0c;注册中…

检索增强生成RAG系列2--提高RAG准确度的关键点

上一章讲到了RAG的基本流程&#xff0c;但是如果只是完成一个基本流程&#xff0c;想要在商业上使用还是不行&#xff0c;因为正常商业上的使用其准确度至少有个90%甚至更高。那么如何提高RAG的准确度&#xff0c;那么需要看看RAG有哪些关键点。 目录 1 RAG结构图2 文档处理3 …