JS 上传CSV转JSON | JSON数据转CSV下载 | 数组转CSV
⏹转换方法来源:
https://www.30secondsofcode.org/js/s/csv-to-json
https://www.30secondsofcode.org/js/s/array-to-csv
⏹上传CSV转JSON
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSV转换JSON</title>
</head>
<body><label for="ipt">读取本地的csv</label><br><!-- accept属性限制只能上传csv文件 --><input id="ipt" type="file" accept=".csv" />
</body>
<script src="../jquery.min.js"></script>
<script>// 转换CSV为JSON数据const CSVToJSON = (data, csvTitleKbn, delimiter = ',') => {const titles = data.slice(0, data.indexOf('\n')).split(delimiter);const hanleData = data.slice(data.indexOf('\n') + 1).split('\n');const json = hanleData.map(v => {const values = v.split(delimiter);return csvTitleKbn.reduce((obj, title, index) => ((obj[title] = values[index]), obj),{});});return json;};// 文件上传后触发change事件$(ipt).change((event) => {// 获取出上传的文件const {target: {files},target} = event;const file = files[0];// 文件类型校验if(!file?.name.includes(".csv")) {// 清空文件上传框target.outerHTML = target.outerHTML;alert("请选择csv文件上传!");return;}// 构建文件读取对象const reader = new FileReader();// 将上传的文件读取为文本reader.readAsText(file);// 当文件完全读取完成之后触发load事件,从响应事件中解构出读取的文本reader.addEventListener('load', ({target: {result: csvText}}) => {// CSV标题汉字所对应的区分名const csvTitleKbn = ["id", "name"];// 将CSV文本转换为JSON数据const jsonFromCsvFile = CSVToJSON(csvText, csvTitleKbn);console.log(jsonFromCsvFile);});})
</script>
</html>
⏹JSON数据转CSV下载
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSON转换CSV</title>
</head>
<body><button id="btn">点击下载CSV文件</button>
</body>
<script src="../jquery.min.js"></script>
<script>// 转换Json到CSV数据const JSONtoCSV = (arr, columns, csvTitleNames, delimiter = ',') => {// 转换为csv数据Listconst csvdataList = [columns.join(delimiter),...arr.map(obj =>columns.reduce((acc, key) =>`${acc}${!acc.length ? '' : delimiter}"${!obj[key] ? '' : obj[key]}"`,'')),];// 将标题替换为汉字csvdataList[0] = csvTitleNames;// 转换为csv字符串return csvdataList.join('\n');}// 下载CSV文件function downloadCSVFile(fileName, csvFileContent) {// 防止中文乱码的unicodeconst unicodeMark = "\ufeff";const blob = new Blob(// 必须添加此unicode,否则CSV中的中文会乱码[unicodeMark + csvFileContent], {type: 'text/csv'});// 创建一个隐藏的用来下载文件的a标签const aElement = document.createElement('a');aElement.download = fileName;aElement.style.display = 'none';// 将文件放入内存中const src = URL.createObjectURL(blob);aElement.href = src;document.body.appendChild(aElement);// 模拟点击下载事件,进行下载aElement.click();// 点击之后,移除我们定义的隐藏a标签document.body.removeChild(aElement);// 移除文件对象URL.revokeObjectURL(src);}// 模拟从后端获取的数据const dataFromAPI = [{ id: 1, name: '贾飞天' }, { id: 3, name: '高橋', address: '地球' }, { id: 6 },{ name: '李四' }]// CSV标题const csvTitleKbn = ['id', 'name'];const csvTitleName = ['ID', '姓名'];$(btn).click(() => {// 将json数据转换为CSV格式const csvFileContent = JSONtoCSV(dataFromAPI, csvTitleKbn, csvTitleName);const fileName = `自定义csv${new Date().getTime()}.csv`;// 下载CSVdownloadCSVFile(fileName, csvFileContent);});
</script>
</html>
⏹数组转CSV
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组转CSV</title>
</head>
<body></body>
<script>// 转换数组到CSVconst arrayToCSV = (arr, delimiter = ',') => {const csvData = arr.map(v => {return v.map(x => (isNaN(x) ? `"${x.replace(/"/g, '""')}"` : x)).join(delimiter)}).join('\n');return csvData;}// 模拟从后端获取到的数据const dataFromAPI = [['a', '"b" great', '测试数据'],['c', 3.1415]];// 将数组转换为csvconst csvData = arrayToCSV(dataFromAPI);console.log(csvData);
</script>
</html>
JS 上传CSV转JSON | JSON数据转CSV下载 | 数组转CSV相关推荐
- ajax文件上传报400,js ajaxfileupload.js上传报错的解决方法
相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.cod ...
- 怎么接收layui上传的文件_layui 上传文件_批量导入数据UI的方法
使用layui的文件上传组件,可以方便的弹出文件上传界面. 效果如下: 点击[批量导入]按钮调用js脚本importData(config)就可以实现数据上传到服务器. 脚本: /*** * 批量导入 ...
- 使用curl上传带有文件的POST数据
本文翻译自:Using curl to upload POST data with files I would like to use cURL to not only send data param ...
- js上传文件到c 服务器,js上传文件到c服务器
js上传文件到c服务器 内容精选 换一换 安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据 ...
- js上传视频，预览视频
js上传视频,预览视频 <videostyle="width:300px; height:auto;object-fit: fill;"playsinlinecontrols ...
- node将当前文件上传到服务器,以编程方式将文件从node.js上传到另一个Web服务器...
我需要将文件从node.js应用程序推送到其他地方运行的Web服务器,该服务器通过典型的上载机制接受文件.例如,假设接收服务器有一个网页,这样的形式:以编程方式将文件从node.js上传到另一个Web ...
- logstash清除sincedb_path上传记录，重传日志数据
logstash清除sincedb_path上传记录,重传日志数据 logstash通过一个名为 sincedb_path 下的记录文件记录当前logstash已经上传的日志文件的位置,如果指定为 n ...
- 服务器上传excel文件并读取数据,asp.net上传Excel文件并读取数据的实现方法
前言 本文主要给大家介绍了关于asp.net上传Excel文件并读取数据的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 实现如下: 前台代码:使用服务端控件实现上传 服务端 ...
- 七牛云 vue 图片上传简单解说，js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片 一.七牛云简介 首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
- JS上传文件（base64字符串和二进制文件流）
①以base64字符串上传(使用FileReader对象获取文件的base64字符串) FileReader参考文档: FileReader - Web API 接口参考 | MDN FileRead ...
最新文章
- 机器学习PAL数据可视化
- 【POCO】POCO学习总结（四）——MinGW编译poco
- 076_html5事件属性
- QProcess 类
- ajax实现一个前台的进度条,前台ajax实现上传文件并且有进度条
- Golang类型转换模块 - gconv
- Windows® Server 2003 SP1 Platform SDK Web Install
- 真假Kingston U盘识别
- 城市云脑研究之三，人工智能在城市云脑建设中的地位与作用
- 【Android -- 技术周刊】第 020 期
- GTK之信号和回调函数
- 安装torchvision:ImportError:DLL load failed:找不到指定的模块
- 数字档案管理系统解决方案 - 数字化档案建设方案
- 计算机应用的毕业论文论文,计算机应用本科毕业论文
- 2021年最新阿里面经分享，复盘我的阿里巴巴三轮技术面，希望对大家有帮助！
- 什么是指针压缩？如何开启和关闭指针压缩？为什么要进行指针压缩？有哪些注意的地方？
- Java 小白 设计电池类，在电池类的构造方法中声明一节5号电池的电压为1.5伏，使用this关键字调用电池类中的构造方法，实现电压为9伏的叠层电池，
- SpringSecurity（Web权限方案）
- 我的警长 灵宝西所第一警务区 陈静
- Ucore Lab7