前端开发中处理csv数据，也许你可以试试这个方法

前言

在前端开发过程中，经常会用到一些静态的csv数据，最普通的处理方式就是把数据包含在自己的项目中，跟随项目统一部署到服务器，使用时直接去请求服务器的csv数据。但是这样处理有几个劣势：

1. 前端拿到的都是明文数据，可以在控制台中直接看到，数据保密性差。
2. 冗余数据比较多，数据体积相对比较大。

关于数据冗余，举个例子：
如这里有一个学校1000个学生的基本信息。每个学生的基本信息中，有性别、有年龄、有班级、有所在地等等。

姓名，性别，年龄，班级，所在地
王二小, 男, 13, 一年级3班, 福田区
张三丰, 男， 14, 二年级1班, 福田区
...

仔细分析下每个属性和对应的值。

• 性别： 男、女；
• 年龄： 12 - 16岁；
• 班级：每个学生都有所在班级，一个班级又有很多学生。
• 所在地：同一城市下的不同区县。

如果用csv来表达这些数据，
1000个学生，

• 男或女就要出现1000次。
• 12、13、14、15、16总计也要出现1000次。
• 每个班级名出现n次。
• 每个区县出现n次。
  我们都知道中文字符相对比较占空间，这份csv中有大量重复的中文值，数据看起来比较冗余。

csv2png

csv2png是一个小型的前端依赖包，可用于将csv数据转换成png格式，也可以将png数据还原成csv。支持在node环境和浏览器环境下运行。可以比较好的解决上面说的csv的问题。
当我们项目中有这样的静态数据时，可以考虑使用这个包将csv转换成png存储在服务端，而在客户端需要时，将png再还原成csv。

使用方法

安装

npm i csv2png

csv转png

在node环境中

const {
    
    Csv2png} = require('csv2png')

const csv = './test/data/sub.csv'

const pc = new Csv2png({
    
    
  int: [7, 8, 9, 10], // 指定int类型的列的序号，从0开始
  filePath: csv,
  width: 400  // 可以指定png图的宽度
})

pc.write('sub')

运行完后，会同时输出一份sub.png和sub.json的文件。
生成的图片

png转csv

当在客户端需要用到这份数据时，先将png转会csv。

import {
    
     Png2csv } from 'csv2png'
const pngURL = './data/sub.png'

const data = {
    
    
  // 对应csv转png时生成的json文件的内容
  ...
}

const pc = new png2csv({
    
    
  png: pngURL,
  config: data 
})
pc.parse().then((data) => {
    
    
  console.log('header',data[0]) // 打印csv文件头
})

使用注意事项

1. csv转png时，指定int类型的列，可以提高转换效率（如果文件比较小，如不足万条，这点可以忽略）。
2. 指定的int列的最大值，不能大于 16,581,375(即 255 * 255 * 255, 16.5百万+）。
3. 非int类型的列，唯一值总数也不能大于 16,581,375。

详细的使用说明见：csv2png