vue +elementui 导入CSV文件

本文介绍了如何在Vue项目中安装依赖并封装一个公共JS方法,使用papaparse库解析CSV文件,确保正确处理编码问题,最终在HTML页面上实现文件上传、数据展示和导出功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

目录

1. 安装依赖

2. 封装一个公共js方法,使用papaparse解析CSV文件且返回数组格式

3. html页面

4. 案例图


1. 安装依赖

cnpm i papaparse -s

cnpm i  jschardet -s

2. 封装一个公共js方法,使用papaparse解析CSV文件且返回数组格式

import jschardet from 'jschardet'
import Papa from 'papaparse'

/**
 * csv file to 2D arr
 * */
// 检查编码,引用了 jschardet
function checkEncoding(base64Str) {
  // 这种方式得到的是一种二进制串
  var str = atob(base64Str.split(';base64,')[1])
  // console.log(str);
  // 要用二进制格式
  var encoding = jschardet.detect(str)
  encoding = encoding.encoding
  // console.log( encoding );
  if (encoding === 'windows-1252') {	// 有时会识别错误(如UTF8的中文二字)
    encoding = 'ANSI'
  }
  return encoding
}
function csv(file) {
  return new Promise((resolve, reject) => {
    // let file = this.$refs.csvData.files[0]
    const fReader = new FileReader()
    fReader.readAsDataURL(file)
    fReader.onload = function (evt) {
      const data = evt.target.result
      // console.log( data );
      const encoding = checkEncoding(data)
      // console.log(encoding);
      // 转换成二维数组,需要引入Papaparse.js
      Papa.parse(file, {
        encoding: encoding,
        complete: function (results) {		// UTF8 \r\n与\n混用时有可能会出问题
          // console.log(results)
          const res = results.data
          if (res[res.length - 1] === '') {	// 去除最后的空行
            res.pop()
          }
          resolve(res)
        }
      })
    }
  })
}
export default {
  csv
}

3. html页面

ps: 里面有导入的一部分代码,不需要就删除即可。<

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值