前端在线预览 csv文件

记录分享一个简单的在线预览csv文件的工具——papaparse 

papaparse 官网 Papa Parse - Powerful CSV Parser for JavaScript

js和css文件提取  链接：https://pan.baidu.com/s/1OSCEigfDqg8H6ifu_9kS7A 
提取码：ccea

使用说明 （vue案例）

1、下载  npm i papaparse@5.4.0(我用的这个版本)

2、组件引入   import Papa from 'papaparse'  

3、引入css和js文件 

<script src="<%= BASE_URL %>js/heiho.js"></script>

<link href="<%= BASE_URL %>css/heiho.css" rel="stylesheet" />

4、我这是拿到后台返回的文件数据，调用的parseCsvFile方法即可。

 const res = await previewMarkingFile(filePath)
        if (res) {
          this.parseCsvFile(res)
        } else {
          throw new Error('未找到相关文件')
        }

// 预览文件文本框
    parseCsvFile(file) {
      // 引入Papaparse.js，将数据转换成二维数组
      Papa.parse(file, {
        complete: (results) => {
          const arrs = results.data
          // 去除最后的空行
          const lastItem = arrs[arrs.length - 1].every(val => val === '')
          lastItem && arrs.pop()
          // 通过heiho.js  在首页index引入的文件
          Heiho(arrs, { max: 100, title: '在线浏览.csv' })
        }
      })
    },