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

本文介绍了如何在Vue.js项目中,利用element-ui组件和js-xlsx库解析xlsx文件。首先通过npm安装xlsx,然后在组件中引入XLSX模块。在main.js中引入xlsx.full.min.js文件,注意正确设置文件路径。接着在vue+element的环境中定义methods进行操作。按照步骤执行,解析过程简单易懂,确保路径无误即可。

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.运行结果

 

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

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值