Vue项目读取public下excel文件并解析渲染

下载安装xlsx

npm i xlsx@0.18.5

将excel文件放入public文件夹

看代码

<template>
  <el-row>
    <el-col />
  </el-row>
</template>
<script>
import axios from 'axios'
import * as XLSX from 'xlsx'
export default {
  data() {
    return {
      excelPath: `${process.env.VUE_APP_LOCAL}sys_bug_list.xlsx`,
      // 存储excel信息的数组，也就是解析完的excel数据，根据此数据渲染
      content: []
    }
  },
  created() {
    this.readExcelFile(this.excelPath)
  },
  methods: {
    readExcelFile(url) {
      axios
        .get(url, { responseType: 'arraybuffer' })
        .then((res) => {
          const data = new Uint8Array(res)
          const wb = XLSX.read(data, { type: 'array' })
          console.log(wb)
          const sheets = wb.Sheets // 获取文档数据
          this.transformSheets(sheets)
        })
        .catch((err) => {
          this.err = err
        })
    },
    transformSheets(sheets) {
      for (const key in sheets) {
        this.content.push(XLSX.utils.sheet_to_json(sheets[key]))
      }
      return this.content
    }
  }
}
</script>