前言

在前端开发过程中，经常会用到一些静态的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

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

【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
前端开发中JS调试技巧，你知道几种？用过几种？
调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如 ...
一探前端开发中的JS调试技巧
转自:http://seejs.me/2016/03/27/%E3%80%90%E5%8E%9F%E5%88%9B%E3%80%91%E4%B8%80%E6%8E%A2%E5%89%8D%E7%AB% ...
前端开发中的性能那点事
前端开发中的性能那点事(一)巧用xdebug 前言: 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,funct ...
前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...
java backbone_[Java教程]移动前端开发中的Backbone之一：Backbone中的模型和集合
[Java教程]移动前端开发中的Backbone之一:Backbone中的模型和集合 0 2015-09-24 17:00:04 当我们开发含有大量Javascript的web应用程序时,首先你需要做 ...
初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
前端中什么是中台开发环境_Web前端开发中需要学习什么?会使用到哪些开发工具？...
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水.下面和千锋广州小编一起来看看吧! 前端工程师的主要职责: 前端工程师在不同的公司有不同的 ...
前端开发中的地理定位问题小总结
项目中遇到地理定位的问题,没遇过不知道,遇过就发现这是个比较坑的问题.这个问题其实困扰了我挺久的,还不如一次性了解清楚.所以本文进行了一些小总结,先简单总结我看过的关于定位技术的资料,然后介绍前端开发 ...

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

前言