JS读取本地CSV文件数据

这篇具有很好参考价值的文章主要介绍了JS读取本地CSV文件数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JS读取本地CSV文件数据

JS读取本地CSV文件数据
文件中的部分数据如图
JS读取本地CSV文件数据
需求是需要提取出文件的数据

使用到的模块是 Papa Parse

1. 依赖安装

yarn add papaparse

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

2. 解析本地文件

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

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

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

2.1 使用文件上传的形式

这里使用elementUI的上传组件

<el-upload
  class="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)
	    }
	  })
    }
  }
}
  1. 因为使用的是本地直接导入, 所以数据的结果需要在complete函数中接受
  2. 文件格式和数据的结果如下JS读取本地CSV文件数据

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

  1. 需要注意xhr.responseText的结果如下,也就是说相当于已经将数据获取
    JS读取本地CSV文件数据
  2. XMLHttpRequest.overrideMimeType(), 指定charset=GB2312 是为了将中文字符识别
  3. filePath就是需要传递的文件路径, 需要注意的是, 如果是Vue项目, 需要放在public文件夹下
    JS读取本地CSV文件数据
  4. Papaconfigheader: true是为了将CSV的表头变成key
    JS读取本地CSV文件数据
  5. 如果不设置header:true 就会变成下面的内容
    JS读取本地CSV文件数据
  6. 更多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文件数据文章来源地址https://www.toymoban.com/news/detail-465105.html

到了这里,关于JS读取本地CSV文件数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 将实体类对象数据存入和读取进csv文件(可追加)

      最近公司一个新的项目,因为需要存储的数据很少,单独去部署一个数据库去存储该数据显然是不划算的,所以想的是通过存入csv文件中来代替存入数据库中。说干就干。   CSV代表逗号分隔值(Comma-Separated Values),是一种常见的文本文件格式,用于存储表格数据,例如电

    2024年02月12日
    浏览(51)
  • 【数据处理】Pandas读取CSV文件示例及常用方法(入门)

    查看读取前10行数据 2067 向前填充 指定列的插值填充 使用某数据填充指定列的空值 示例: 类似切片 array([‘SE’, ‘cv’, ‘NW’, ‘NE’], dtype=object) 类似数据库查询中的groupby查询 先添加新的一列按月将数据划分 聚合,对指定的列按月划分求平均值等 min 最小值 max 最大值 sum

    2024年02月06日
    浏览(204)
  • python 读取文件夹下子文件夹下的csv数据表

    可以使用 Python 中的  os  和  csv  模块来读取文件夹下的文件夹的 csv 数据。具体的步骤如下: 导入  os  和  csv  模块。 使用  os  模块的  listdir  函数列举出目标文件夹下的所有子文件夹的名称。 对于每个子文件夹,列举出其中的所有 .csv 文件的名称,并逐一读取 csv

    2024年02月11日
    浏览(72)
  • 如何使用pandas读取csv文件中的某一列数据

    使用pandas读取csv文件中的某一列数据,可以这样做: 先导入pandas模块: import pandas as pd 使用 pd.read_csv 函数读取csv文件: df = pd.read_csv(\\\"文件名.csv\\\") 使用 df[\\\"列名\\\"] 读取某一列数据: column = df[\\\"列名\\\"] 例如,如果你有一个csv文件叫做 example.csv ,并且有一列叫做 age ,你可以这样

    2024年02月13日
    浏览(45)
  • CSV导出(通过读取数据字节流直接上传文件到服务器)

    文件之前读取大多数都是用前端点击相应传入后端,通过HttpServletResponse response得输入输出流进行导入导入导出数据。 近期碰到得需求是定时查询数据库数据并通过csv文件上传至系统。所以不能使用HttpServletResponse,因为对应文件流比较熟悉所以最开始使用文件流进行读写数据

    2024年02月12日
    浏览(54)
  • Python编程读取csv文件数据分别计算RMSE、SD、R

    使用 Pandas 和 NumPy 库,从 CSV 文件中读取数据,并对列名进行了更新。使用循环计算了三组数据的 RMSE、标准差和相关系数,并将结果打印输出。其中,RMSE(Root Mean Squared Error)是衡量预测值和真实值之间误差的一种方法;SD(Standard Deviation)是预测值和真实值之间误差的标准

    2024年02月20日
    浏览(40)
  • Python两种读取txt与csv文件方式(利用numpy处理数据)

    一共80个数据(只截取前10个数据) 在excel中显示的内容 在pycharm中显示的内容 一共80个数据 在记事本中显示的内容 在pycharm中显示的内容 1、读取所有内容 data_pd打印结果 2、数据转为numpy data_np打印结果 1、读取所有内容 data_pd打印结果 2、数据转为numpy data_np打印结果 1、读取所

    2023年04月11日
    浏览(54)
  • 用 VB.net,VBA 两种方式 读取单元格内的 换行数据,并出力到 CSV文件

    需求 如下图所示,为了生成csv文件导入数据库,需要将下图 的 1 和 2 拼接成 如下 3 所示的一行数据, 开头为 1 ,往后为 2 的换行数据 将换行符 替换为 如 3 所示的 br , 同时 1 和 2 用双引号 括起来,中间用 逗号 隔开。 VB.net 代码如下 VBA 代码如下 生成文件如下 file_vba.csv 总

    2024年02月11日
    浏览(37)
  • 【uniapp】存储数据到本地文件以及读取本地文件数据

          可能存在的问题:                 1、高版本的安卓系统可能在文件系统中看不到文件但是可以读取                 2、该方法在安卓10系统中可能会有问题  

    2024年02月11日
    浏览(50)
  • JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)

    FileReader.readAsArrayBuffer() - Web API 接口参考 | MDN FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件,同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。 https://

    2024年02月15日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包