foreword

In the front-end development process, some static csv data is often used. The most common way to deal with it is to include the data in your own project, follow the project to deploy it to the server, and directly request the server's csv data when using it. However, this approach has several disadvantages:

The front-end gets plaintext data, which can be seen directly in the console, and the data confidentiality is poor.
There are many redundant data, and the data volume is relatively large.

Regarding data redundancy, for example:
here is the basic information of 1000 students in a school. In the basic information of each student, there are gender, age, class, location and so on.

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

Carefully analyze each attribute and its corresponding value.

Gender: Male Female;
Age: 12 - 16 years old;
Class: Each student has a class, and a class has many students.
Location: Different districts and counties under the same city.

If these data are expressed in csv,
1000 students,

Male or female will appear 1000 times.
12, 13, 14, 15, 16 also appear 1000 times in total.
Each class name appears n times.
Each district and county appears n times.
We all know that Chinese characters take up a lot of space. There are a lot of repeated Chinese values in this csv, and the data looks redundant.

csv2png

csv2png is a small front-end dependency package that can be used to convert csv data to png format and restore png data to csv. It supports running in node environment and browser environment. It can better solve the csv problem mentioned above.
When we have such static data in our project, we can consider using this package to convert csv to png and store it on the server, and restore png to csv when the client needs it.

Instructions

Install

npm i csv2png

csv to png

in the node environment

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')

After running, a sub.png and sub.json file will be output at the same time.
generated image
insert image description here

png to csv

When the client needs to use this data, first transfer png to 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文件头
})

Precautions for use

When converting csv to png, specifying an int type column can improve the conversion efficiency (if the file is relatively small, such as less than 10,000, this point can be ignored).
The maximum value of the specified int column cannot be greater than 16,581,375 (ie 255 * 255 * 255, 16.5 million+).
For non-int type columns, the total number of unique values cannot be greater than 16,581,375.

For detailed usage instructions, see: csv2png

Processing csv data in front-end development, maybe you can try this method