前端 读取/导入 Excel文档

情况： 需要通过Excel表，将数据导入到数据库，但是后台人员出差了，我又只会PHP，没用过node，所以只能前端导入Excel文件，然后循环调用后台的单条添加接口了。

库： Excel.js（版本4.3.0）

CDN地址：

<script src="https://cdn.bootcdn.net/ajax/libs/exceljs/4.3.0/exceljs.min.js">script>
1

Excel.js 中文文档：https://gitee.com/alan_scut/exceljs

下面是动态Excel表单

下面是file文件（Excel文件）获取到的对象：

下面是代码中输出的需要插入的数据：

代码：

使用方法： importExcal()

// 全局函数执行完成后执行组件的钩子函数、组件事件、自定义事件

// 导入Excel表
async function importExcal() {
  // 文件内容 (这里是从input file里面获取到的内容)
  var file = input_file;
  // 提交后端数据的整体数组
  var data_arr = [];
  // 行程的最大列数（包含前面不变的）
  var stay_col_num = 0;

  if (file) {
    // 判断文件类型
    let filetype = file.name.split('.')[file.name.split('.').length - 1]
    let filetypes = '.xlsx,.xls'
    if (filetypes.indexOf(filetype) === -1) {
	    this.$message({
			message: '请上传 .xlsx 或 .xls 文件。',
			type: 'warning'
		})
      return;
    }
    // 读取文件文件
    const reader = new FileReader();

    // file.raw是具体的文件内容，需要看一下你获取到的是file.raw，还是file[0]即可 将文件转为 ArrayBuffer 格式
    console.log("这里是获取到的file文件内容：", file)
    // 这里要用 readAsArrayBuffer 转成buffer，因为下面读取要用到 buffer 才可以
    reader.readAsArrayBuffer(file.raw);
    reader.onload = function (event) {
      try {
        const result = event.target.result;
        var workbook = new ExcelJS.Workbook();
        // 读取 buffer 内容
        workbook.xlsx.load(result)
          .then(async function () {
            // 迭代所有sheet （如果只有一个，可以通过名称获取 var worksheet = workbook.getWorksheet('My Sheet');）
            workbook.eachSheet(async function (worksheet, sheetId) {
              // 清空数据数组
              data_arr = [];
              // 获取 形成安排 的列数(从第8列开始的), 总不会超过100天，所以写个100
              // 在这里获取 形成列的长度，是因为这里是表头，不会像内容一样出现空白单元格，造成无法获取到最终列的情况
              for (let j = 8; j <= 100; j++) {
                // 当列到 行程安排 且，j+1 不是 行程安排的时候，就是行程安排的列宽
                if (worksheet.getCell(`${getLetter(j)}2`).value == '行程安排' && worksheet.getCell(`${getLetter(j + 1)}2`).value !== '行程安排') {
                  stay_col_num = j;
                  // 如果两个都有值的话，就跳出循环
                  break;
                }
              }
              // 迭代工作表中具有值的所有行
              worksheet.eachRow(function (row, rowNumber) {
                // 数据是从第四行开始
                if (rowNumber >= 4) {
                  // data_arr.push(row.values)
                  // 每行的数据
                  let row_data = row.values;
                  // 传给后端的对象
                  let data_obj = {
                    "guest": "",
                    "name": "",
                    "sex": "",
                    "company": "",
                    "job": "",
                    "phone": "",
                    "stay": []
                  }

                  // 循环每行的数据
                  row_data.map(function (item, index, arr) {
                    // 如果是前7列，则是固定列的值，直接复制即可，否则的话则是 动态的行程安排
                    if (index <= 7) {
                      switch (index) {
                        case 2:
                          // 嘉宾类别
                          data_obj.guest = item ? item : "";
                          break;
                        case 3:
                          // 姓名
                          data_obj.name = item ? item : "";
                          break;
                        case 4:
                          // 性别
                          data_obj.sex = item ? item : "";
                          break;
                        case 5:
                          // 单位
                          data_obj.company = item ? item : "";
                          break;
                        case 6:
                          // 职务
                          data_obj.job = item ? item : "";
                          break;
                        case 7:
                          // 手机号
                          data_obj.phone = item ? item : "";
                          break;
                      }
                    } else {
                      // 行程安排（从第八列开始到形成的最后一列结束）
                      if (index >= 8 && index <= stay_col_num) {
                        if (worksheet.getCell(`${getLetter(index)}${rowNumber}`).value == '是') data_obj.stay.push(worksheet.getCell(`${getLetter(index)}3`).value);
                      }
                    }
                  })
                  // 将插入后台的数据添加进数组
                  data_arr.push(data_obj);
                }
              });
              console.log("全部需要插入数据库的数据的数组：", data_arr)
              // 这里使用了 Promise 解决在for循环内，使异步接口，进行同步提交的问题；文章后面有详细说明
              for (let i = 0; i < data_arr.length; i++) {
                let result_data = await createUser(data_arr[i]);
                if (!result_data.result) {
					// 如果出错，就跳出循环
					this.$message({
						message: `第 ${i + 1} 行数据 ${data_arr[i].name}(${data_arr[i].phone})，由于 ${result_data.msg} 导入失败`,
						type: 'error'
					})
					// 跳出循环
                	break;
                }
              }
            });
          });
      } catch (err) {
      	this.$message({
			message: '读取文件错误',
			type: 'error'
		})
        console.log('err', err);
      }
    };
  } else {
  	this.$message({
		message: '请选择文件',
		type: 'error'
	})
  }
}

// 添加用户信息接口
async function createUser(data) {
  return await new Promise(function (resolve, reject) {
    // 处理异步逻辑时候调用resolve和reject函数
    axios({
      method: 'POST',
      url: `${base_url}/api/add`,
      headers: {
        // 没有可以不要token
        // authorization: `bearer ${token}`
      },
      // 数据
      data: data
    }).then(res => {
      let resp = res.data;
      if (resp.code == 1) {
        if (resp.data.code == 200) {
          resolve({
            "result": true
          });
        }
      } else {
        resolve({
          "result": false,
          "msg": resp.msg
        });
      }
    }).catch(req => {
      reject({
        "result": false,
        "msg": ""
      });
    });
  });
}

// 获取第N个字母
function getLetter(num) {
  return String.fromCharCode(64 + num);
}
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

代码中用到的方法总结：

新建工作簿

var workbook = new ExcelJS.Workbook();

读取 buffer 内容

workbook.xlsx.load(data).then(function() {
// 其他代码
});

迭代所有sheet

workbook.eachSheet(function(worksheet, sheetId) {
// 其他代码
});

按名称获取表格

var worksheet = workbook.getWorksheet(‘My Sheet’);

按ID获取表格

var worksheet = workbook.getWorksheet(1);

迭代工作表中具有值的所有行

worksheet.eachRow(function(row, rowNumber) {
console.log(‘Row：’ + rowNumber + ’ = ’ + JSON.stringify(row.values));
});

获取单元格（A2）

var collectcell = worksheet.getCell(‘A2’);

获取当前worksheet的最后一个单元格信息

var lastRowCell = worksheet.lastRow;
console.log(‘最后一行行数：’ + lastRowCell.number);

for循环内，使异步接口变成同步提交
我文章的地址：前端JS for循环内异步接口变成同步提交（JavaScript for循环异步变同步）

遇见的一些问题：
1. Excel.JS 支持的数据读取方式不同，获取的数据类型不同。例如：file，stream，buffer

另外说一下
有兴趣的朋友也可以试试 SheetJS ，感觉好像功能更多一些，下次我再需要用到excel的时候也会尝试一下的。
SheetJS中文文档：https://github.com/rockboom/SheetJS-docs-zh-CN

尝试完成，回来记录一下： SheetJS 文档会更丰富一些，但是他分社区版（免费）和专业版（收费）。社区版不支持导出文件的样式修改，专业版才可以。

我决定还是继续用 Excel.js