js-excel-read-func.js

简单实用

methods: {
    onTest(){
      this.readExcel(this.$refs.fileInput.files[0]).then(res => {
        console.log(res)
      })
    },
    readExcel(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = function (e) {
          let workBook = XLSX.read(e.target.result, {
            type: 'binary'
          })

          let sheetArr = []
          workBook.SheetNames.forEach((sheetName) => {
            const sheet = workBook.Sheets[sheetName]
            sheetArr.push({
              sheetName: sheetName,
              sheetRows: XLSX.utils.sheet_to_json(sheet),
            })
          })
          resolve(sheetArr)
        };

        reader.readAsArrayBuffer(file)
      })
    }
  }

使用

import * as XLSX from 'xlsx'

export function readExcel(file) {
  return new Promise(function (resolve, reject) {
    if (!file) {
      reject('file不能为控');
      return;
    }
    const getCellValue = (sheet, row, column) => {
      let cell = sheet[XLSX.utils.encode_cell({r: row, c: column})];
      let value = cell ? cell.v : '';
      return value
    }
    const rangeArr = (start, end) => {
      return Array(end - start).fill().map((_, index) => index + start)
    }

    const getSheetSize = (sheet) => {
      const range = XLSX.utils.decode_range(sheet['!ref']);
      const rowCount = range.e.r - range.s.r + 1; // 行数
      const columnCount = range.e.c - range.s.c + 1;// 列数
      return {rowCount, columnCount}
    }

    const getRows = (sheet) => {
      let {rowCount, columnCount} = getSheetSize(sheet)
      let rows = [];
      rangeArr(0, rowCount).forEach(rowIndex => {
        let row = []
        rangeArr(0, columnCount).forEach(columnIndex => {
          row.push(getCellValue(sheet, rowIndex, columnIndex))
        })
        rows.push(row)
      })
      return rows
    }


    const reader = new FileReader()
    reader.onload = function (e) {
      let workBook = XLSX.read(e.target.result, {
        type: 'binary'
      })

      let sheetArr = []
      workBook.SheetNames.forEach((sheetName) => {
        const sheet = workBook.Sheets[sheetName]
        sheetArr.push({
          sheetName: sheetName,
          sheetRows: XLSX.utils.sheet_to_json(workBook.Sheets[sheetName]),
          rows: getRows(sheet),
        })
      })
      resolve(sheetArr)
    }
    reader.readAsArrayBuffer(file) // 传统input方法
  })
}

<template>
  <div>
    <input type="file" ref="fileInput"/>
    <el-button @click="getData">getData</el-button>
  </div>
</template>

<script>

import {readExcel} from "@/tool/utils";

export default {
  methods: {
    getData() {
      let file = this.$refs['fileInput'].files?.[0];
      if (file) {
        readExcel(file).then(res => {
          console.log(res)
        })
      }
    }
  }
}
</script>