JS读取本地CSV文件数据

文件中的部分数据如图

需求是需要提取出文件的数据

使用到的模块是 Papa Parse

1. 依赖安装

yarn add papaparse

papaparse的基本使用可以参考官方demo

2. 解析本地文件

首先需要注意, papaparse解析本地文件, 需要的文件格式是从DOM中获得的File对象, 不能直接使用require()导入文件

以下方法直接导入是不可行的

Papa.parse(require('xx')) // 是不可行的

2.1 使用文件上传的形式

这里使用elementUI的上传组件

<el-uploadclass="upload-demo"action="#"multiple:limit="1":http-request="httpRequest":file-list="[]"
><el-button size="small" type="primary">点击上传</el-button>
</el-upload>

import Papa from 'papaparse'
export default{methods: {httpRequest({ file }) {console.log(file)Papa.parse(file, {header: true,complete: e => {console.log(e)}})}}
}

因为使用的是本地直接导入, 所以数据的结果需要在complete函数中接受
文件格式和数据的结果如下

2.2 创建`XMLHttpRequest`请求, 相当于已经将数据获取, 通过`papaparse`整理

需要注意xhr.responseText的结果如下,也就是说相当于已经将数据获取
XMLHttpRequest.overrideMimeType(), 指定charset=GB2312 是为了将中文字符识别
filePath就是需要传递的文件路径, 需要注意的是, 如果是Vue项目, 需要放在public文件夹下
Papa的config中header: true是为了将CSV的表头变成key值
如果不设置header:true 就会变成下面的内容
更多config的设置请参考文档

import Papa from 'papaparse'
/** 读取 csv 文件 */
export const readCSVFile = (filePath) => {if(!filePath) throw new Error('请输入正确的文件路径')const xhr = new window.XMLHttpRequest()xhr.open('GET', filePath, false)xhr.overrideMimeType('text/html;charset=GB2312')xhr.send(null)const { data } = Papa.parse(xhr.responseText, {header: true})
}

得到的数据

JS读取本地CSV文件数据相关推荐

Vue.js读取本地json文件并分页显示
Vue.js读取本地json文件并分页显示 1.功能实现通过axios异步加载技术读取本地的json文件内容,并通过vue.js处理数据在h5页面分页显示(这里以3行数据分页) 2.student. ...
python读取oracle数据到hvie parquet_关于sparksql操作hive，读取本地csv文件并以parquet的形式装入hive中...
说明:spark版本:2.2.0 hive版本:1.2.1 需求: 有本地csv格式的一个文件,格式为${当天日期}visit.txt,例如20180707visit.txt,现在需要将其通过spar ...
vue 项目如何读取本地json文件数据
在项目根目录有一个static文件夹目录,将所需要的json文件放在该static目录下,使用axios发起get请求获取对应的json文件数据 import axios from 'axios' / ...
Python webdriver 读取本地csv文件中数据提示：IOError: [Errno 2] No such file or directory
创建本地文件打开excel,创建数据,另存为 XXX.csv 编写代码并调式 #-*-coding:utf-8-*- import os import csv #导入csv包files = fil ...
Neo4j导入本地CSV文件三元组关系生成图谱
本地CSV文件数据如下: 先删除其余所有节点: match (n) detach delete n 使用命令如下: load csv with headers from "file:/4. ...
html 查看excel表格,html展示excel表格数据-html读取本地excel文件并展示
怎么用html实现excel表格首先html不能读取本地excel文件其次就算是javascript 也是不允许的这是为了安全考虑如果前端脚本可以读取本地文件那很不安全如何将excel上的 ...
html 读取本地xml文件,JS读取本地的XML文件
要想让JS读取本地的XML代码,得具备这样的条件,一般情况下,需要一个JS文件,一个XML文件,最后这两个文件就放在相同的路径下,这样方便调用. 一.XML文件代码示例大众计算机学习网 www.dz ...
python读取c盘中的csv文件-python读取当前目录下的CSV文件数据
在处理数据的时候,经常会碰到CSV类型的文件,下面将介绍如何读取当前目录下的CSV文件,步骤如下 1.获取当前目录所有的CSV文件名称: #创建一个空列表,存储当前目录下的CSV文件全称 file_n ...
python读取csv某一列存入数组_python 读取.csv文件数据到数组(矩阵)的实例讲解
利用numpy库 (缺点:有缺失值就无法读取) 读: import numpy my_matrix = numpy.loadtxt(open("1.csv","rb&qu ...

JS读取本地CSV文件数据

JS读取本地CSV文件数据

1. 依赖安装

2. 解析本地文件

2.1 使用文件上传的形式

2.2 创建`XMLHttpRequest`请求, 相当于已经将数据获取, 通过`papaparse`整理

JS读取本地CSV文件数据相关推荐

最新文章

热门文章

JS读取本地CSV文件数据

JS读取本地CSV文件数据

1. 依赖安装

2. 解析本地文件

2.1 使用文件上传的形式

2.2 创建XMLHttpRequest请求, 相当于已经将数据获取, 通过papaparse整理

JS读取本地CSV文件数据相关推荐

最新文章

热门文章

2.2 创建`XMLHttpRequest`请求, 相当于已经将数据获取, 通过`papaparse`整理