vue3实现上传excel解析成json数据，生成json文件自动下载

需求：
上传excel文件，通过js解析成json格式的数据。
对获取到的excel数据进行操作，拼接成想要的生成文件下载。

1、安装xlsx插件

cnpm install  xlsx

插件xlsx来解析excel文件
2、新建xlsx.js文件，添加以下代码，放在plugins或utils插件文件夹下

/* 读取文件 */
export const readFile = (file) => {
    
    
  return new Promise(resolve => {
    
    
    let reader = new FileReader()
    reader.readAsBinaryString(file)
    reader.onload = ev => {
    
    
      resolve(ev.target.result)
    }
  })
}

3、在vue3的项目中开发，页面代码
在index.html里引入下载文件的js代码

  <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></scrip

以下是页面的完整代码，功能是基于vue3实现的

<template>
  <div style="text-align:left;padding-left:30px;position:relative;z-index:1">
    <el-upload name="file"
               :multiple="false"
               :show-file-list="false"
               :auto-upload="false"
               :on-change="handleChange"
               style="margin-bottom:30px">
      <el-button type="primary">上传excel文件</el-button>
    </el-upload>  
  </div>
</template>

<script >
import {
      
       defineComponent, reactive, toRefs, getCurrentInstance } from 'vue'
import * as XLSX from 'xlsx'
import {
      
       readFile } from './xlsx'
export default defineComponent({
      
      
  setup(props, context) {
      
      
    const {
      
       proxy } = getCurrentInstance()
    const data = reactive({
      
      
      excelData: null
    })
    const handleChange = async (file, fileList) => {
      
      
      let dataBinary = await readFile(file.raw)
      let workBook = XLSX.read(dataBinary, {
      
       type: 'binary', cellDates: true })
      let workSheet = workBook.Sheets[workBook.SheetNames[0]]
      let data = XLSX.utils.sheet_to_json(workSheet)
	  console.log('读取到的excel的内容',data)
	  
      data.forEach((row) => {
      
      
       console.log('对数据进行操作')
      })
      
        var jsonFile = JSON.stringify(data)
        var blob = new Blob([jsonFile], {
      
      
          type: 'text/plain;charset=utf-8'
        })
        saveAs(blob, 'excel生成的.json')
      }
    }
    return {
      
      
      ...toRefs(data),
      handleChange
    }
  }
})
</script>