vue下载excel模板文件，excel读取

一、下载excel模板文件

<template>
  <a-button type="primary"  @click="downloadExcel">下载Excel模板</a-button>
</template>

<script>
methods: {
  downloadExcel () {
  	  // templatefile.xlsx存储在public文件夹下
      let a = document.createElement('a')
      // a.href
      // 点击前往其他站点
	  // 指向本站点的某个文件，比如图片
      a.href = './templatefile.xlsx'
      // download 属性 H5的新增属性.指定且只能指定，下载后的默认文件名字和文件后缀。
      a.download = 'templatefile.xlsx'
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    }
}
</script>

二、excel读取及转换

定义方法

import XLSX from 'xlsx'

// 读取文件
export const file2Xce = (file) => {
  return new Promise(function (resolve, reject) {
    const reader = new FileReader()
    // 读取为二进制字符串
    reader.readAsBinaryString(file)
    // reader.readAsDataURL(file); // 读取为数据URL
    // reader.readAsArrayBuffer(file); //读取为数组缓冲区
    // readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)
    reader.onload = function (e) {
      const data = e.target.result
      this.wb = XLSX.read(data, {
        type: 'binary' // 二进制
      })
      const result = []
      this.wb.SheetNames.forEach(sheetName => {
        result.push({
          sheetName: sheetName,
          sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
        })
      })
      resolve(result)
    }
  })
}
// 转换
export const xyToFormat = (info) => {
  // console.log('info', info[0].sheet)
  let res = info[0].sheet
  let xylist = []
  let sliceList = []
  let resList = []
  // 只保留x和y坐标数据
  for (let n = 0; n < res.length; n++) {
    let obj = {}
    let item = res[n]
    if (item.x !== null && item.x !== undefined && item.y !== undefined && item.y !== null && typeof item.x === 'number' && typeof item.y === 'number') {
      obj.x = item.x
      obj.y = item.y
      xylist.push(obj)
      // console.log(xylist)
    } else {
      xylist = []
      break
    }
  }
  // 转换多个图层数据
  // 获取重复数据的索引
  for (let i = 0; i < xylist.length; i++) {
    for (let k = i + 1; k < xylist.length; k++) {
      if (xylist[i].x === xylist[k].x && xylist[i].y === xylist[k].y) {
        // console.log(i)
        // console.log(k)
        // 根据索引截取数据
        sliceList = xylist.slice(i, k + 1)
        // 重新组装成新的数组
        // console.log(sliceList, '--->sliceList')
        resList.push(sliceList)
      }
    }
  }
  if (sliceList.length !== 0) {
    return resList
  } else {
    alert('文件错误')
    return false
  }
}

使用

<template>
  <a-upload
    :multiple="false"
    :file-list="excelFileList"
    :before-upload="excelBeforeUpload"
    :disabled="enable"
  >
    <a-button><a-icon type="plus" />上传文件</a-button>
  </a-upload>
</template>

<script>
methods: {
  excelBeforeUpload (file) {
    // 读取文件
    file2Xce(file).then((res) => {
      // 整理数据格式，只保留x和y
      if (xyToFormat(res)) {
        this.zhList = xyToFormat(res)
        this.$emit('excelBeforeUploadEmit', file, this.zhList)
      } else {
        this.zhList = []
      }
    })
    return false
  }
}
</script>