xlsx.js读取本地文件,按行转成数组数据

1.下包

//1.
npm install xlsx 
//2.
yarn add xlsx

2.结构

<template>
  <input type="file" @change="onFileChange" />
</template>

3.代码

<script>
import * as XLSX from 'xlsx'

export default {
  methods: {
    onFileChange (event) {
      //通过 event.target.files 获取到选择的文件
      const file = event.target.files[0]
      //创建一个 FileReader 实例用于读取文件内容
      const reader = new FileReader()

      reader.onload = (e) => {
        const data = e.target.result
		//文件类型校验
		const fileType = file.name.split('.').pop().toLowerCase();
	    if (fileType !== 'xls' && fileType !== 'xlsx' && fileType !== 'excel') {
	      alert('请选择有效的xls、xlsx或Excel文件');
	      return;
	    }

        // 使用 XLSX.read() 方法解析文件数据
        //XLSX.read() 方法接受两个参数：文件数据和解析选项。
        //这里我们将 type 设置为 'binary'，以二进制字符串的形式读取文件
        const workbook = XLSX.read(data, { type: 'binary' })

		//遍历工作表的名称（workbook.SheetNames）并获取每个工作表的数据。
		//通过 workbook.Sheets[sheetName]，获取到具体工作表的数据
        workbook.SheetNames.forEach(sheetName => {
          const worksheet = workbook.Sheets[sheetName]
          //将工作表的数据转换为数组形式
          //通过设定 header 为 1，我们将首行作为数组的键名
          const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1 })

          console.log(`Sheet Name: ${sheetName}`)
		  //通过循环遍历每一行数据），将每一行的数据打印出来
          rows.forEach(row => {
            console.log(row, '每一行')
          })
        })
      }
	  //读取文件内容，并以二进制字符串的形式传递给 reader.onload 的回调函数进行处理
      reader.readAsBinaryString(file)
    }
  }
}
</script>

4.结果