VUE 实现Excel导入、动态表格预览及问题总结、解决

 ps:在若依框架的导入功能上增加 预览功能。

目录

实现效果及源码

第一个问题：字段缺失

第二个问题：日期格式的列显示为数字

第三个问题：显示的时间和原始数据有差异

---

实现效果及源码

实现效果如下图：

 实现思路：

1. 动态表格：定义表头数组，表格遍历表头生成表格列
2. 读取excel文件内容，封装表头，绑定表格数据

先上源码：

1.上传组件

  
      
        选取文件
        

          仅允许导入xls、xlsx格式文件。
          下载模板
        
      

      已存在数据处理
        覆盖
        追加
      
      
预览
 
      
        
        
      
      

        确 定
        取 消
      
    

2.动态表格

 3.读取excel文件方法

 //选取文件
    async handleChange(file, fileList) {
      this.loading = true
      let _this = this
      let reader = new FileReader()
      reader.onload = function (e) {
        let data = e.target.result
        this.wb = XLSX.read(data, {
          type: 'binary',
          cellDates: true,
        })
        console.log(this.wb.Sheets[this.wb.SheetNames[0]])
        /**
         * wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
         * wb.Sheets[Sheet名]获取第一个Sheet的数据
         */
        let excelJson = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]], {
          defval: null,
          raw: false 
        })
        console.log(excelJson)
        //表头
        for (var item in excelJson[0]) {
          _this.tableCol.push({
            colProp: item,
            colLable: item,
          })
        }
        excelJson.forEach((element) => {
          element['日期'] = formatDate(element['日期'])
          element['预计开始时间'] = formatDate(element['预计开始时间'])
          element['预计结束时间'] = formatDate(element['预计结束时间'])
          element['实际开始时间'] = formatDate(element['实际开始时间'])
          element['实际结束时间'] = formatDate(element['实际结束时间'])
        })
        _this.tableData = excelJson
        _this.loading = false
      }
      reader.readAsBinaryString(file.raw)
    },

第一个问题：字段缺失

发现转成json 后，打印excelJson ，发现比表格里的少了十几个字段

打开表格，发现缺失的字段都是没有值的。

查找资料发现，如果defval未指定，则正常跳过空值和未定义值。如果指定，所有空点和未定义点将被填充defval

 

 在sheet_to_json函数里传入defval参数

 let excelJson = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]],{
          defval:null
        }) 

把excelJson 打印到控制台，可以看到单元格为空的字段 都为null

表头也正常显示出来了。

* 这里，其实是因为表头是从 exceljson 里读取的，所以字段不能少了。如果表头是后端传过来的，就不存在这个问题了。

第二个问题：日期格式的列显示为数字

 接下来检查表格数据，发现日期字段的值不对。

查阅官网资料 ，发现 SheetJS 处理日期和时间时，默认行为是生成数字单元， 日期单元格会自动转换回具有适当数字格式的数字单元格

函数接受一个参数，该参数指示应如何处理日期。在read函数里传入cellDates

  this.wb = XLSX.read(data, {

          type: 'binary',

          cellDates: true

        })

 修改完后，重新导入数据。按日期格式显示出来了。 

第三个问题：显示的时间和原始数据有差异

时间和excel表格里不一致。

查看控制台打印出来的表格数据。发现时间都会相差43秒 或者 44秒

console.log(this.wb.Sheets[this.wb.SheetNames[0]])

在sheet_to_json函数，把raw设为false，读取原始值

 let excelJson = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]], {
          defval: null,
          raw: false 
        })

 重新导入，这时，字段的格式和值都和excel表格里 一致了。

sheetJS官网地址：Sheet Objects | SheetJS Community Edition