前端处理表格数据思路

, ,

目的在于减轻服务端压力 一部份数据转换方法前端处理后再传给服务端存库

通过xlsx包 可以实现一些快速

一、读取File中的数据，转换为JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// utils 使用JS原生方法将文件按照二进行读取
export function readFile(){
	return new Promise((resolve,reject)=>{
    let reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = ev =>{
      resolve(ev.target.result);
    }
  })
}
// 读取file中的数据 变为JSON格式
import xlsx from 'xlsx'
let data = await readFile(file);
let workbook = xlsx.read(data,{type:"binary"});
let worksheet = workbook.Sheets[workbook.SheetNames[0]];
data = xlsx.utils.sheet_to_json(worksheet);

二、把JSON转化为符合接口格式的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// JSON转为提交服务端的格式
let arr = [];
data.forEach(item=>{
  let obj = {};
  for(let key in character){
    if(!character.hasOwnProperty(key)) return;
    let v=character[key],
        text = v.text,
        type = v.type;
    v = item[text] || '';
    type === 'string' ? (v = String(v)) : null;
    type === 'number' ? (v = Number(v)) : null;
    obj[key] = v;
  }
  arr.push(obj);
})
await delay(100);
this.show = true; //显示视图
// utils 字段对应表
export const character = {
  name:{
    text:'姓名',
    type:'string'
  },
  phone:{
    text:'电话',
    type:'number'
  }
}
// utils设置异步就间隔延迟 可用于防抖
export function delay(interval = 0){
	return new Promise((resolve,reject)=>{
    let timer = setTimeout(_=>{
      clearTimeout(timer);
      resolve();
    },interval)
  }
}

三、导出

1
2
3
4
5
6
7
8
9
10
11
let arr  = this.selection.map(item=>{
  return {
    编号:item.id,
    姓名:item.name,
    电话:item.phone    
  }
})
let sheet = xlsx.utils.json_to sheet(arr);
let book = xlsx.utils.book_new();
xlsx.utils.book_append_sheet(book,sheet,'sheet1');
xlsx.writeFile(book,'file.xls');

四、xlsx 核心源码

https://github.com/SheetJS/sheetjs/blob/master/dist/xlsx.js