前端读取本地的xlsx表格文件内容

场景 前端读取本地的xlsx表格文件内容

这里使用了xlsx.js库

<template>
  <div class="home">
        <input id="file" type="file" @change="readExcel">
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import XLSX from 'xlsx'

@Component
export default class Home extends Vue {
  outputs:any = []  // 输出的数据

  readExcel (e:any) {
      let that = this
      const files = e.target.files
      if (files.length < 1) {
        return false
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        // this.$toast('上传文件格式不正确，请上传xls或者xlsx格式')
        return false
      }

      const fileReader = new FileReader()
      fileReader.readAsBinaryString(files[0])
      fileReader.onload = (ev:any) => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          }) // 读取数据
          const wsname = workbook.SheetNames[0] // 取第一张表
          const ws:any = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
          // const ws1 = XLSX.utils.sheet_to_slk(workbook.Sheets[wsname]) // 输出表格对应位置是什么值
          // const ws2 = XLSX.utils.sheet_to_html(workbook.Sheets[wsname]) // 生成HTML输出
          // const ws3 = XLSX.utils.sheet_to_csv(workbook.Sheets[wsname]) // 生成分隔符分隔值输出
          // const ws4 = XLSX.utils.sheet_to_formulae(workbook.Sheets[wsname]) // 生成公式列表（具有值回退）
          // const ws5 = XLSX.utils.sheet_to_txt(workbook.Sheets[wsname]) // 生成UTF16格式的文本

          that.outputs = [] // 清空接收数据

          for (let i = 0; i < ws.length; i++) {
            that.outputs.push(ws[i])
          }
          console.log(that.outputs)
        } catch (e) {
          console.log(e)
          return false
        }
      }
  }
}
</script>