JavaScript - 读取 CSV（Comma-Separated Values）文件

最新推荐文章于 2024-05-04 08:58:14 发布
最新推荐文章于 2024-05-04 08:58:14 发布
阅读量6.1k 收藏 17
点赞数 7
分类专栏： HTML & CSS & JavaScript 文章标签： javascript CSV 逗号分隔值文件格式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29761395/article/details/122324312
版权

文章目录

示例

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>读取 CSV（Comma-Separated Values）文件</title>
    </head>
    <body>
        <!-- https://www.iana.org/assignments/media-types/media-types.xhtml -->
        <!-- https://www.iana.org/assignments/media-types/text/csv -->
        <input type="file" accept="text/csv" />
        
        <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress -->
        <progress value="0"></progress>

        <script type="text/javascript">
            window.onload = (event) => {
                // console.log(event);
                main();
            }
            
            function main() {
                var inputFile = document.querySelector("input[type='file']");
                
                inputFile.onchange = (event) => {
                    // console.log(event);
                    var file = inputFile.files[0];
                    
                    var fileReader = new FileReader();
                    fileReader.readAsText(file, "utf-8");
                    
                    // 显示进度
                    var progress = document.querySelector("progress");
                    progress.max = file.size;
                    progress.value = 0;
                    fileReader.onprogress = (event) => {
                        // console.log(event);
                        progress.value = event.loaded;
                    }
                    
                    fileReader.onload = (event) => {
                        console.log(event, fileReader);
                        var result = fileReader.result;
                        console.log(result); // 读取的结果
                    }
                }
            }
        </script>
    </body>
</html>

参考

JS 读取并解析csv文件 —— 前端踩坑13

好好活着，不要熬夜
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯js读取txt,xlsx，csv，xls文件
github_37373329的博客
02-06 1万+
为了减少服务器的压力，需要前端读取文件数据，然后自己拼接分批提交给后台，这里将读文件记录下来 读取文件 String.prototype.trim=function(){ //给字符串添加一个去前后空格的方法 return this.replace(/s|xA0/g,""); } window.onload=function(){ var file=
canvas绘制心电图（js读取csv心电数据文件）
Rain的博客
03-28 1万+
一、目的 浏览器网页中绘制心电图并展示； js读取解析心电数据文件； 此文涉及到js从文件中读取心电数据环节（为什么一定是js读文件呢？因为心电图的绘制用到了HTML5中的canvas属性，而canvas属性只是提供一处绘制的区域、画布的大小等，真正的绘制过程还得在js中完成，而此文中的数据是保存在服务器中，所以需要js远程读取文件中的数据），之前对js不是很熟悉，在网上查了很多资料，感觉零零碎...
uniapp之JS读取csv文件
最新发布
weixin_46439757的博客
05-04 150
小白学习uniapp做个小项目，需要读取wps或excel生成的csv文件，记录一下，带码如下。
纯js解析CVS文件(有进度条)
qq_44719458的博客
03-14 598
纯js解析CVS文件
JavaScript CSV 解析器比较
allway2的博客
06-18 1002
JavaScript CSV Parsers ComparisonFinding the most robust, fast and easy to use CSV Parser available on NPM.https://leanylabs.com/blog/js-csv-parsers-benchmarks/CSV 是处理大量人类可读格式的表格数据的王者。它没有像 JSON 那样内置在 JavaScript 运行时中，虽然 NPM 注册表上有很多解析器，但每个都有其优点和缺点。与其他所有库一样，您
js 读取excel和csv(不是node哦可在浏览器使用哦)
qq_34117170的博客
02-22 951
1312323
js读取csv文件并使用json显示出来
10-24
主要介绍了js读取csv文件并使用json显示出来,需要的朋友可以参考下
纯javascript解析CSV文件使用并转成HTML表格
08-10
1. **读取CSV文件**：你可以通过`fetch` API或者`XMLHttpRequest`来获取CSV文件的内容。`fetch`更现代且推荐使用，但需要支持。以下是一个使用`fetch`的例子： ```javascript fetch('data.csv') .then(response =>...
Node.js-neat-csv-快速的CSV解析器
08-10
在数据处理方面，CSV（Comma Separated Values）是一种常见的格式，用于存储表格数据，如电子表格或数据库。`neat-csv` 就是一个专门为 Node.js 设计的快速、简洁的 CSV 解析器库。 `neat-csv` 库由 Sindre Sorhus ...
csv-silas:减少csv文件的值
05-05
CSV（Comma Separated Values）是一种常见的数据存储格式，用于在文本文件中组织表格数据。在处理大型CSV文件时，可能会遇到数据量过大、占用内存过多的问题。`csv-silas` 是一个JavaScript库，专注于解决这个问题，...
dih-csv-jdbc:使用 CSV-JDBC 读取 CSV 文件作为 JDBC 数据库的示例 Apache Solr 核心
07-15
CSV（Comma Separated Values）是一种简单但广泛使用的文件格式，用于存储表格数据。JDBC（Java Database Connectivity）是 Java 中访问关系型数据库的标准接口。通过 CSV-JDBC 驱动，我们可以将 CSV 文件模拟为一个...
js插件，快速解析csv文件
03-28
js插件，快速解析csv文件。亲测好用，博客有实例代码，欢迎下载！
Python-json2csv实现将jsoncsv文件转换工具
08-10
Python中的json2csv工具是一种非常实用的库，用于将JSON（JavaScript Object Notation）格式的数据转换为CSV（Comma Separated Values）格式。这个转换过程对于处理和分析大量结构化数据至关重要，因为CSV文件通常更...
js读取csv文件解析成json对象，解决csvtojson无法解析字段被双引号包裹的问题。
blake32的博客
04-28 1715
上代码 var fs = require("fs"); var AppleStorefinalarr=[];//用于存储结果的数组 async function readAppleStore(){ fs.readFile('AppleStore.csv', function (err, data) { var table = new Array(); if (err) { console.log(err.stack);
javaScript实现csv文件的解析
u011852186的博客
09-02 1352
js解析csv文件
使用JavaScript解析CSV文件
热门推荐
代码教主
06-12 1万+
您将要创造的 CSV（逗号分隔值）文件格式是在应用程序之间交换数据的一种流行方法。 在此快速提示中，我们将学习JavaScript如何帮助我们可视化CSV文件的数据。 创建一个CSV文件 首先，让我们创建一个简单的CSV文件。 为此，我们将利用在线测试数据生成器Mockaroo的优势。 这是我们的文件： 将CSV文件转换为HTML表 现在我们已经生成了文件，我们准备分析它并建立一...
如何在Node.js中读取CSV文件
ETHAN IN IT
03-09 9336
在本文中，我们将学习如何从CSV文件中读取数据。对于CSV文件，结构化逗号分隔值文件，数据将作为json对象数组进行接收。 这将使我们能够探索JavaScript类和Object.assign()的使用。创建一个员工对象数组，比JSON对象本身更容易操作。 读取文件 准备 需要安装node.js。 然后创建csv文件，并将其命名为Data.csv。 我将使用Visual Studi...
c 读取csv文件
09-07
读取 CSV 文件可以使用 C 语言标准库中的 `fopen` 和 `fscanf` 函数。下面是一个简单的示例代码： ```c #include <stdio.h> int main() { FILE *fp; char filename[] = "data.csv"; char name[50]; int age; float height; fp = fopen(filename, "r"); if (fp == NULL) { printf("Failed to open file %s\n", filename); return 1; } // 读取文件内容 while (fscanf(fp, "%[^,],%d,%f\n", name, &age, &height) == 3) { printf("Name: %s, Age: %d, Height: %.2f\n", name, age, height); } fclose(fp); return 0; } ``` 上面的代码可以读取名为 `data.csv` 的 CSV 文件，文件内容格式为：每行三个字段，分别为名字、年龄和身高，以逗号分隔，最后有一个换行符。`%[^,]` 表示读取不包含逗号的字符串，`%d` 表示读取整数，`%f` 表示读取浮点数。`fscanf` 函数返回成功读取的字段数量，当读取到文件末尾时返回 EOF。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值