使用 el-upload 和 xlsx 上传 xlsx文件

一、安装 xlsx

cnpm i xlsx

二、在 vue 中使用

我这边是使用 element 里面的 el-upload 组件上传方法

   <el-upload
      ref="upload"
      action=""
      accept=".csv"
      :headers="myHeaders"
      :on-change="upload"
      :http-request="handleHttpRequestImg"
      :show-file-list="false"
    >
      上传文件
    </el-upload>

三、在组件中映入安装好的 XLSX

 import XLSX from 'xlsx'

四、在两种回调中获取 file 的方法

/*
* http-request 回调
* 覆盖默认的上传行为，可以自定义上传的实现
*/ 
handleHttpRequestImg (object) {
    this.readExcel1({ 0: object.file })
}


/*
* on-change 回调
* 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
*/ 
upload(file) { 
    const files = { 0: file.raw }      
    this.readExcel1(files)
}

五、使用，并且解决读取文件审核中文乱码

      readExcel1 (files) { // 表格导入
        var that = this
        if (files.length <= 0) { // 如果没有文件名
          return false
        }
        const fileReader = new FileReader()
        fileReader.onload = (ev) => {
          try {
            // 获取 ev.target.result 数据
            const data = ev.target.result

            // 解决中文乱码 cptable 文件很中要
            // cptable 需要文件引入

            var str = cptable.utils.decode(936, data)
            const workbook = XLSX.read(str, {
               type: 'string',
                // cellDates 是否转时间格式，如果不写或者写 flase，时间就会给你返回一串数字
               cellDates: true
            })
            const wsname1 = workbook.SheetNames[0]// 取第一张表
            // 第一张文件的数据
            const ws1 = XLSX.utils.sheet_to_json(workbook.Sheets[wsname1], { defval: '' })
            var titlteData = ws1[0]
            var titlteDatalist = [] // 表头数据

            // titlteDatalist 整理出来的表头数据
            for (var k in titlteData) {
              var titlteName = k.replace(/(^\s*)|(\s*$)/g, '')
              titlteDatalist.push({
                titlteName: titlteName
              })
            }
            this.$nextTick(() => {
              that.$emit('on-titlteDatalist', titlteDatalist, ws1)
            })
            try {
            } catch (err) {
              console.log(err)
            }
          } catch (e) {
            return false
          }
        }
        fileReader.readAsBinaryString(files[0])
      }

六、 cpexcel 文件获取位置

链接：https://pan.baidu.com/s/11Kf60Arp94Z-HkbabRMaNA 提取码：jcd7 复制这段内容后打开百度网盘手机App，操作更方便哦

七、读取的时间变成一串数字 44081.73594907407，转成日期字符串

cellDates: true 在读取文件中写入这句话，返回来的就是时间格式

XLSX.read(str, {
            type: 'string',
            cellDates: true
          })

时间转字符串格式 ‘年/月/日时:分:秒’

that.formatTime(new data(), 'Y/M/D h:m:s')

 
  // 参数number为毫秒时间戳，format为需要转换成的日期格式
    formatTime (number, format) {
      const time = new Date(number)
      const newArr = []
      const formatArr = ['Y', 'M', 'D', 'h', 'm', 's']
      newArr.push(time.getFullYear())
      newArr.push(this.formatNumber(time.getMonth() + 1))
      newArr.push(this.formatNumber(time.getDate()))
      newArr.push(this.formatNumber(time.getHours()))
      newArr.push(this.formatNumber(time.getMinutes()))
      newArr.push(this.formatNumber(time.getSeconds()))
      for (const i in newArr) {
        format = format.replace(formatArr[i], newArr[i])
      }
      return format
    },
    // 格式化日期，如月、日、时、分、秒保证为2位数
    formatNumber (n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    },

使用 el-upload 和 xlsx 上传 xlsx文件

猜你喜欢