前端实现excel导出和导入（react项目）

最近公司有个新需求，需要前端导出规定模板的excel,导入的时候前端解析excel文件，数据处理一下传给后台，下面分享下纯前端实现excel的导出和导入：

excel导出

  handleClick = () => {
    // 定制化改动地方
    let excelData = this.state.excelData // 数据是后台返回渲染导出的excel数据的
    let data = []
    if (excelData.length) {
      for (let i = 0; i < excelData.length; i++) {
        let obj = {
          '监控面编号': excelData[i].taskName,
          '监控点编号': excelData[i].monitorPointNumber,
          '高程（m）': '',
        };
        data.push(obj);
      }
    } else {
      let obj = {
        '监控面编号': '',
        '监控点编号': '',
        '高程（m）': '',
      };
      data.push(obj);
    }
    // 表格标题

    const options = {
      dataTitle: '表名：哈哈哈',
      reportCompany: '说明：XXXX',
      date: `日期`,
      reportType: `施工工况`,
    }
    // 配置文件类型
    const wopts = { bookType: 'xlsx', bookSST: true, type: 'binary', cellStyles: true };
    this.recordExcelDown(data, wopts, options);
  }
  recordExcelDown = (json, type, options) => {
    var tmpdata = json[0];
    // 定制化改动地方
    json.unshift({}, {}, {}, {}); // 向表格数据中插入4行位置（规定的模板）
    const keyMap = []; // 获取keys
    for (const k in tmpdata) { // 为插入的4行位置添加数据
      keyMap.push(k);
      // 定制化改动地方
      json[3][k] = k; // json[3][k] = k  3为插入4行的最后一行索引，用于展示列头
    }
    var tmpdata = []; // 用来保存转换好的json
    json
      .map((v, i) => {
        const data = keyMap.map((k, j) => {
          return Object.assign(
            {},
            {
              v: v[k],
              position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 2), // 表格数据的位置
            }
          );
        });
        return data;
      })
      .reduce((prev, next) => prev.concat(next))
      .forEach(
        (v, i) =>
        (tmpdata[v.position] = {
          v: v.v,
        })
      );
    let outputPos = Object.keys(tmpdata); // 设置区域,比如表格从A1到D10
    // 定制化改动地方
    tmpdata.A1 = { v: options.dataTitle };  // A1-A4区域的内容
    tmpdata.A2 = { v: options.reportCompany };
    tmpdata.A3 = { v: options.date };
    tmpdata.A4 = { v: options.reportType };
    tmpdata.C3 = { v: '2020-1-1' };
    tmpdata.C4 = { v: '1号梁段挂篮就位' };
    tmpdata.C6 = { v: '1.001' };
    tmpdata.C1 = { v: 'tid' };
    tmpdata.D1 = { v: this.props.taskId };
    tmpdata.E1 = { v: 'bid' };
    tmpdata.F1 = { v: this.props.bridgeRecord.id };
    // 定制化改动地方
    outputPos = ['A1'].concat(['A2'], ['A3'], ['A4'], ['C1'], ['C4'], ['C5'], ['C6'], ['D1'], ['D3'], ['D4'], ['D6'], ['E1'], ['F1'], outputPos);
    // 定制化改动地方
    tmpdata.A1.s = {
      font: { sz: 14, bold: true, vertAlign: true },
      alignment: { vertical: 'center', horizontal: 'center' }, // 垂直、水平
      fill: { bgColor: { rgb: 'E8E8E8' }, fgColor: { rgb: 'E8E8E8' } },
    }; // <====设置xlsx单元格样式
    tmpdata.A2.s = {
      font: { sz: 12, bold: true, vertAlign: true },
      alignment: { vertical: 'center', horizontal: 'bottom' },
    }; // <====设置xlsx单元格样式
    tmpdata.A3.s = {
      font: { sz: 12, bold: true, vertAlign: true },
      alignment: { vertical: 'center', horizontal: 'bottom' },
    }; // <====设置xlsx单元格样式
    tmpdata.A4.s = {
      font: { sz: 12, bold: true, vertAlign: true },
      alignment: { vertical: 'center', horizontal: 'bottom' },
    }; // <====设置xlsx单元格样式
    // s-e 代表区域 c-r 代表列-行的索引
    // 定制化改动地方
    tmpdata['!merges'] = [
      {
        s: { c: 0, r: 0 },
        e: { c: 1, r: 0 },
      },
      {
        s: { c: 0, r: 1 },
        e: { c: 9, r: 1 },
      },
      {
        s: { c: 0, r: 2 },
        e: { c: 1, r: 2 },
      },
      {
        s: { c: 0, r: 3 },
        e: { c: 1, r: 3 },
      },
    ]; // <====合并单元格
    let dataArrWidth = []
    // 定制化改动地方
    json.forEach(item => {
      dataArrWidth.push({ wpx: 100 })
    })
    tmpdata['!cols'] = dataArrWidth;// <====设置一列宽度， 代表20列都是300宽
    const tmpWB = {
      SheetNames: ['mySheet'], // 保存的表标题
      Sheets: {
        mySheet: Object.assign(
          {},
          tmpdata, // 内容
          {
            '!ref': `${outputPos[0]}:${outputPos[outputPos.length - 1]}`, // 设置填充区域（表格渲染区域）
          }
        ),
      },
    };
    const tmpDown = new Blob(
      [
        this.s2ab(
          XLSX.write(
            tmpWB,
            { bookType: type == undefined ? 'xlsx' : type.bookType, bookSST: false, type: 'binary' } // 这里的数据是用来定义导出的格式类型
          )
        ),
      ],
      {
        type: '',
      }
    );
    // 定制化改动地方
    this.saveAs(tmpDown, `${'记录模板' + '.'}${type.bookType == 'biff2' ? 'xls' : type.bookType}`);
  }

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

这边也是借鉴了百度的大佬，合并单元格可以生效的，不过样式的修改并没有生效，有需要的可以自己研究下。

excel导入

我选择的是原始的input type=file 来实现文件的上传解析，因为初始的这个标签效果并不是很好看，右边还默认带着一个未选择任何文件的字样，又改不掉样式，这边我用了个小技巧分享出来：
原理：input的样式设置display: none 用过div绝对定位在这儿，取原始input的id 并添加点击事件，从而实现点击div实现文件上传
html部分代码：

        <Col span={20} className={style.btnSpec}>
        <input
          type='file' accept='.xlsx, .xls' onChange={this.excelImport} style={{ height: '30px', lineHeight: '26px', display: 'none' }} id="batchUpload" />
          <div onClick={this.centerUploadBox} className={style.centerUploadBox}>
            文件上传
          </div>
        </Col>
1
2
3
4
5
6
7

js部分代码：

  // div按钮实现上传
  centerUploadBox = () => {
    var me = this;
    let batchUpload = document.querySelector('#batchUpload');
    batchUpload.click();
    let filesList = document.querySelector('#batchUpload').files;
    batchUpload.addEventListener('change', function () {
      filesList = document.querySelector('#batchUpload').files;
      if (filesList.length == 0) {
        return;
      }
    })
  }
  //导入excel
  dataImport = file => {
    const { dispatch } = this.props
    // 获取上传的文件对象
    const { files } = file.target;
    // 通过FileReader对象读取文件
    const fileReader = new FileReader();
    fileReader.onload = event => {
      // try {
      const { result } = event.target;
      // 以二进制流方式读取得到整份excel表格对象
      const workbook = XLSX.read(result, { type: 'binary' });
      // 存储获取到的数据
      let params = []
      let listRow = []; // 多少列的数组
      let maxHeight = 0;
      let indexK = 0

      console.log(workbook)
      let oriData = workbook.Sheets.mySheet;
      // 这边就是读取了excel的所有内容
      let excelFilterData = []

      for (let k in oriData) {
        ++indexK
        if (indexK == 1) {
          maxHeight = oriData[k].substring(oriData[k].lastIndexOf(":") + 2)
        } else {
          listRow.push(k.substring(0, 1))
        }

      }

      listRow = Array.from(new Set(listRow))
      listRow.splice(listRow.length - 1, 1)

      // 字母排序
      listRow = listRow.sort((s, t) => {
        let a = s.toLowerCase();
        let b = t.toLowerCase();
        if (a < b) return -1;
        if (a > b) return 1;
        return 0;
      })
      //找到最大列 eg.9
      //找到最大行 eg.39
      //这边主要是处理后台需要的数据
      for (let i = 2; i <= listRow.length - 1; i++) {
        //循环行
        if (oriData[listRow[i] + '3']) {
          if (oriData[listRow[i] + '3'].h) {
            excelFilterData.push(oriData[listRow[i] + '3'].h)
          } else if (oriData[listRow[i] + '3'].v) {
            excelFilterData.push(this.formatDate(oriData[listRow[i] + '3'].v, '-'))
          }
        }


        for (let j = 6; j <= Number(maxHeight); j++) {
          let reg = /^[0-9,.]*$/, item = {}

          if (oriData[listRow[i] + j] && oriData[listRow[i] + j].h && reg.test(oriData[listRow[i] + j].h)) {
            item = {
              calculationElevation: oriData[listRow[i] + j] ? oriData[listRow[i] + j].h : "",
              constructionMonitorPoint: {
                monitorPointNumber: oriData[`B${j}`] ? oriData[`B${j}`].h : "",
              },
              constructionMonitorTask: {
                taskName: oriData[`A${j}`] ? oriData[`A${j}`].h : "",
              },
              constructionMonitorTaskCollection: {
                checkTime: oriData[listRow[i] + '3'] ? oriData[listRow[i] + '3'].h ? oriData[listRow[i] + '3'].h : this.formatDate(oriData[listRow[i] + '3'].v, '-') : "",
                constructCondition: oriData[listRow[i] + '4'] ? oriData[listRow[i] + '4'].h : "",
              }
            }
            params.push(item)
          }
        }
      }
      this.setState({ excelFilterData: excelFilterData })
      console.log(params)
      this.setState({ filterVisible: true, excelParams: params })


    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);
  }
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

div按钮的样式：

.centerUploadBox {
    margin-top: 8px;
    height: 30px;
    line-height: 26px;
    width: 89px;
    float: right;
    margin-right: 623px;
    cursor: pointer;
    background: #fafafa;
    padding: 0 10px;
    padding-top: 1px;
    font-size: 16px;
    border-radius: 0px;
    color: #000000e6;
    border: solid 1px #000;
    border-color: rgba(0, 0, 0, 0.31);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

按钮就是这样的 哈哈哈哈哈哈 也不是很好看 根据需求和页面布局自行画吧 ~
以上就是纯前端实现excel导出和导入！！！ 不足之处就是设置样式没有生效 ，导入的时候不能做到识别合并单元格，所以说很复杂或者规定样式的excel可能还得后台画，也有很大可能我是不会的-_-zzzzzzzz~