JS读取本地CSV文件数据(js读取本地excel)

编辑：rootadmin

JS读取本地CSV文件数据 JS读取本地CSV文件数据

推荐整理分享JS读取本地CSV文件数据(js读取本地excel)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js 读取文本文件,js 读取本地数据,js读本地文件,js读本地文件,js读取本地文件内容并写入,js读取本地文件内容并写入,js读取本地excel,js 读取本地数据,内容如对您有帮助，希望把文章链接给更多的朋友！

文件中的部分数据如图需求是需要提取出文件的数据

使用到的模块是 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) } }) } }}因为使用的是本地直接导入, 所以数据的结果需要在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 })}

得到的数据

本文链接地址:https://www.jiuchutong.com/zhishi/297656.html 转载请保留说明！

上一篇：选择器(选择器优先级)

下一篇：2023年重庆邮电大学计算机科学与技术（802）初试经验贴(2023年重庆邮电大学研究生分数线)