vue3 + xlsx 实现 excel 导入web页面解析成json数据-526互联

vue3 + xlsx 实现 excel 导入web页面并解析成json数据

fileIipt 动态创建的标签，一定要用户点击事件触发，不然文件选择框的弹出会被拦截，无法弹出。意思就是下面这段关键代码要用一个事件区触发执行，不能主动执行（比如：vue的钩子）

import * as XLSX from 'xlsx'  // v："^0.18.5"

let fileIipt = document.createElement('input');
fileIipt.type = 'file';
fileIipt.onchange = (evt) => {
    var reader = new FileReader();
    reader.readAsBinaryString(evt.target.files[0]);
    let workbook
    let data
    let sheetData = []
    reader.onload = function(ev) {
      try {
        data = ev.target.result
        console.log(data);
        workbook = XLSX.read(data, {
          type: 'binary'
        })
        console.log(workbook);
        // 以二进制流方式读取得到整份excel表格对象
        //persons = []; // 存储获取到的数据
      } catch (e) {
        console.log('err', e);
        return;
      }
      // 表格的表格范围，可用于判断表头是否数量是否正确
      // 遍历每张表读取
      for (var sheet in workbook.Sheets) {
        if (workbook.Sheets.hasOwnProperty(sheet)) {
          sheetData = sheetData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))
            //break; // 如果只取第一张表，就取消注释这行
        }
      }
    }
  }
  fileIipt.click();

页面

vue-json-excel项目数据excel