Vue3 implementa la carga de Excel y lo analiza en datos json, generando archivos json para descarga automática

Requisitos:
Cargue el archivo de Excel y analícelo en datos en formato json a través de js.
Opere los datos de Excel adquiridos y empalme en el archivo generado deseado para su descarga.

1. Instale el complemento xlsx

cnpm install  xlsx

Complemento xlsx para analizar archivos de Excel
2. Cree un nuevo archivo xlsx.js, agregue el siguiente código y colóquelo en la carpeta de complementos o complementos de utils

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

3. Desarrollado en el proyecto vue3, el código de la página
introduce el código js del archivo descargado en index.html

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

El siguiente es el código completo de la página, la función está implementada en base a 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>