Vue.js+element-ui+js-xlsx 解析文件内容

Vue.js+element-ui+js-xlsx

寄语：vue框架中上传xlsx文件，使用js-xlsx解析文件内容

1.首先执行： npm install xlsx (安装)

2.在当前页面.vue文件中引入： import XLSX from 'xlsx'

3.在main.js中引入：import XLSX from '../static/xlsx.full.min'

   注释：当安装了npm install xlsx 在node_modules>xlsx>dist 就可以找到xlsx.full.min文件，引入就OK了

              本人是直接复制这个文件到static下，所以文件在main中引入路径为 ../static/xlsx.full.min

4.vue+element

 

<div class="">
  <el-upload action="/" :on-change='onChange' :auto-upload='false' :show-file-list="false" accept=".xls, .xlsx">
   <el-button size="small" type="primary" class="upload-bom"><i class="iconfont iconxlsx iconXlSX-sty"></i>
      <span class="iconXlSX-sty-test">文件</span></el-button>
    <!--              <div slot="tip" v-if='fileData'>{{ fileData.name }}</div>-->
  </el-upload>
  <el-table :data="outputs" style="margin-top: 20px">
    <el-table-column label="姓名" prop='name'></el-table-column>
    <el-table-column label="年龄" prop='age'></el-table-column>
  </el-table>
</div>

5.methods:{ }

data() {
    return {
        outputs: [], // 保存读取出来的数据
        fileData: '', // 保存选择的文件
    }
},

// 文件选择回调
onChange(file, fileList) {
    this.fileData = file; // 保存当前选择文件
    this.readExcel() // 调用读取数据的方法
},
// 读取数据
readExcel(e) {
    let that = this;
    const files = that.fileData;
    console.log(files);
    console.log(files.size)
    if (!files) {
        //如果没有文件
        return false;
    } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
    }
    const fileReader = new FileReader();
    fileReader.onload = ev => {
        try {
            const data = ev.target.result;
            // console.log(data)
            const workbook = XLSX.read(data, {
                type: "binary"
            });
            console.log(workbook.SheetNames)
            const wsname = workbook.SheetNames[0]; //取第一张表
            const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
            console.log(ws);
            that.outputs = []; //清空接收数据
            for (var i = 0; i < ws.length; i++) {
                var sheetData = {
                    // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
                    name: ws[i]['姓名'],
                    age: ws[i]['年龄'],
                };
                that.outputs.push(sheetData);
            }
            this.$refs.upload.value = "";
        } catch (e) {
            return false;
        }
    };
    // 如果为原生 input 则应是 files[0]
    fileReader.readAsBinaryString(files.raw);
}

6.运行结果

 

总结：解析 非常容易、在引入文件切记注意路径，然后就跟着步骤走。就绝对没错。如有疑问欢迎评论交流。