前言
在前端开发过程中,经常会用到一些静态的csv数据,最普通的处理方式就是把数据包含在自己的项目中,跟随项目统一部署到服务器,使用时直接去请求服务器的csv数据。但是这样处理有几个劣势:
- 前端拿到的都是明文数据,可以在控制台中直接看到,数据保密性差。
- 冗余数据比较多,数据体积相对比较大。
关于数据冗余,举个例子:
如这里有一个学校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文件头
})
使用注意事项
- csv转png时,指定int类型的列,可以提高转换效率(如果文件比较小,如不足万条,这点可以忽略)。
- 指定的int列的最大值,不能大于 16,581,375(即 255 * 255 * 255, 16.5百万+)。
- 非int类型的列,唯一值总数也不能大于 16,581,375。
详细的使用说明见:csv2png