有个需求将csv文件导入可以自定义标签并且提交直接将错误数据回显悬浮上单元格显示错误信息点击单元格可以修改信息。流程不过多介绍,分享一下如果导入导出。
首先先安装一下继续CSV文件的插件:papaparse
安装之后可以全局引入或者单页面引入,这里我只有一个页面使用所以直接在页面当中引入
之后使用elm的upload插件,在on-change函数当中先判断一下是否为csv。为什么type还要等于application/vnd.ms-excel,火狐浏览器识别csv文件为此类型。当为csv文件的时候去解析csv文件,下文中的obj就是解析的字符串,直接根据需求去处理数据。
导出csv文件 需要下载插件:json2csv
引入同导出,这里有一个坑。之前在网上看见教程是直接import json2csv from 'json2csv',使用报错 之后发现需要这样引入
首先需要建立一个标签名的数组,导出是根据这个数组中的元素对应导出数据的属性名。
文中定义的csv是插件处理好的数据 ,需求中导出不需要标签名所以我给处理好的数据的第一行去除。代码如下,根据换行符去除。直接创建a标签模拟点击。之后清除。直接打开下载的文件,看是否导出正确